ES6浅谈（一）—— let 与 const

前言

ES6 （ECMAScript 6.0的简称），于2015年6月正式发布，正式名称是《ECMAScript 2015标准》（简称ES2015）。所以提到ES6的地方，泛指的就是ES2015标准。

定义

let 和 const 是ES6新增加的两个关键字。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
注：这里提到了另一个定义 代码块（块级作用域 Block Scope），这也是ES6另一个重要的知识点，随后我会整理一下块级作用域的相关知识点，再分享出来。

let 命令

let 在代码块内有效

var a = 0
let b = 1
console.log(a) //输出 0
console.log(b) //输出 1

看起来没什么区别，但是在代码块内。

{
    var a = 0
    let b = 1
    console.log(a) // 输出 0
    console.log(b) // 输出 1
}
console.log(a) // 输出 0
console.log(b) // 报错 b is not defined

let 不能重复声明

var 可以重复声明一个变量 后声明的变量会覆盖之前的变量

var a = 0
var a = 1 

而let则不能在同一作用域声明相同的变量

let a = 0
let a = 1 //报错 Identifier 'a' has already been declared

但let可以在不同作用域声明同名称的变量，但值不会受到影响,而var重复声明则会被覆盖

var a = 0
let b = 0
{
    var a = 1
    let b = 2
    console.log(a)  //输出1
    console.log(b)  //输出2
}
console.log(a) //输出1 此时 a 已经被块内var a = 1 覆盖
console.log(b) //输出0 块内的let b = 2 在代码块执行结束后被销毁 不影响最初定义的 let  b = 0

let 不存在变量提升

console.log(a) //输入undefined
var a = 1

上面的代码相当于

var a
console.log(a) //输入undefined
a = 1

var 定义变量是存在变量提升的
但let则会严格按照代码顺序执行

console.log(a) // 报错 a is not defined
let a = 1

暂时性死区

这个概念跟上面的变量提升有点类似，但也有些许的不同，举个例子

var a = 0
{
    console.log(a) // 报错 a is not defined
    let a = 1
}

虽然定义了全局变量，但在代码块内部依旧报错。原因就是：

ES6明确规定了代码块内如果存在let或const，代码块会对这些命令（let 或 const）声明的变量从块的开始就形成一个封闭的作用域。

所以代码块内，在声明变量a 之前使用它就会报错

其他

在 for 循环中 let的作用域清晰，相对var 省去了很多烦恼

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10。

变量 j 是用 let 声明的，当前的 i 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出0123...。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

const 命令

const 声明的是一个只读变量或常量，声明之后不允许改变。这就表示，一旦声明必须初始化，否则会报错。

const a = 0 // 必须初始化
const b //未初始化报错  Uncaught SyntaxError: Missing initializer in const declaration

对于 作用域，变量提升，暂时性死区，重复声明等定义，const与let是相同的

但是
对于const定义数组和对象的情况要特殊理解。
这里就要理解 传值 和 传址 两种赋值方式，
简单理解：
简单类型（数值number , 字符串string , 布尔类型boolean）赋值是传值方式
复杂类型（对象object，数组array，函数function）赋值是传址方式

var a = 0
const b = a
let c = a
a = 1
console.log(b) // 输出 0
console.log(c) // 输出 0

上面 const b = a 的时候是将 0这个值传给b，所以当a变化的时候，b不发生变化。这里加了一个 c 的目的是为了证明 b 不变因为传值方式，而不是因为const 定义的常量。

继续看

var obj = {
    a: 1,
    b: 2
}
const obj1 = obj //这里传递的是 {a:1,b:2} 的地址
obj.a = 3
obj1.b = 4
console.log(obj1) // 输出 {a: 3, b: 4}

obj = {
    c: 1,
    d: 2
}
//obj1 = obj // 这里会报错 Uncaught TypeError: Assignment to constant variable.
console.log(obj) // 输出 {c: 1, d: 2}
console.log(obj1) // 输出 {a: 3, b: 4}

所以const保证指针是固定的，至于指针指向的数据结构是否发生变化就无法控制了。
这部分会有点绕，需要花时间理解一下。

总结

• let 和 const 的作用域为当前代码块
• let 和 const 不能重复声明
• ES6 暂时性死区的概念
• const 声明常量，且声明时必须初始化
• const 声明复杂类型是需要谨慎使用