2 1.1 let 命令

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

1. let 命令作用城只局限于当前代码块

示例1

{
    let a = 10;
    var b = 1;
}
 
console.log("输出a：");
console.log("a = " + a);
// console.log("输出b：");
// console.log("b = " + b);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出a：
e:\HMV\JavaScript\JavaScript.js:7
console.log("a = " + a);
                     ^
ReferenceError: a is not defined
    at Object.<anonymous> (e:\HMV\JavaScript\JavaScript.js:7:22)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
 
[Done] exited with code=1 in 0.183 seconds

{
    let a = 10;
    var b = 1;
}
 
// console.log("输出a：");
// console.log(" a = " + a);
console.log("输出b：");
console.log("b = " + b);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出b：
b = 1
 
[Done] exited with code=0 in 0.175 seconds

在示例 1 的代码中，分别用 let 和 var 声明了 一个变量 ，然后在声明代码块之外调用输出，结果 let 声明的变量报错，var 声明的变量返回了正确的值。这表明，用 let 声明的变量只在它所在的代码块有效。

2. 使用 let 声明的变量作用城不会被提前

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

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

示例2

// var 的情况
console.log("输出变量hzh：");
console.log("hzh = " + hzh);
var hzh = 2; 

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出变量hzh：
hzh = undefined
 
[Done] exited with code=0 in 0.175 seconds

// let 的情况
console.log("输出let变量：");
console.log("hcq = " + hcq);
let hcq = 2;

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出let变量：
e:\HMV\JavaScript\JavaScript.js:3
console.log("hcq = " + hcq);
                       ^
ReferenceError: Cannot access 'hcq' before initialization
    at Object.<anonymous> (e:\HMV\JavaScript\JavaScript.js:3:24)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
 
[Done] exited with code=1 in 0.175 seconds

示例 2 中变量 hzh 用 var 命令声明，会发生变量提升，即脚本开始运行时，变量 hzh 已经存在了，但是没有值，所以会输出 undefined。变量 hcq 用 let 命令声明，不会发生变量提升，表示在声明它之前，变量 hcq 是不存在的，如果用到它，就会抛出一个错误。

3. 在相同的作用城下不能声明相用的变量

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

示例3

// 报错
function hzh() {
    let hcq = 10;
    var hcq = 1;
}

[Running] node "e:\HMV\JavaScript\JavaScript.js"
e:\HMV\JavaScript\JavaScript.js:4
    var hcq = 1;
        ^
SyntaxError: Identifier 'hcq' has already been declared
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
 
[Done] exited with code=1 in 0.174 seconds

// 报错
function hzh() {
    let hcq = 10;
    let hcq = 1;
}

[Running] node "e:\HMV\JavaScript\JavaScript.js"
e:\HMV\JavaScript\JavaScript.js:4
    let hcq = 1;
        ^
SyntaxError: Identifier 'hcq' has already been declared
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
 
[Done] exited with code=1 in 0.169 seconds

// 报错
function hzh(hcq) {
    let hcq;
}

[Running] node "e:\HMV\JavaScript\JavaScript.js"
e:\HMV\JavaScript\JavaScript.js:3
    let hcq;
        ^
SyntaxError: Identifier 'hcq' has already been declared
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
 
[Done] exited with code=1 in 0.174 seconds

// 不报错
function hzh(hcq) {
    {
        let hcq;
    }
}

[Running] node "e:\HMV\JavaScript\JavaScript.js"
 
[Done] exited with code=0 in 0.185 seconds

不能在函数内部重复声明参数，声明的参数也不能与形参同名。如果声明的参数是在另外一个作用域下，则是可以进行重复声明的。

4. for 循坏体中 let 的父子作用城

有 5 个按钮，当单击某个按钮时，控制台可以打印输出当前单击的是第几个按钮。按照常规的实现思路，代码实现如下：

示例4

<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>for 循环体中 let 命令</title>
</head>
 
<body>
  <button>按钮</button> 
  <button>按钮</button>
  <button>按钮</button> 
  <button>按钮</button>
  <button>按钮</button>
  <script>
    var hzhBtns = document.querySelectorAll('button');
    for(var hzh = 0; hzh < hzhBtns.length; hzh++) {
      hzhBtns[hzh].onclick = function () {
        console.log("这是第" + hzh + "个按钮");
      }
    }
  </script>
</body>
</html>

无论单击哪个按钮，最后打印的都是“这是第 5 个按钮”。什么原因呢？因为 for 是同步操作，而 for 循环内部的函数执行的是异步操作，当函数执行找不到 hzh 时，便会往上面的作用域查找，所以 hzh 的值为 5，最后打印的都是“这是第 5 个按钮”。下面通过上机训练 1 来看 let 命令如何解决这个问题。