const和let的介紹
我們都從某個地方開始。 我學習了使用var關鍵字聲明變量的JavaScript。 它很簡單而且有效,但是我已經改變了。
如果您編寫類似var x = 5的代碼,則需要停止。 好吧,老實說,您不必這樣做,但您應該這樣做。
我們經常將編程語言視為刻板的一組規則。 現實情況是,與任何口頭語言一樣,編程語言也在不斷髮展。
現在,我使用關鍵字const並讓我們在JavaScript中聲明所有變量,所以您也應該這樣做。
讓我們學習如何以及為什麼。
顧名思義,變量表示變化的值。 儘管聲明和不接觸變量並不一定有什麼問題,但是如果我們試圖編寫具有語義意義的代碼,則應該區分變量和常量。
常量與變量相反,變量的聲明值不變。 從歷史上看,為定義一個常量,我們使用所有大寫字母,例如有毒動物的鮮豔顏色。
不用依賴約定,引入const關鍵字為我們提供了一個明確的選項,用於聲明哪些內容不會更改。
要使用const關鍵字,只需將其替換為var即可,現在無法修改該值。
// 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.
實現簡單,原理簡單。 使用const是理所當然的。 但是什麼時候合適呢?
諸如稅率或單位之間的轉換之類的數字比率很容易選擇。 您將看到使用const的另一個地方是使用箭頭符號聲明函數。
const myFunction = (x,y) => {
// Do stuff
}
myFunction(1,2)
現在,您的函數無法覆蓋。
修正JavaScript的古怪範圍
JavaScript缺乏範圍清晰性,這常常導致開發和故障排除的失敗。 以下是JS範圍異常的摘要:
· 可以對變量使用兩次var(重新聲明)
· 默認情況下,頂級變量是全局變量(全局對象)
· 循環中的變量重用了相同的引用(閉包)
使用let可以澄清並解決許多這些奇怪的問題。 讓我們仔細看看。
這很簡單,您無法重新聲明使用let製作的變量。
var x = 0;
let y = 0;
var x = 1;
let y = 1; // "SyntaxError: Identifier 'y' has already been declared
全局對象
在頂層,用var聲明的變量作為屬性添加到全局對象,而let變量則不。
var x = 0;
let y = 0;
console.log(window.x); // 0
console.log(window.y); // undefined
吊裝
用let定義的變量只能在其塊範圍內訪問,而var變量將提升到功能級別。
// 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
閉包
這是一個新概念很難理解,但是閉包是引用自由變量的函數。
當我們有一個帶有var變量的閉包時,會記住該引用,當在該變量更改的循環內時,這可能會很麻煩。
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
使用let每次都會創建一個新引用。
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
最終,即使您並非100%出於這些原因以及它們為何按其工作方式工作,切換到let也將產生更明確的代碼,這些代碼的行為始終如一,並且更易於故障排除/維護。
告誡
儘管let和const應該有效地替換var關鍵字,但生活並不總是那麼簡單。 由於這些關鍵字是在ECMAScript 2015(ES6)中引入的,因此,如果您使用的平臺不允許使用該關鍵字,那麼您就不走運了。 此外,您需要確保採取措施以確保代碼可在目標受眾的瀏覽器中正常運行。
(本文翻譯自Jonathan Hsu的文章《Stop Using 'var' to Declare Variables in JavaScript》,參考:https://levelup.gitconnected.com/stop-using-var-to-declare-variables-in-javascript-6c0caec16f43)
閱讀更多 聞數起舞 的文章
關鍵字: 修正你的養生誤區 編程語言 JavaScript