簡(jiǎn)述ES6新增關(guān)鍵字let與var的區(qū)別
最近看了很多文章,偶然間看到ES6中新增了一個(gè)關(guān)鍵字 let ,它具有與 var 關(guān)鍵字相似的功能。一開始使用它時(shí),發(fā)現(xiàn)它讓我對(duì)之前一些習(xí)以為常的東西產(chǎn)生了懷疑。
下面先讓我們看看它和 var 之間用法的不同
{
var a = 10;
let b = 8;
}
a //10
b // Referenceerror :b is not defined
上面在代碼塊中聲明了兩個(gè)變量并分別賦值輸出到控制臺(tái),結(jié)果a的變量成功輸出,b的輸出結(jié)果產(chǎn)生了報(bào)錯(cuò)。可見,let聲明的變量只在它所在的代碼塊中產(chǎn)生作用。同時(shí),我們也能想到它最好的使用方法就是在for循環(huán)中使用。
下面我們?cè)倥e個(gè)例子來觀察它與 var 之間的區(qū)別:
var a = [ ]
for(var i = 0;i<6; i++){
a[i] = function(){
console.log(i);
}
}
console.log("i的值:",i);
a[ 4 ]( );
它的輸出結(jié)果為:
i 的值:6
6
為什么是 6 呢?一開始我也被嚇懵逼了,這有悖于我的常識(shí),以往沒注意到的地方,居然這么的low。在我的意識(shí)里結(jié)果應(yīng)該 4,而不是 6 。我想了很久也想不明白,以我這種小白的技術(shù),自然是很難搞懂這種資深技術(shù)宅的問題。所以,我查了很多資料來解決這個(gè)問題,才搞明白。
在for里用 var 聲明的 i 是全局變量,在循環(huán)外部也可以訪問到,在循環(huán)體內(nèi)每次循環(huán)都給 i 重新賦一次值,而 i 卻是屬于全局的,外部的 i 值最終是 6 ,數(shù)組 a[ ]指向的 i 始終都是同一個(gè) i,當(dāng)循環(huán)結(jié)束時(shí) a [ ] 函數(shù)內(nèi)部的 i 就是最終 i 的結(jié)果 6。
如果使用let,聲明的變量只在當(dāng)前代碼塊中起作用
var a = [ ]
for(let i = 0;i<6; i++){
a[i] = function(){
console.log(i);
}
}
console.log("i的值:",i);
a[ 4 ]( );
它的輸出結(jié)果為:
i 的值:6
5
上面代碼中,變量i是let聲明的,當(dāng)前的i只在本輪循環(huán)有效,所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量,所以最后輸出的是5。你可能會(huì)問,如果每一輪循環(huán)的變量i都是重新聲明的,那它怎么知道上一輪循環(huán)的值,從而計(jì)算出本輪循環(huán)的值?這是因?yàn)?JavaScript 引擎內(nèi)部會(huì)記住上一輪循環(huán)的值,初始化本輪的變量i時(shí),就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算。
總結(jié)
以上所述是小編給大家介紹的ES6新增關(guān)鍵字let與var的區(qū)別,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法,有需要的朋友可以參考一下2013-12-12
JavaScript聲明變量時(shí)為什么要加var關(guān)鍵字
var用來聲明變量,但是這個(gè)語法并不嚴(yán)格要求,很多時(shí)修改,我們可以直接使用一個(gè)變量而不用var聲明它,不過還是建議大家加var2014-09-09
靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
這篇文章主要介紹了靈活使用數(shù)組制作圖片切換效果,js實(shí)現(xiàn)圖片切換特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
js使用循環(huán)清空某個(gè)div中的input標(biāo)簽值
清空div中input標(biāo)簽值的方法有很多,下面為大家介紹下使用循環(huán)清空某個(gè)div中的input標(biāo)簽值的具體實(shí)現(xiàn)2014-09-09
JavaScript事件循環(huán)剖析宏任務(wù)與微任務(wù)
這篇文章主要為大家介紹了JavaScript事件循環(huán)剖析宏任務(wù)與微任務(wù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法,主要思路是通過CSS Media Queries改變一個(gè)類的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05

