ES6 - 变量

根据定义，变量是“内存中存储值的命名空间” 。换句话说，它充当程序中值的容器。变量名称为标识符。以下是标识符的命名规则 -

  • 标识符不能是关键字。

  • 标识符可以包含字母和数字。

  • 标识符不能包含空格和特殊字符，下划线 (_) 和美元 ($) 符号除外。

  • 变量名不能以数字开头。

类型语法

变量必须在使用之前声明。ES5 语法使用var关键字来实现相同的效果。声明变量的 ES5 语法如下。

//Declaration using var keyword 
var  variable_name

ES6 引入了以下变量声明语法 -

  • 使用让。
  • 使用常量。

变量初始化是指在变量中存储值的过程。变量可以在声明时或稍后的时间点进行初始化。

声明和初始化变量的传统 ES5 类型语法如下 -

//Declaration using var keyword 
var variable_name = value

示例：使用变量

var name = "Tom" 
console.log("The value in the variable is: "+name)

上面的例子声明了一个变量并打印它的值。

成功执行后将显示以下输出。

The value in the variable is Tom

JavaScript 和动态类型

JavaScript 是一种无类型语言。这意味着 JavaScript 变量可以保存任何数据类型的值。与许多其他语言不同，您不必在变量声明期间告诉 JavaScript 该变量将保存什么类型的值。变量的值类型可以在程序执行期间发生变化，JavaScript 会自动处理它。此功能称为动态类型。

JavaScript变量作用域

变量的作用域是定义它的程序区域。传统上，JavaScript 仅定义两个作用域：全局作用域和局部作用域。

  • 全局作用域- 可以从 JavaScript 代码的任何部分访问具有全局作用域的变量。

  • 局部作用域- 具有局部作用域的变量可以从声明它的函数内访问。

示例：全局变量与局部变量

以下示例使用名称num声明两个变量- 一个在函数外部（全局范围），另一个在函数内部（局部范围）。

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

在函数内引用该变量时，该变量显示局部作用域变量的值。但是，在函数外部访问变量num时会返回全局范围的实例。

成功执行后将显示以下输出。

value of num outside test() 10
value of num in test() 100

ES6 定义了一个新的变量作用域——块作用域。

Let 和 Block 作用域

块作用域限制变量对声明它的块的访问。var关键字将函数作用域分配给变量。与 var 关键字不同，let关键字允许脚本将对变量的访问限制为最近的封闭块。

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

该脚本在函数的本地范围内声明变量num ，并使用 let 关键字在块内重新声明它。当在内部块外部访问变量时，会打印本地作用域变量的值，而在内部块内引用块作用域变量。

注意- 严格模式是一种选择 JavaScript 受限制变体的方法。

成功执行后将显示以下输出。

value of num in test() 100 
Inner Block begins 
value of num : 200

示例：让 v/s var

var no = 10; 
var no = 20; 
console.log(no);

成功执行上述代码后将显示以下输出。

20

让我们使用let关键字重新编写相同的代码。

let no = 10; 
let no = 20; 
console.log(no);

上面的代码将抛出一个错误：标识符“no”已经被声明。使用 let 关键字声明的任何变量都被分配块作用域。

let 和 block 级别的安全性

如果我们尝试在同一个块内两次声明let变量，则会抛出错误。考虑以下示例 -

<script>
   let balance = 5000 // number type
   console.log(typeof balance)
   let balance = {message:"hello"} // changing number to object type
   console.log(typeof balance)
</script>

上面的代码将导致以下错误 -

Uncaught SyntaxError: Identifier 'balance' has already been declared

let 和多个块

但是，同一个let变量可以在不同的块级作用域中使用，而不会出现任何语法错误。

例子

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
      //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
   //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
      //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

上述代码的输出如下 -

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

常量

const声明创建对值的只读引用。这并不意味着它所保存的值是不可变的，只是变量标识符不能被重新分配。常量是块作用域的，很像使用 let 语句定义的变量。常量的值不能通过重新赋值而改变，也不能重新声明。

以下规则适用于使用const关键字声明的变量-

  • 常量不能重新赋值。
  • 不能重新声明常量。
  • 常量需要一个初始值设定项。这意味着常量必须在声明期间初始化。
  • 分配给const变量的值是可变的。

例子

const x = 10
x = 12 // will result in an error!!

上面的代码将返回错误，因为常量无法重新赋值。常量变量是不可变的。

常量是不可变的

与使用let关键字声明的变量不同，常量是不可变的。这意味着它的值无法更改。例如，如果我们尝试更改常量变量的值，则会显示错误。

<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000 // mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

上述代码的输出如下 -

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

常量和数组

以下示例展示了如何创建不可变数组。可以将新元素添加到数组中。但是，重新初始化数组将导致错误，如下所示 -

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
   //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

上述代码的输出如下所示 -

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

var 关键字

在 ES6 之前， JavaScript 中使用var关键字来声明变量。使用var声明的变量不支持块级作用域。这意味着如果在循环或if 块中声明变量，则可以在循环或if 块之外访问该变量。这是因为使用var关键字声明的变量支持提升。

var 和提升

变量提升允许在 JavaScript 程序中使用变量，甚至在声明变量之前也是如此。默认情况下，此类变量将被初始化为未定义。JavaScript 运行时将扫描变量声明并将它们放在函数或脚本的顶部。用var关键字声明的变量被提升到顶部。考虑以下示例 -

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company); // using variable before declaring
   var company = "TutorialsPoint"; // declare and initialized here
   console.log(company);
</script>

上述代码的输出如下所示 -

undefined
TutorialsPoint

var 和块作用域

块作用域限制变量对声明它的块的访问。var关键字将函数作用域分配给变量。使用var关键字声明的变量没有块作用域。考虑以下示例 -

<script>
   //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

上述代码的输出如下 -

1
2
3
4
5
after the loop i value is 6

变量i在 for 循环内使用var关键字声明。变量 i 可以在循环外访问。然而，有时可能需要限制块内变量的访问。在这种情况下我们不能使用var关键字。ES6 引入了let关键字来克服这个限制。

var 和块级安全

如果我们在一个块内使用var 关键字两次声明同一个变量，编译器将不会抛出错误。然而，这可能会导致运行时出现意外的逻辑错误。

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

上述代码的输出如下所示 -

number
object