ES6 - 变量



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

  • 标识符不能是关键字。

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

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

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

类型语法

必须在使用变量之前声明它。ES5 语法使用var关键字来实现相同的功能。声明变量的 ES5 语法如下所示。

//Declaration using var keyword 
var  variable_name

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

  • 使用 let。
  • 使用 const。

变量初始化是指将值存储到变量中的过程。变量可以在声明时初始化,也可以在以后的某个时间点初始化。

声明和初始化变量的传统 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 和块作用域

块作用域将变量的访问限制在声明它的块中。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

示例:let 与 var

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

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

20

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

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

以上代码将抛出错误:标识符“no”已声明。使用let关键字声明的任何变量都分配了块作用域。

let 和块级安全性

如果我们尝试在同一个块中两次声明一个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

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

Const 和数组

以下示例显示了如何创建不可变数组。可以向数组添加新元素。但是,重新初始化数组将导致错误,如下所示:

<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 之前,var关键字用于在 JavaScript 中声明变量。使用var声明的变量不支持块级作用域。这意味着如果在循环或if 块中声明了一个变量,则可以在循环或if 块外部访问它。这是因为使用var关键字声明的变量支持提升。

Var 和提升

变量提升允许在 JavaScript 程序中使用变量,即使在声明它之前也是如此。此类变量默认初始化为undefined。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
广告