這篇文章主要為大家展示了“ES6中如何使用let聲明變量以及l(fā)et loop機制”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ES6中如何使用let聲明變量以及l(fā)et loop機制”這篇文章吧。
相比用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的結(jié)果是什么？
如果對變量提升一無所知，會很容易的得出hello world的結(jié)果。
我對變量提升略知一二，得出的結(jié)果是hello Jack.
但是正確結(jié)果是Goodbye Jack. 做錯的原因就是我沒有注意到變量提升僅僅是聲明提升。
3.不可以在同一作用域內(nèi)重復(fù)聲明
function temp(){
let a;
let b;
} //報錯4.暫時性死區(qū)
var tmp="123";
if(true){
tmp="abc";
let tmp;
}定義(出自ES6標準入門一書):在代碼塊內(nèi)，使用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);
}
}然后，結(jié)果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)的{}內(nèi)使用，但是當你調(diào)用ai的時候，不管i是多少，它們都應(yīng)該是訪問的是同一個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調(diào)用時，就會訪問到與自己對應(yīng)的i,而不是同一個i.
所以，let可以得到閉包的效果是因為let具有塊級作用域，與let loop特殊的機制。
起初，我對這個結(jié)果不太相信，因為和直覺不太相符，感覺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不可以重復(fù)聲明呢？這充分證明了let i=0;與let i="abc"不在同一個作用域。
第二個發(fā)現(xiàn)：可以通過babel將ES6代碼轉(zhuǎn)為ES5，看看上述代碼是如何實現(xiàn)的?
先創(chuàng)建一個loop函數(shù)，最終在循環(huán)的時候調(diào)用loop函數(shù)并將i作為參數(shù)傳入，這樣便會形成5個不同的副本。這也證明了用let代替閉包，關(guān)鍵是形成了5個不同的塊級作用域。
最后，ES6只是一種規(guī)范，比如說let的規(guī)范，但實現(xiàn)該規(guī)范的是JS引擎，如babel對上述代碼的轉(zhuǎn)換便體現(xiàn)出了babel對let loop的實現(xiàn)。
以上是“ES6中如何使用let聲明變量以及l(fā)et loop機制”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
