ES6 系列一：let和const

"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习之前，我们想要告诉您的是，本文章是对阮一峰《ECMAScript6 入门》一书中 "let 和 const 命令" 章节的总结，如果您已掌握下面知识事项，则可跳过此环节直接进入题目练习

• 出现原由
• 什么是暂时性死区？
• 什么是变量提升？
• 是什么块级作用域？

如果您对某些部分有些遗忘，👇🏻 已经为您准备好了！

学习链接

let 和 const 的学习

汇总总结

出现原由

在 ES5 中，只有全局作用域和函数作用域，没有块级作用域，这带来了很多不合理的场景，比如：内层变量可能覆盖外层变量、用来计数的循环变量泄露为全局变量。所以，let 和 const 实际上引入了“块级作用域”的概念

变量提升

var 命令会发生”变量提升“的的现象，即变量可在声明之前使用，而一般逻辑是先声明变量再去使用变量。故为了纠正此现象，let 命令改变了语法行为，即它所声明的变量一定要在声明后使用。

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

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

块级作用域

块级作用域可通过新增命令 let 和 const 声明，所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：

• 在一个函数内部
• 在一个代码块（由一对花括号包裹）内部
• 外层代码块不受内层代码块的影响

function f1() {
  let n = 5
  if (true) {
    let n = 10
  }
  console.log(n) // 5
}

let 命令

• 只在代码块中生效

{
  let a = 10
  console.log(a) //10
}
console.log(a) //undefined

• 无变量提升

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

• 不可重复声明

//报错
let a = 10
let a = 20

const 命令

• 只读常量，一旦声明，就不能改变，且必须初始化
• 作用域与 let 相同
• 无变量提升
• 存在暂时性死区
• 不可重复声明

const MAX = 1000000
const MIN //SyntaxError
const MAX = 10000 //报错

暂时性死区

在代码块内，使用 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
}

//上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

题目自测

一: 下面的代码输出什么?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

• A: 0 1 2 and 0 1 2
• B: 0 1 2 and 3 3 3
• C: 3 3 3 and 0 1 2

Answer：C

由于 JavaScript 中存在事件队列，因此在执行循环之后会调用setTimeout回调函数。因为第一个循环中的变量 i 是使用var关键字声明的，所以这个值是全局的。在循环过程中，我们使用一元运算符++将 i 的值每次递增 1。在调用setTimeout回调函数时，在第一个示例中 i 等于 3。在第二个循环中，变量 i 是使用 let 关键字声明的：使用let（and const）关键字声明的变量是块范围的（块是介于{}之间的任何东西）。在每次迭代中，都会有一个新值，每个值的作用域都是独立的。

---

二: 下面代码输出什么？

function sayHi() {
  console.log(name)
  console.log(age)
  var name = 'Lydia'
  let age = 21
}

sayHi()

• A: Lydia and undefined
• B: Lydia and ReferenceError
• C: ReferenceError and 21
• D: undefined and ReferenceError

Answer：D

在函数中，我们首先用 var 关键字声明 name 变量。这意味着变量将被提升（内存空间在创建阶段设置），默认值为 undefined，直到我们实际到达定义变量的行。我们还没有在试图记录 name 变量的行中定义变量，所以它仍然保存 undefined 的值。

带有 let 关键字（和 const）的变量会被提升，但与 var 不同的是，不会被初始化。在我们声明（初始化）它们之前，它们是不可访问的。这就是所谓的“暂时死区”。当我们试图在声明变量之前访问它们时，JavaScript 抛出一个 ReferenceError。

---

三: 下面代码输出什么?

let name = 'Lydia'

function getName() {
  console.log(name)
  let name = 'Sarah'
}

getName()

• A: Lydia
• B: Sarah
• C: undefined
• D: ReferenceError

Answer：D

每个函数都有自己的执行上下文（或作用域）。getName 函数首先在它自己的上下文（作用域）中查看它是否包含我们试图访问的变量名。在本例中，getName 函数包含它自己的 name 变量：我们用 let 关键字和'Sarah'值声明变量名。

带有 let 关键字（和 const）的变量会被提升，但与 var 不同的是，不会被初始化。在我们声明（初始化）它们之前，它们是不可访问的。这就是所谓的“暂时死区”。当我们试图在声明变量之前访问它们时，JavaScript 抛出一个 ReferenceError。

如果我们没有在 getName 函数中声明 name 变量，javascript 引擎就会向下查看作用域链。外部作用域有一个名为 name 的变量，其值为 Lydia。如果那样的话，它会记录为 Lydia。