簡述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)文章
JavaScript訪問本地文件夾的幾種實(shí)現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法
這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法,實(shí)例分析了javascript操作時(shí)間及DOM節(jié)點(diǎn)實(shí)現(xiàn)定時(shí)觸發(fā)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法
今天小編就為大家分享一篇layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09webpack自動(dòng)打包和熱更新的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack自動(dòng)打包和熱更新的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例
這篇文章介紹了點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例,有需要的朋友可以參考一下2013-08-08js實(shí)現(xiàn)前端跨域postMessage的具體使用
這篇文章主要介紹了js實(shí)現(xiàn)前端跨域postMessage的具體使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JavaScript數(shù)組Array的一些常用方法總結(jié)
JavaScript的Array對(duì)象是用于構(gòu)造數(shù)組的全局對(duì)象,數(shù)組是類似于列表的高階對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組Array的一些常用方法,需要的朋友可以參考下2021-11-11