let 和 const 命令详解

1、let 命令

    ES6新增了let，用来声明变量，它的用法类似于 var，但是所声明的变量，只在let命令所在的代码块内有效。

   

{
  let a = 1
  var b = 2
}

console.log(a) // ReferenceError: a is not defined.
console.log(b) // 2

下面讲述下 let 相对于 var 的特性

变量提升和暂时性死区

 先来看一个例子

// var 的情况
console.log(a); // 输出undefined
var a = 2;

// let 的情况
{
    console.log(b); // 报错ReferenceError
    let b = 2;
}

  上面的代码中 var 声明的变量发生了变量提升，即脚本开始运行时，变量a已经存在了，但是没有值，所以会输出undefined。注意一个细节，变量声明分为两部分，创建和初始化

var 声明的时候，创建跟初始化过程都提升了，但是let 只有创建的时候发生了提升，初始化并没有提升，下面看下过程.

var 的情况

1. 找到所有用 var 声明的变量，在环境中「创建」这些变量
2. 将这些变量「初始化」为 undefined。
3. 开始执行代码
4. a = 2 将 a 变量「赋值」为 1

也就是说 var 声明会在代码执行之前就将「创建变量，并将其初始化为 undefined」。

这就解释了为什么在 var a =  2 之前 console.log(a) 会得到 undefined。

let 的情况

1. 找到所有用 let 声明的变量，在环境中「创建」这些变量
2. 开始执行代码（注意现在还没有初始化）
3. 执行 b = 2，将b 「初始化」为 2（这并不是一次赋值，如果代码是 let b，就将 b 初始化为 undefined）

发现什么区别没有，let在执行代码之前并没有对变量进行初始化。也就是说let声明变量，只有创建过程发生了提升。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

所谓暂时死区，就是不能在初始化之前，使用变量。 

 

块级作用域

 ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。例如：

// 第一种
var str = 'outside'

function f() {
  console.log(tmp);
  if (true) {
    var str = 'indside';
  }
}

f(); // undefined
// 第二种
var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的 str 变量覆盖了外层的tmp变量。第二种for循环，用来计数的循环变量泄露为全局变量。如果用let来写循环，例如：

for (let i = 0; i < 5; i++) {
    let i = 'Tom'
    console.log(i) // 输出Tom 5 次
}
console.log(i) // i is not defined

 上面的循环就充分的体现了let 的块级作用域特性，for循环的条件判断是一个隐藏的块级，循环主题是另外一个块级，所以可以有两个变量i，互不干扰，同时循环变量在循环结束后就被回收了。

 

不允许重复声明

let 不允许在相同作用域内，重复声明同一个变量。

function aa () {
    var a = 11
    var a = 22
}
aa() // 不报错

function bb () {
    var a = 11
    let a = 22
}
bb() // 报错

function cc () {
    let a = 11
    let a = 22
}
cc() // 报错

function dd () {
    let a = 11
    {
        let a = 22
    }
}
dd() // 不报错

2、const命令

const用来声明一个只读的常量，一旦声明，常量的值就不能改变。

const PI = 3.1415;

console.log(PI) // 3.1415

PI = 3 // TypeError

const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a;
// SyntaxError: Missing initializer in const declaration

 

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。如果声明的数据类型是引用型，是可以改变的

const arr = []

arr.push('a') // 可以执行

arr = 2 // 报错

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

{
    console.log(A) // ReferenceError
    const A = 5
}

 

 

到这里差不多讲的都差不多了，let 跟 const 是 es6 新增的两种声明变量的命令，还有其他几种声明命令分别是 var ，function ，import ，class 。有兴趣的小伙伴可以去了解下~