使用let語(yǔ)句，允許你在JavaScript中創(chuàng)建塊范圍局部變量。let語(yǔ)句是在JavaScript的ECMAScript 6標(biāo)準(zhǔn)中引入的。

在你往下了解let語(yǔ)句之前，我建議你先查看基于Infragistics jQuery庫(kù)的Ignite UI，它可以幫助你更快地編寫(xiě)和運(yùn)行Web應(yīng)用程序。你可以使用JavaScript庫(kù)的Ignite UI來(lái)快速解決HTML5，jQuery，Angular，React或ASP.NET MVC中復(fù)雜的LOB需求。（你可以在這里下載Ignite UI的免費(fèi)試用版。）

在ECMAScript 6之前，JavaScript有三種類(lèi)型的范圍：

• 全局范圍
• 函數(shù)范圍
• 詞匯范圍

為了詳細(xì)探索let語(yǔ)句，請(qǐng)細(xì)想下面的代碼段：

function foo() {
var x = 9;
if (x > 5) {
var x = 7;
console.log("Value of x in if statement = " + x);
}
console.log("Value of x outside if statement = " + x);
}
foo();

以上代碼得到的輸出：

在上面的代碼中，我們使用var語(yǔ)句聲明變量x。因此，變量x的范圍是函數(shù)范圍。if語(yǔ)句內(nèi)的變量x 就是if語(yǔ)句外創(chuàng)建的變量x 。因此，在你修改if語(yǔ)句塊內(nèi)變量x的值時(shí)，也會(huì)修改函數(shù)中變量x的所有引用的值。

為了避免這種情況，你需要使用塊級(jí)別范圍，let語(yǔ)句允許你創(chuàng)建塊范圍的局部變量。

修改上面的代碼片段，使用let語(yǔ)句聲明變量：

function foo() {
var x = 9;
if (x > 5) {
let x = 7;
console.log("Value of x in if statement = " + x);
}
console.log("Value of x outside if statement = " + x);
}
foo();

在上面的代碼段中，我們使用let語(yǔ)句來(lái)聲明范圍級(jí)局部變量x。因此，在if語(yǔ)句內(nèi)更新變量x的值不會(huì)影響if語(yǔ)句外的變量x的值。

下面是上述代碼的輸出：

與使用函數(shù)范圍（或全局范圍）聲明的變量不同，使用let聲明的變量是塊范圍的：它們只存在于它們定義的塊中。

變量提升

使用let聲明的變量提升不同于使用var聲明的變量。因此，使用let聲明的變量沒(méi)有變量提升，這意味著使用let聲明的變量不會(huì)移動(dòng)到執(zhí)行上下文的頂部。

為了更好地理解這一點(diǎn)，請(qǐng)看以下這段代碼：

function foo() {
console.log(x);
console.log(y);
var x = 9;
let y = 67;
}
foo();

作為輸出，你將獲得變量y的ReferenceError，變量y使用let語(yǔ)句聲明。使用let聲明的變量不會(huì)提升到執(zhí)行上下文之上。

重新聲明變量

你不能在同一個(gè)函數(shù)或塊中使用let重新聲明一個(gè)變量。這樣做會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤。請(qǐng)看以下代碼：

function foo() {
if(true){
let x = 9;
let x = 89; 
}
}
foo();

運(yùn)行上面的代碼會(huì)出來(lái)一個(gè)語(yǔ)法錯(cuò)誤，如下所示：

暫時(shí)性死區(qū)

有時(shí)，使用let聲明的變量會(huì)導(dǎo)致暫時(shí)性死區(qū)。在以下代碼中，let x=x+67 將拋出x未定義的異常。

之所以會(huì)出現(xiàn)這個(gè)錯(cuò)誤，是因?yàn)楸磉_(dá)式（x + 67）求的是if塊范圍內(nèi)局部變量x的值，而不是函數(shù)范圍內(nèi)局部變量x的值。運(yùn)行上面的代碼，你會(huì)得到這樣一個(gè)異常：

你可以通過(guò)移動(dòng)聲明變量到表達(dá)式的上面一行來(lái)修復(fù)上述錯(cuò)誤，如下所示：

塊級(jí)范圍界定是任何編程語(yǔ)言最重要的功能之一，并且隨著ECMAScript 6中l(wèi)et語(yǔ)句的引入，JavaScript現(xiàn)在也有了這個(gè)功能。使用let語(yǔ)句，允許創(chuàng)建一個(gè)作用域在塊范圍內(nèi)的變量。這可以解決許多問(wèn)題，例如全局范圍變量的意外修改，閉包中的局部變量，以及幫助編寫(xiě)更清晰的代碼。

英文原文：Easy JavaScript, Part 1: Learn the 'let' Statement

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論