ES6中如何使用let聲明變量以及l(fā)etloop機制-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“ES6中如何使用let聲明變量以及l(fā)et loop機制”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ES6中如何使用let聲明變量以及l(fā)et loop機制”這篇文章吧。

站在用戶的角度思考問題，與客戶深入溝通，找到瀘縣網(wǎng)站設計與瀘縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設計、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋瀘縣地區(qū)。

相比用var聲明，let聲明的特點

1.let聲明的變量僅在該變量所在的作用域有效

for(let i=0;i<5;i++){} console.log(i); //報錯
for(var i=0;i<5;i++){} console.log(i); //i=5;

2.不存在變量提升

先解釋下變量提升：變量提升就是變量聲明語句都會被提到所在作用域開始處，就是經(jīng)過變量提升后，代碼的實際執(zhí)行順序會與你所寫的順序不同。

console.log(i);
var i=2;

因為變量提升，所以上述代碼不會報錯，只會輸出undefined。

但是要注意：變量提升只是提升聲明語句，而不提升賦值語句

所以上述語句經(jīng)過提升之后，實際的代碼執(zhí)行順序是

var i;
console.log(i);
i=2;

再來看道經(jīng)典試題

var name = 'World!'; 
(function () { 
if (typeof name === 'undefined') { 
  var name = 'Jack'; 
  console.log('Goodbye ' + name); 
}else{ 
  console.log('Hello ' + name); 
} 
})();

請問最終console的結果是什么？

如果對變量提升一無所知，會很容易的得出hello world的結果。

我對變量提升略知一二，得出的結果是hello Jack.

但是正確結果是Goodbye Jack. 做錯的原因就是我沒有注意到變量提升僅僅是聲明提升。

3.不可以在同一作用域內重復聲明

function temp(){
   let a;
   let b; 
} //報錯

4.暫時性死區(qū)

var tmp="123"; 
if(true){ 
 tmp="abc";
 let tmp;
}

定義(出自ES6標準入門一書):在代碼塊內，使用let變量聲明之前，該變量是不可以用的。這在語法上稱為暫時性死區(qū)。

但是如果去掉上述let tmp;這句，代碼是不會錯的，只是這時的tmp即外部的全局變量，但是你如果要聲明一個與外部變量同名的局部變量，那么你就要放在這個同名變量使用之前，否則就會報錯。

說一說(let i=0;i<5;i++)的運行機制

不好意思，我們還得拿閉包來說事。

var a=[]; 
for(var i=0;i<5;i++){
  a[i]=function(){
    console.log(i);
  }
}

然后，結果i并非我們想象得那樣，按照0，1，2...的順序打印，而都是打印5，在上一篇文章理解js閉包中，我們已經(jīng)知道如何用閉包解決這個問題。但是呢，這還有一種更簡單的解法，如下

for(let i=0;i<5;i++){
   a[i]=function(){
     console.log(i);
   }
}

對，就是這么簡單，用一個let代替var,就搞定了。但是為什么呢？說實話，閉包我能想得通，但是用let真心想不通為什么可以解決這個問題。問過一些人，但是他們只是很糊弄得說，let是塊級作用域。我覺得他們壓根就沒有搞懂，我覺得這里絕對有蹊蹺，僅僅憑let是塊級作用域并不能解釋的通，一定有其他機制。

我的疑惑：就算let是塊級作用域，可是在函數(shù)里，我們沒有定義新的i,所以你訪問i,其實都在訪問父級作用域，對 let i=0;使得i只能在for循環(huán)的{}內使用，但是當你調用ai的時候，不管i是多少，它們都應該是訪問的是同一個i,怎么會出現(xiàn)0，1，2，3，4呢？
百度一下，果然不出我所料，阮一峰大神給出的解釋是，對每一次循環(huán)，都是產(chǎn)生不同的i,所以5次循環(huán)，產(chǎn)生了5個塊級作用域，而不同的塊級作用域間實現(xiàn)i++是通過js引擎記住上一個i值實現(xiàn)的。這樣一來，ai調用時，就會訪問到與自己對應的i,而不是同一個i.

所以，let可以得到閉包的效果是因為let具有塊級作用域，與let loop特殊的機制。

起初，我對這個結果不太相信，因為和直覺不太相符，感覺5次循環(huán)，產(chǎn)生5個i,和自己以前的認知不大相同啊。然后我有有了新的發(fā)現(xiàn)

第一個發(fā)現(xiàn)：

for(let i=0;i<5;i++){
   let i="abc";
   console.log(i);
}

我吃驚的是竟然沒有報錯！說好的let不可以重復聲明呢？這充分證明了let i=0;與let i="abc"不在同一個作用域。

第二個發(fā)現(xiàn)：可以通過babel將ES6代碼轉為ES5，看看上述代碼是如何實現(xiàn)的?

先創(chuàng)建一個loop函數(shù)，最終在循環(huán)的時候調用loop函數(shù)并將i作為參數(shù)傳入，這樣便會形成5個不同的副本。這也證明了用let代替閉包，關鍵是形成了5個不同的塊級作用域。

最后，ES6只是一種規(guī)范，比如說let的規(guī)范，但實現(xiàn)該規(guī)范的是JS引擎，如babel對上述代碼的轉換便體現(xiàn)出了babel對let loop的實現(xiàn)。

以上是“ES6中如何使用let聲明變量以及l(fā)et loop機制”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：ES6中如何使用let聲明變量以及l(fā)etloop機制-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article30/dpjsso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、服務器托管、動態(tài)網(wǎng)站、建站公司、關鍵詞優(yōu)化、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)