英文 | https://javascript.plainenglish.io/the-difference-between-var-let-and-const-in-javascript-630b5a8bb1c5

翻譯 | 楊小二

var 關(guān)鍵字

JavaScript 中的關(guān)鍵字 var 是開發(fā)人員用于變量聲明的第一個(gè)關(guān)鍵字。

當(dāng)你使用關(guān)鍵字 var 在函數(shù)內(nèi)聲明變量時(shí)。該變量在該函數(shù)之外無法訪問，因?yàn)樵谶@種情況下它具有函數(shù)作用域。

下面是一個(gè)例子：

function sayHelllo() { var greeting = 'Hello!'; console.log(greeting);}
sayHelllo(); // 'Hello!'
console.log(greeting) // ReferenceError: sentence is not defined

如上所示，當(dāng)我們?cè)诤瘮?shù)內(nèi)部調(diào)用變量 greeting 時(shí)，我們會(huì)在調(diào)用函數(shù)時(shí)在控制臺(tái)中得到響應(yīng)。

但是當(dāng)我們?cè)诤瘮?shù)外調(diào)用 greeting 時(shí)，我們會(huì)得到一個(gè)引用錯(cuò)誤，因?yàn)樵诤瘮?shù)內(nèi)用關(guān)鍵字 var 聲明的變量在該函數(shù)外是不可訪問的。

但是，如果在函數(shù)外部使用關(guān)鍵字 var 聲明變量，它將具有全局作用域。這意味著它可以在你的代碼中的任何地方訪問。

下面是一個(gè)例子：

/* This variable has a global scope, it's accessible everywhere */var greeting = "Hello John";function sayHelllo() { console.log(greeting); // "Hello John"}console.log(greeting); // "Hello John"

因此，在函數(shù)外部使用關(guān)鍵字 var 聲明的變量是全局范圍的。它們隨處可見。

除此之外，帶有關(guān)鍵字 var 的變量是可聲明和可重新分配的。這意味著您可以重新聲明相同的變量并重新分配它，而不會(huì)出現(xiàn)任何問題。

下面是一個(gè)例子：

var name = 'John';var name = 'Brad';console.log(name) // 'Brad'

即使我們聲明了相同的變量并重新分配了它，代碼仍然可以正常工作而不會(huì)出錯(cuò)。但是，這并不好，因?yàn)橛袝r(shí)你可以編寫相同的變量，甚至在代碼中都沒有注意到它們。這也可能導(dǎo)致你的程序出錯(cuò)。

使用 var 時(shí)要記住的另一件事是，使用關(guān)鍵字 var 聲明的所有變量和函數(shù)都被提升到其作用域的頂部。如果你不熟悉 JavaScript 中的提升，我真的建議你學(xué)習(xí)它，因?yàn)檫@是一個(gè)需要了解的重要概念。

關(guān)鍵字 let 和 const

ES6 中引入了關(guān)鍵字 let 和 const 作為 var 的替代。它們非常有用，如今幾乎每個(gè) JavaScript 開發(fā)人員都在使用它們。

與關(guān)鍵字 var 不同，這兩個(gè)關(guān)鍵字具有塊作用域。這意味著當(dāng)你在塊中聲明它們時(shí)，它們只能在該塊 {} 內(nèi)訪問。

下面是一個(gè)例子：

{    const a = 5;    let b = 6;    var c = 8;}//Accessing the variables outside the block.console.log(a); //Error: a is not defined.console.log(b); //Error: b is not defined.console.log(c); // 8

如你所見，使用 const 和 let 聲明的變量在大括號(hào)之間的范圍之外不可訪問。這就是我們得到錯(cuò)誤的原因。所以這非常有用，因?yàn)橛袝r(shí)使用關(guān)鍵字 var 你可以在不注意它的情況下更改變量。

另外，請(qǐng)記住，與 var 不同，使用 let 和 const 聲明的變量和函數(shù)不會(huì)被提升。所以你不必關(guān)心吊裝。

現(xiàn)在，你可能想知道 let 和 cosnt 之間的區(qū)別是什么？

好吧，用關(guān)鍵字 let 聲明的變量是可重新分配的，而不是可重新聲明的。雖然使用關(guān)鍵字 const 聲明的變量不可重新分配且不可重新聲明。

因此，只需將 let 用于稍后要更改的變量，而 const 用于你不想更改的常量變量。

下面是一個(gè)例子：

const name = "Brad";const name = John; //Error.let x = 1;x = 2;console.log(name); //"Brad"console.log(x); // 2

差異

關(guān)鍵字 var ：

• 函數(shù)作用域和全局作用域。

• 吊起。

• 可重新分配和重新申報(bào)。

關(guān)鍵字 let ：

• 塊范圍。

• 沒有吊起來。

• 可重新分配且不可重新申報(bào)。

關(guān)鍵字 const ：

• 塊范圍。

• 沒有吊起來。

• 不可重新分配且不可重新申報(bào)。

結(jié)論

正如你所看到的，這些都是關(guān)鍵字之間的差異var，let以及const在JavaScript中。就我個(gè)人而言，我大部分時(shí)間在我的代碼中使用const和let是因?yàn)樗鼈兏踩陀杏谩?/span>

我很少將關(guān)鍵字var用于全局變量，或者如果我希望我的變量被提升。

感謝你閱讀這篇文章。希望你覺得它有用。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)