TypeScript let與var的區別

楚楚99 發表於 2022-07-03

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的區別