JavaScript 中 var 和 let 的區別

在 javascript 中宣告變數，我們可以使用 var、let 或 const 關鍵字。早期，var 是 JavaScript 中宣告變數的唯一方法。在 ES6 中，引入了 let 和 const 關鍵字作為宣告變數的更好方法。現在建議使用 let 而不是 var 來宣告變數。

在這篇文章中，我們將瞭解 JavaScript 中 var 和 let 之間的區別。我們將根據表格中提到的特性來區分 let 和 var。

特性 let var
作用域 let 關鍵字是塊級作用域。 var 關鍵字是函式作用域。
重新宣告 如果變數已在作用域中宣告，則不能重新宣告該變數。 可以在相同作用域中重新宣告變數。
提升 使用 let 關鍵字宣告的變數會被提升，但由於暫時性死區 (TDZ)，它會返回一個 ReferenceError。 是的，var 關鍵字允許提升。
暫時性死區 (TDZ) 在宣告變數之前存在 TDZ。 TDZ 不存在。如果在宣告之前使用，它會返回 undefined。
全域性物件屬性 在全域性作用域中，let 不會成為全域性物件的屬性。 在全域性作用域中，var 會成為全域性物件的屬性。

示例 1

在這個例子中，我們在 if 語句（在函式內部）中使用 **let** 和 **var** 聲明瞭變數。但是，輸出只顯示 var 關鍵字的結果，因為它具有函式作用域，而 let 具有塊作用域。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Scope in let and var
    </title>
</head>
<body>
    <div id="varkey"></div>
    <div id="letkey"></div>
    <script>
        function fun() {
            if (true) {
                var x = 50;
                let y = 20;
            }
            document.getElementById("varkey")
                .innerHTML = "var x = " + x;
            document.getElementById("letkey")
                .innerHTML = "let y = " + y;
        }
        fun();
    </script>
</body>
</html>

示例 2

在這個例子中，我們在宣告之前使用 **var** 關鍵字呼叫變數，輸出顯示 **undefined**，而 **let** 關鍵字則丟擲 **ReferenceError**。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="varkey"></div>
    <script>
        document.getElementById("varkey")
            .innerHTML = "var x = " + x;
        var x= 10;
    </script>
</body>
</html>

結論

在這篇文章中，我們基於各種特性（例如 **作用域**、**重新宣告**、**提升**、**TDZ** 和全域性物件屬性）以及示例，討論了 let 和 var 關鍵字之間的區別。

更新於：2024年11月22日

4K+ 次檢視

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告