輕鬆學習 JavaScript——第 1 部分：瞭解 let 語句

標籤：ogr   bbb   www.   fill   alt   語句塊   iter   get   function   

使用let語句，允許你在JavaScript中建立區塊範圍局部變數。let語句是在JavaScript的ECMAScript 6標準中引入的。

在你往下瞭解let語句之前，我建議你先查看基於Infragistics jQuery庫的Ignite UI，它可以協助你更快地編寫和運行Web應用程式。你可以使用JavaScript庫的Ignite UI來快速解決HTML5，jQuery，Angular，React或ASP.NET MVC中複雜的LOB需求。（你可以在這裡下載Ignite UI的免費試用。）

在ECMAScript 6之前，JavaScript有三種類型的範圍：

• 全域範圍
• 函數範圍
• 詞彙範圍

為了詳細探索let語句，請細想下面的程式碼片段：

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();

以上代碼得到的輸出：

 image

在上面的代碼中，我們使用var語句聲明變數x。因此，變數x的範圍是函數範圍。if語句內的變數x 就是if語句外建立的變數x 。因此，在你修改if語句塊內變數x的值時，也會修改函數中變數x的所有引用的值。

為了避免這種情況，你需要使用塊層級範圍，let語句允許你建立區塊範圍的局部變數。

修改上面的程式碼片段，使用let語句聲明變數：

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語句來聲明範圍級局部變數x。因此，在if語句內更新變數x的值不會影響if語句外的變數x的值。

下面是上述代碼的輸出：

 image

與使用函數範圍（或全域範圍）聲明的變數不同，使用let聲明的變數是區塊範圍的：它們只存在於它們定義的塊中。

變數提升

使用let聲明的變數提升不同於使用var聲明的變數。因此，使用let聲明的變數沒有變數提升，這意味著使用let聲明的變數不會移動到執行內容的頂部。

為了更好地理解這一點，請看以下這段代碼：

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

作為輸出，你將獲得變數y的ReferenceError，變數y使用let語句聲明。使用let聲明的變數不會提升到執行內容之上。

 image重新聲明變數

你不能在同一個函數或塊中使用let重新聲明一個變數。這樣做會出現語法錯誤。請看以下代碼：

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

運行上面的代碼會出來一個語法錯誤，如下所示：

 image暫時性死區

有時，使用let聲明的變數會導致暫時性死區。在以下代碼中，let x=x+67 將拋出x未定義的異常。

之所以會出現這個錯誤，是因為運算式（x + 67）求的是if區塊範圍內局部變數x的值，而不是函數範圍內局部變數x的值。運行上面的代碼，你會得到這樣一個異常：

 image

你可以通過移動聲明變數到運算式的上面一行來修複上述錯誤，如下所示：

塊級範圍界定是任何程式設計語言最重要的功能之一，並且隨著ECMAScript 6中let語句的引入，JavaScript現在也有了這個功能。使用let語句，允許建立一個範圍在區塊範圍內的變數。這可以解決許多問題，例如全域範圍變數的意外修改，閉包中的局部變數，以及協助編寫更清晰的代碼。

歡迎加入學習交流群569772982，大家一起學習交流。

輕鬆學習 JavaScript——第 1 部分：瞭解 let 語句