JavaScript 中 let 和 var 的區別

這篇教程文章解釋了 JavaScript 中 var 和 let 關鍵字的實際工作方式以及它們的主要區別。

與其他程式語言一樣，JavaScript 具有用於儲存值和資料的變數。在 JavaScript 中，我們同時使用 let 和 var 關鍵字來宣告變數。

有些人認為這兩個關鍵字可以互換使用，但事實並非如此。兩者之間的主要區別可能會導致我們的程式設計出現重大錯誤。

在 ES6 更新到 JavaScript 之前，只有一種方法可以在 JavaScript 中宣告變數和常量。但是自從 ES6 更新以來，我們現在有了 let 和 const 關鍵字用於宣告變數和常量。

將 let 和 const 關鍵字新增到 JavaScript 的主要原因之一是使用 var 關鍵字宣告的變數不是宣告它的塊。相反，它的範圍僅限於函式，導致一些程式設計問題，我們將在文章的後半部分討論。

讓我們看一下這段程式碼以便更好地理解。

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

在這個程式碼段中，我們在 for 迴圈中宣告瞭變數 i 並使用 console.log 來獲取變數的值。我們沒有在 for 迴圈之後使用 {} 括號，所以 for 迴圈的塊只是下一行。

但是，我們使用了額外的 console.log 來顯示 i 的值。但是第二個 console.log 將無法獲取變數 i 的值，並會顯示以下錯誤：

ReferenceError: i is not defined

發生此錯誤是因為變數 i 的範圍僅適用於 for 迴圈塊，並且無法在塊外訪問。因此，通過這種方式，我們不能使用塊外的變數，因為使用 let 關鍵字宣告的變數的範圍僅限於塊。

要檢視 let 和 var 之間的區別，請檢視以下程式碼段：

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

在上面的程式碼中，我們可以觀察到我們使用了 var 關鍵字代替了 let 關鍵字。

雖然在前面的示例中保留了相同的兩個 console.log，但在這種情況下，第二個 console.log 也將有一個輸出。那麼，讓我們看看輸出：

0
1
2
3
4
5
6
7
8
9
10

第一個 console.log 列印從 0 到 9 的值，條件 i<10 也是如此。

但是我們可以將 10 視為肯定不是來自第一個 console.log 的輸出。因此，這個 10 是第二個 console.log 輸出。

這裡的問題是，變數 i 應該在其塊內使用，但由於塊外的 console.log 訪問了它，這意味著它已經超出了它的範圍。

它證明了 let 和 var 關鍵字用於宣告變數，但 var 關鍵字宣告的變數在其範圍方面僅限於塊。但是，var 關鍵字的作用域僅限於函式。

如果我們在函式外部宣告一個變數，let 和 var 之間還有另一個主要區別。如果我們在函式外部使用 let 關鍵字，則會建立一個無法從外部訪問的區域性變數。

但是如果我們使用 var 關鍵字，它就會變成一個全域性變數。讓我們看一下下面的程式碼段：

var color = 'blue';
let model = '2021';

在此程式碼段中宣告瞭兩個變數，一個使用 let 關鍵字，另一個使用 var 關鍵字。因此，使用 var 關鍵字宣告的變數已成為全域性變數，並將附加到瀏覽器中的 window 物件。

在瀏覽器中，我們有一個視窗物件，它有很多屬性和方法，而且非常複雜。前端應用程式開發人員廣泛瞭解視窗物件，因為他們經常使用它。

每次我們在函式外使用 var 關鍵字時，該變數都會成為全域性變數，並與 window object 關聯，並且可以從 window object 訪問。在這種情況下，它將被訪問為 window.color 將顯示 color 變數內的值，即 blue。

我們使用第三方庫並使用 var 關鍵字在函式外部宣告變數。如果第三方庫有一個與我們的變數同名的變數，該變數將覆蓋我們的變數。

這是我們避免向視窗物件新增任何內容的另一個原因；我們的意思是在這種情況下避免使用 var 關鍵字。