ES6新语法（let和const）

Posted 2022-01-26 bear*6

let

• 一、let
• 二、const
• 三、临时死区
• 四、循环中let和const的使用
• 五、let、const、var 的区别

        在ES5中，我们通常用var声明变量，但是在javascript中用’var'来声明变量会出现变量提升的情况，即通过"var"声明的变量，系统都会把声明隐式的升至顶部，这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应，导致程序出现问题。所以ES6就给我们新增了两种新的声明格式，用于补全ES5标准中var声明变量的不足：即let和const。就来具体看一下：

一、let

（1）let声明的变量只在所处于的块级有效。

if (true)  
     let a = 10;
 
 console.log(a) // a is not defined

打印结果为：

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
（2）let声明的变量不存在变量提升。

console.log(a);  
 let a = 20;

打印结果为：

二、const

作用：声明常量，常量就是值（内存地址）不能变化的量。
（1）具有块级作用域。

if (true)  
    const a = 10;
 
 console.log(a) // a is not defined

打印结果为：

（2）声明常量时必须赋值。

const PI; // Missing initializer in const declaration

打印结果为：

（3）常量赋值后，值不能修改。

const ary = [100, 200];
 ary[0] = 'a';
 ary[1] = 'b';
 console.log(ary); // ['a', 'b']; 
 ary = ['a', 'b']; // Assignment to constant variable.

三、临时死区

let和const都是块级标识符,所以let和const都是在当前代码块内有效,常量不存在变量提升的情况。但是通过let和const声明的常量,会放在临时死区(temporal dead zone),如下：

 
     console.log(typeof a);
     let a = 10
 

打印结果为：

即使通过安全的typeof操作符也会报错,原因是JavaScript引擎在扫描代码变量时,要么会把变量提升至顶部,要么会把变量放在临时死区。这里通过let声明的’a'变量会被放在临时死区,所以在声明之前打印就会报错。

四、循环中let和const的使用

(1)在ES5标准中，for循环中的循环变量都是通过var来声明的,由于var没有独立的作用域,导致在循环中创建函数时会出现结果和思路不一致的情况,如下：

 let funArr = []; //该数组中存放的是函数
 for(var i=0;i<5;i++) 
     funArr.push(function()
         console.log(i)
     )
 
 funArr.forEach(item=> 
     item()
 )

打印结果为：

循环结果不是预想的0,1,2,3,4而是5个5,这是因为var声明在循环中作用域共用，并且会把i保存在全局作用域中。要解决循环中保存函数的问题,可以利用闭包创建独立的作用域,代码如下：

 let funArr = [];
 for(var i=0;i<5;i++) 
      (
          function(i) 
              funArr.push(function()
                  console.log(i)
              )
          
      )(i) 
  
  funArr.forEach(item=> 
      item()
  )

打印结果为：

这样通过自执行函数就可以解决循环中创建函数的问题。但利用ES6中let和const提供的快级作用域可以让代码更简洁：

let funArr = [];
for(let i=0;i<5;i++) 
     funArr.push(function()
         console.log(i)
     )
 
 funArr.forEach(item=> 
     item()
 )

在for-in或for-of循环中使用const时,方法与let一致:

 let obj = 
   name: '张三',
     age: 20
 
 for(const i in obj)
     console.log(i)  //输出name、age
 

 let arr = ['张三','李四','王五']
 for(const value of arr)
     console.log(value) //输出张三、李四、王五
 

打印结果为：

五、let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。

2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。

3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。