ECMAScript6 学习笔记

提示

• 笔记根据《ES6 标准入门》（第 3 版）阮一峰著
• 书籍在线地址：https://es6.ruanyifeng.com/

let 和 const 命令

let 命令

基本用法

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

{
  var a = 1
  let b = 10
}
a // 1
b // ReferenceError: b is not defined

• var 声明变量会进行变量提升所以能在代码块外面进行访问
• let 声明变量，没有变量提升，上面的报错，表明 let 声明声明变量只在它所在的代码块有效

for 循环就很适合使用 let，打印的 i 应当在 for 循环体内有效，在循环体外引用就会报错，如果改为 var 则可以在循环体外引用，还是 var 的变量提示的作用

for (let i = 0; i <= 10; i++) {}
console.log(i) //ReferenceError: i is not defined

下面代码如果使用 var，输出结果则为 10，因为变量使用 var 声明，var 的变量提升在全局范围内有效，所以只有一个变量 i，每次循环都会改变变量 i 的值，而循环内被赋给数组 a 的函数内部的 console.log(i)，里面的 i 指向的就是全局的 i。也就是说，所有数组 a 的成员里面的 i，指向的都是同一个 i，导致运行时输出的是最后一轮的 i 的值，也就是 10

如果使用 let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = []
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i)
  }
}
arr[6]() // 10

不存在变量提升

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var
console.log(foo) // 输出undefined
var foo = 2

// let
console.log(bar) // 报错ReferenceError
let bar = 2

暂时性死区

只要块级作用域存在 let，所声明的变量就绑定（binding）这个区域，不受外部影响。 ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错总之在 let 声明之前，该变量都是不可用的，在语法上称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc' // ReferenceError
  console.log(tmp) // ReferenceError

  let tmp // TDZ结束
  console.log(tmp) // undefined

  tmp = 123
  console.log(tmp) // 123
}

隐蔽的死区

function bar(x = y, y = 2) {
  return [x, y]
}
bar() // ReferenceError: Cannot access 'y' before initialization

上面的代码，x=y 此时的 y 还没有进行声明，属于“暂时性死区”，如果调换位置或者 y 的默认值为 x 就不会出现错误

function bar(y = 2, x = y) {
  return [x, y]
}
bar() //[2,2]
// 或者
function baror(x = 2, y = x) {
  return [x, y]
}
baror() //[2,2]

不允许重复声明

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

function funcvar() {
  let
}
function func() {
  let a = 10
  let a = 10
} //SyntaxError: Identifier 'a' has already been declared. (3:6)