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

