TypeScript let與var的區別

楚楚99發表於2022-07-03
TypeScript

1、作用域不同

用var宣告的變數，只有函式作用域和全域性作用域，沒有塊級作用域。而let可以實現塊級作用域，只能在程式碼塊{}內有效，在{}之外不能訪問，如下程式碼所示：

{
let a = 0;
var b = 1;
}

console.log(a) // ReferenceError: a is not defined
console.log(b) // 1

 

2、let沒有變數提升

在程式碼塊內，使用let命令宣告變數之前，該變數都是不可用的。這在語法上，稱為：暫時性死區，英文為：temporal dead zone，簡稱 TDZ。

//報錯
console.log(a)
let a=10

3、let變數不能重複宣告

使用var，多次宣告同一個變數，不會報錯，只會得到一個變數。

var a=1;
var a=2;

上述例子中，所有的a的宣告實際上都引用了一個相同的a。在多人開發一個專案時，容易出現問題。比如都定義了一個變數a，但各自用途不同，後面定義的a會把前面定義的覆蓋掉。

而let就相對嚴格，無法多次宣告同一個變數，一個變數只能宣告一次，並且無法在 let 語句前去訪問該變數

let a=1;
let a=2; //錯誤

4、for迴圈中的let與var

for (var i = 0; i < 3; i++) {
setTimeout(function (){console.log("i:" + i);});
}

上述程式碼列印出來i都是3，這個結果令人感覺奇怪。其實並不奇怪，原因如下所示：

（1）var是全域性變數，並且可以允許重複定義，所以在for (var i = 0; i < 3; i++)語句中，i重複定義了3次，最終的值以最後一次定義為準。

（2）javascript是單執行緒，setTimeout()會等for執行完之後才開始計時，此時i的值為3，最終列印出3

for (let j = 0; j < 3; j++) {
setTimeout(function (){console.log("j:" + j);});
}

上述程式碼列印出來i是0、1、2，原因分析如下：

（1）變數j是用let宣告的，當前的j只在本輪迴圈中有效，每次迴圈的j其實都是一個新的變數。

（2）在for迴圈中，不僅迴圈體{}會生成塊級作用域，迴圈條件()也會生成塊級作用域，迴圈條件()的塊級作用域是迴圈體{}塊級作用域的父級作用域，所以let可以跨越()和{}作用域。

參考：TypeScript let與var的區別

 

相關文章