全文共2218字，預計學習時長

對`const` 和`let`的介紹

大家都始於初學者。我學到在JavaScript中用關鍵詞var來聲明變量，這是一個簡單且有效的方法，但如今我已做出改變。

若你還在編寫類似var x = 5的代碼，那你需要停下來。說實話，你不必停止，但應該如此。

人們常常將編程語言視作視為一系列金科玉律。但事實上編程語言就像任何一個口頭語言一樣，是不斷變化發展的。

現在我用關鍵詞const和let在JavaScript中聲明所有變量，你也應該這麼做。

讓我們一起學習如何且為什麼要這麼做。

變量，顧名思義即變化的值。雖然聲明和不接觸變量並沒有什麼問題，但是如果想要編寫具有語義的代碼，則應該區分變量和常量。

常量與變量相反，是聲明的不變值。歷史上，人們用大寫所有的字母來定義一個常數，例如有毒的動物身上的鮮豔顏色。

不用依賴慣例，const關鍵字的引入為人們提供了一個明確的選項，用於聲明哪個值不會更改。

要使用const關鍵字，只需將var替換為const，就無法修改該值了。

<code>// the old way

// var sales_tax = 0.06;
// the new way

const sales_tax = 0.06;
sales_tax = 0.08; // "TypeError: Assignment to constant variable./<code>

實現方式非常簡單，原理也非常簡單。使用const甚至不用動腦，但什麼時候用才合適呢？

諸如稅率或單位之間的轉換的數字比率可作為選擇。另外還會在使用箭頭符號聲明函數時使用const。

<code>const myFunction = (x,y) => {
    // Do stuff
}myFunction(1,2)/<code>

這樣函數就不會被覆蓋了。

修復JavaScript的異常範圍

JavaScript缺乏範圍清晰性，常導致開發和故障排除的失敗。以下是JavaScript範圍異常的摘要：

· 一個變量可以使用兩次var（重聲明）

· 默認情況下，頂級變量是全局變量（全局對象）

· 循環中的變量重複使用同樣的引用（閉包）

使用let可以澄清和解決許多這些異常。來仔細看看吧。

這很簡單，由let構成的變量是無法重聲明的。

<code>var x = 0;
let y = 0;
var x = 1; 

let y = 1; // "SyntaxError: Identifier 'y' has already been declared/<code>

全局對象

由var定義的頂級變量會作為系統屬性被自動添至全局變量，但由let定義的變量就不會。

<code>var x = 0;
let y = 0;
console.log(window.x); // 0
console.log(window.y); // undefined/<code>

提升

由let定義的變量只能在其塊級作用域內訪問，而由var定義的變量會被提升至函數級別。

<code>// Using var
console.log(i); // undefined
for(var i=0; i<4; i++) {
   console.log(i);
}
console.log(i); // 4//
Using let
console.log(j); // "ReferenceError: j is not defined
for(let j=0; j<4; j++) {
   console.log(j);
}
console.log(j); // "ReferenceError: j is not defined/<code>

閉包

如果閉包對你來說是一個新概念的話，那可能會難以理解，但是閉包是引用自由變量的函數。

當閉包中帶有var時，該引用會被記住，當循環中的變量發生變化時，會造成麻煩。

<code>var functions = [];for (var i = 0; i < 3; i++) {
   functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
   functions[j]();
}// 3 3 3/<code>

如果使用let，每次都會創建新的引用。

<code>var functions = [];
for (let i = 0; i < 3; i++) {
   functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
   functions[j]();
}// 0 1 2/<code>

說到底，即使不是100％出於這些原因以及它們為何按其工作方式工作，切換到let還將產生更明確的代碼，這些代碼的行為始終如一，並且更易於故障排除和維護。

告誡

儘管let和const應該可以有效替換var關鍵字，但是一切並不總是那麼簡單。

由於這些關鍵字是在ECMAScript2015（ES6）中引入的，因此，如果你使用的平臺不允許使用該關鍵字，那就很不幸了。此外，還要確保你的代碼可以在目標受眾群體的瀏覽器中正常運行。

我們一起分享AI學習與發展的乾貨

閱讀更多 讀芯術 的文章

關鍵字: 聲明 JavaScript 中用