ES6行動：讓和const

ES6 中 let 和 const 的關鍵要點

ES6 引入了兩個新的關鍵字 let 和 const，它們提供了一種定義塊作用域變量和常量的方法，增強了 JavaScript 的功能並減少了潛在的錯誤。

let 關鍵字允許在特定塊作用域內聲明變量，這與 JavaScript 之前僅限於函數和全局作用域的限制相比是一個重大變化。用 let 聲明的變量不會被提升（hoisted），這意味著在塊內聲明之前無法引用它們。

const 關鍵字用於定義不能重新聲明的常量。雖然 const 創建了一個不可變的綁定，但它並沒有使值本身不可變。要實現值不可變性，應該使用 Object.freeze()。 let 和 const 都在 Node 和所有現代瀏覽器中受支持。

本教程將介紹 let 和 const，這兩個關鍵字是 ES6 中添加到 JavaScript 的新關鍵字。它們通過提供一種定義塊作用域變量和常量的方法來增強 JavaScript。

本文是關於ES6 中引入的JavaScript 新特性的眾多文章之一，其中包括Map 和WeakMap、Set 和WeakSet、可用於String、Number 和Array的新方法以及可用於函數的新語法。

let

在 ES5 之前，JavaScript 只有兩種作用域：函數作用域和全局作用域。這給來自 C、C 或 Java 等其他語言的開發人員帶來了很多挫折和意外行為。 JavaScript 缺乏塊作用域，這意味著變量只能在其定義的塊內訪問。塊是指一對花括號內的所有內容。讓我們來看下面的例子：

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

運行此代碼後，您將在控制台中看到以下輸出：

<code>1
2
1
2</code>

大多數來自上述語言的開發人員所期望的是，在 if 塊之外無法訪問 bar 變量。例如，在 C 中運行等效代碼會導致錯誤“bar 未聲明”，這指的是在 if 塊之外使用 bar。

這種情況在 ES6 中隨著塊作用域的可用性而改變。 ECMA 組織成員知道他們不能改變關鍵字 var 的行為，因為這會破壞向後兼容性。因此，他們決定引入一個名為 let 的新關鍵字。後者可用於定義變量，將其作用域限制為聲明它們的塊。此外，與 var 不同，使用 let 聲明的變量不會被提升。如果您在遇到該變量的 let 聲明之前引用塊中的變量，則會導致 ReferenceError。但這在實踐中意味著什麼？它只對新手有好處嗎？一點也不！

為了解釋您為什麼喜歡 let，請考慮以下代碼，摘自我的文章《5 個 JavaScript 面試練習題》：

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

在這裡，您可以識別出一個眾所周知的與變量聲明、作用域和事件處理程序相關的問題。如果您不知道我在說什麼，請查看我提到的文章，然後再回來。

感謝 ES6，我們可以通過在 for 循環中使用 let 聲明 i 變量來輕鬆解決此問題：

<code>1
2
1
2</code>

let 語句在 Node 和所有現代瀏覽器中受支持。但是，Internet Explorer 11 中有一些需要注意的地方，您可以在 ES6 兼容性表中閱讀相關信息。

下面顯示了一個演示 var 和 let 之間區別的實時演示，該演示也位於 JSBin 上。

const

const 解決了開發人員將助記名與給定值關聯的常見需求，這樣該值就不能更改（或更簡單地說，定義一個常量）。例如，如果您使用數學公式，則可能需要創建一個 Math 對象。在這個對像中，您想將 π 和 e 的值與助記名關聯起來。 const 允許您實現此目標。使用它，您可以創建一個常量，該常量可以是全局的，也可以是聲明它的函數的局部變量。

用 const 定義的常量遵循與變量相同的作用域規則，但它們不能重新聲明。常量還與使用 let 聲明的變量共享一個特性，即它們是塊作用域的而不是函數作用域的（因此它們不會被提升）。如果您嘗試在聲明常量之前訪問常量，您將收到 ReferenceError。如果您嘗試為用 const 聲明的變量分配不同的值，您將收到 TypeError。

但是，請注意，const 與不可變性無關。正如Mathias Bynens 在他的博客文章《ES2015 const 與不可變性無關》中所述，const 創建了一個不可變的綁定，但這並不表示值是不可變的，如下面的代碼所示：

<code class="language-javascript">var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('您点击了元素 #' + i);
  });
}</code>

如果要使對象的 值真正不可變，請使用 Object.freeze()。

const 的瀏覽器支持與 let 一樣好。 const 語句在 Node 和所有現代瀏覽器中受支持。但是，在這裡，Internet Explorer 11 也有一些需要注意的地方，您可以在 ES6 兼容性表中閱讀相關信息。

下面顯示了 const 的一個使用示例：

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

下面顯示了前面代碼的實時演示，該演示也位於 JSBin 上。

結論

在本教程中，我向您介紹了 let 和 const，這是 ES6 中引入的兩種聲明變量的新方法。雖然 var 不會很快消失，但我鼓勵您盡可能使用 const 和 let，以減少代碼出錯的可能性。作為進一步閱讀，您可能還會喜歡我們的快速提示《如何在 JavaScript 中聲明變量》，它更深入地探討了變量聲明的機制。

關於 ES6 let 和 const 的常見問題解答 (FAQ)

var、let 和 const 在 JavaScript ES6 中有什麼區別？

在 JavaScript ES6 中，var、let 和 const 用於聲明變量。它們之間的主要區別在於它們的作用域和重新賦值。 var 是函數作用域的，這意味著它只在其聲明的函數內可用。另一方面，let 和 const 是塊作用域的，這意味著它們只在其聲明的塊內可用。至於重新賦值，用 var 和 let 聲明的變量可以重新賦值，而用 const 聲明的變量則不能。這使得 const 非常適合在整個程序中應保持不變的值。

我應該在代碼中何時使用 let 和 const？

當您需要聲明一個會隨時間變化的變量時，例如循環中的計數器或算法中的值交換，應該使用 let。當您有一個已知不會更改的值時，例如配置設置或對 DOM 元素的引用，應該使用 const。使用 const 可以使您的代碼更易於閱讀和理解，因為它向其他開發人員表明該值不應更改。

我可以在 JavaScript ES6 中重新分配 const 變量嗎？

不可以，您不能在 JavaScript ES6 中重新分配 const 變量。一旦 const 變量被賦值，嘗試重新賦值將導致 TypeError。但是，如果 const 變量是一個對象，您可以更改對象的屬性，但不能更改對象本身。

JavaScript ES6 中 let 變量的作用域是什麼？

在 JavaScript ES6 中，let 變量具有塊作用域。這意味著它只能在其定義的代碼塊內訪問。如果您嘗試在其塊之外訪問它，您將收到 ReferenceError。

如果我在沒有初始化的情況下使用 let 或 const 聲明變量會發生什麼？

如果您在沒有初始化的情況下使用 let 或 const 聲明變量，它將是 undefined。但是，與 var 不同，您不能在聲明之前使用 let 或 const 變量。這樣做會導致 ReferenceError。

我可以在相同的作用域內使用 let 或 const 聲明同名的變量嗎？

不可以，您不能在相同的作用域內使用 let 或 const 聲明同名的變量。這樣做會導致 SyntaxError。這被稱為“暫時性死區 (Temporal Dead Zone)”規則。

在 let 和 const 的上下文中，提升是什麼？

提升是 JavaScript 中的一種機制，其中變量和函數聲明在編譯階段被移動到其包含作用域的頂部。但是，與 var 不同，let 和 const 聲明沒有被初始化。它們被提升了，但是您不能在聲明之前訪問它們，因為它們從塊的開始到聲明被處理之前都處於“暫時性死區”。

我可以在所有瀏覽器中使用 let 和 const 嗎？

let 和 const 是 ES6 (ES2015) 規範的一部分，並且在所有現代瀏覽器中都受支持。但是，對於不支持 ES6 的舊版瀏覽器，您需要使用 Babel 等轉譯器將 ES6 代碼轉換為 ES5 代碼。

使用 let 和 const 的性能影響是什麼？

使用 let 和 const 的性能影響可以忽略不計。 JavaScript 引擎會針對這些關鍵字進行優化，因此它們與 var 之間沒有明顯的性能差異。 let、const 和 var 之間的選擇應該基於它們的作用域規則和重新賦值行為，而不是性能。

在 JavaScript ES6 中使用 let 和 const 的一些最佳實踐是什麼？

在 JavaScript ES6 中使用 let 和 const 的一些最佳實踐包括默認使用 const，並且僅當您知道需要更改變量時才使用 let。這可以使您的代碼更可預測且更易於理解。此外，始終在其作用域的頂部聲明變量，以明確它們在何處可用。

以上是ES6行動：讓和const的詳細內容。更多資訊請關注PHP中文網其他相關文章！