对ES6中let与const命令初步了解

柔情只为你懂 2022-06-14 01:43 137阅读 0赞

最近看了阮一峰的《ECMAScript6入门》 ，对第一章做一些记录

**1. let命令 **

ES6 新增的关键字，用法就是用于声明变量，和 var 类似；区别在于声明的变量是局部的，只在 let 所在的代码块内有效。

由于ES5中不存在块级作用域，变量i是var声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的function在运行时，会通过闭包读到这同一个变量i，导致最后输出的是最后一轮的i的值，也就是10。而如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。

同样的

for (let i = 0; i < 3; i++) { //子作用域
      let i = 'abc';              //另一个子作用域
      console.log(i);
    }
    // abc
    // abc
    // abc  因为两个i其实不一样，所以第二个i只会输出该作用域下的值

** 暂时性死区（TDZ）**

只要块级作用域内，存在 let 命令，它声明的变量就是绑定（binding）在这个区域，不受外部影响

var foo = 123           // 全局变量
    
    if (true) {
        console.log(foo)    // ReferenceError: foo is not defined ，变量不提升，与var的区别之一
        let foo
    }

类似的

var tmp = 'abc';
    
    if (true) {
    // TDZ开始
     tmp = 'abc'; // ReferenceError
     console.log(tmp); // ReferenceError
    
     let tmp; // TDZ结束
     console.log(tmp); // undefined
    
     tmp = 123;
     console.log(tmp); // 123
    }

可以看出与var的区别，1：变量声明不再提升 ，2. let声明之前，是死区，使用就会报错。

所以要养成良好的变成习惯，变量声明之后再使用。

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }

2. Const常量  
const 声明的是一个只读的常量。一旦声明值便不可以改动。因为 const 声明的值并不能改变，所以声明的时候必须初始化

const PI = 3.1415926
    console.log(PI)     // 3.1415926
    PI = 3              // TypeError: Assignment to constant variable.
    const MAX           // SyntaxError: Missing initializer in const declaration

const 的特点和 let 一样，只在声明的块级作用域中有效； const 声明的变量也不会提升，所以也是存在 TDZ 的；不能重复声明

再举个例子

const a = [];
    a.push('Hello'); // 可执行，可写
    a.length = 0;    // 可执行
    a = ['Dave'];    // 报错 ，赋值不行

**ES5 只有两种变量声明的方法： var 和 function 关键字；ES6 却还添加了 let , const , import , class ；所以 ES6 一共有6种声明变量的方法。**