let 指令用法類似于 var，也是用來聲明變量 ，但是它所聲明的變量，只能在 let 指令所在的代碼塊內有效 。

{let a = 1;var b = 1; }console.log(b); console.log(a); 復制代碼

運行結果：

1 console.log(a);^ReferenceError: a is not defined 復制代碼

此例中， b 會打印出結果。但 a 因為是使用 let 命令聲明的變量，所以只在它所在的代碼塊內有效。

1 應用場景

let 指令適用于 for 循環變量聲明。在 ES6 之前，我們使用 var 指令來聲明變量，可能存在一些問題，請看下面的示例：

var a = []; for (var i = 0; i < 3; i++) {a[i] = function () {console.log(i);}; } a[0]() a[2]() 復制代碼

運行結果：

3 3

變量 i 是 var 聲明的，所以它在全局范圍內都有效 。 所以在每一次循環中，新的 i 值都會覆蓋舊值，導致最后 a 中的所有函數，輸出的都是最后一輪的 i 的值 。

使用 let 指令，就能夠避免上述問題：

var a = []; for (let i = 0; i < 3; i++) {a[i] = function () {console.log(i);}; } a[0]() a[2]() 復制代碼

運行結果：

0 2

注意： for 循環內部，設置循環變量是一個作用域，而循環體內部是另一個作用域：

for (let i = 0; i < 3; i++) {let i = 10;console.log(i) } 復制代碼

運行結果：

10 10 10

2 變量不提升

var 會發生 “ 變量提升 ” 現象，即 var 聲明的變量，可以在聲明之前使用。 但 let 聲明的變量，一定要在聲明之后使用，這種設計，讓 JS 變得更加規范。變量在聲明后，才能使用。

//var 變量提升 console.log('j='+j); var j = 1;//let 變量不會提升 console.log('k='+k); let k = 1; 復制代碼

運行結果：

j=undefined ReferenceError: k is not defined

3 暫時性死區

只要塊級作用域內，存在 let 指令，那么它所聲明的變量不會再受外部影響，所以稱為暫時性死區（temporal dead zone）。

var str = 1; if (true) {str = 'a';let str; } 復制代碼

運行結果：

ReferenceError: str is not defined

ES6 中，如果代碼塊內存在 let 或 const 指令聲明的變量，那么這些變量從一開始就會形成封閉作用域 。 凡在聲明之前使用這些變量，就會拋出 ReferenceError。

3.1 對 typeof 的影響

暫時性死區甚至會影響到 typeof 操作符：

if(true){console.log('y 類型：'+typeof y);console.log('x 類型：'+typeof x);let x; } 復制代碼

運行結果：

y 類型：undefined ReferenceError: x is not defined

這個示例，變量 x 使用 let 指令聲明，所以在聲明之前，都屬于 x 的暫時性死區 ，因此拋出了 ReferenceError 。

3.2 隱蔽的死區

請看這個示例：

function test(x = y, y = 1) {return x + y; } test(); 復制代碼

運行結果：

ReferenceError: y is not defined

函數的入參 x，它的默認值等于另一個入參 y ，而此時 y 還未聲明，所以會拋出 ReferenceError。

只要聲明了所有的入參，就可以讓這個函數正確運行：

function test2(y = 1,x = y ) {return x + y; } console.log(test2()); 復制代碼

運行結果：

2

---

暫時性死區的設定，可以有效地減少運行時錯誤。它的本質是：在當前作用域下，只有聲明了變量，才可以使用它。

4 拒絕重復聲明

let 指令，在相同作用域內，同一個變量只能被聲明一次。

if(true){let a = 1;var a = 2; } 復制代碼

運行結果：

SyntaxError: Identifier 'a' has already been declared

if(true){let a = 1;let a = 2; } 復制代碼

運行結果與上例相同。

這樣的限制，也約束了函數的入參聲明：

function test(a) {let a = 2;console.log(a); }test(1); 復制代碼

運行結果：

SyntaxError: Identifier 'a' has already been declared

但我們可以在函數內部，加入塊級作用域，來繞開這一限制：

function test(a) {{let a = 2;console.log(a);} }test(1); 復制代碼

運行結果：

2

轉載于:https://juejin.im/post/5d060c4ff265da1bb47d633a

總結

以上是生活随笔為你收集整理的说说 ES6 的 let 指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。