這篇文章主要介紹了var與ES6規(guī)范中l(wèi)et、const區(qū)別是什么,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都展覽展示等企業(yè)提供專業(yè)服務(wù)。Js沒(méi)有塊級(jí)作用域
請(qǐng)看這樣一條規(guī)則:在JS函數(shù)中的var聲明,其作用域是函數(shù)體的全部。
for(var i=0;i<10;i++){ var a = 'a'; } console.log(a);
明明已經(jīng)跳出 for 循環(huán)了,卻還可以訪問(wèn)到 for 循環(huán)內(nèi)定義的變量 a ,甚至連 i 都可以被放訪問(wèn)到,尷尬~
2.** 循環(huán)內(nèi)變量過(guò)度共享 **
你可以猜一下當(dāng)執(zhí)行以下這段代碼時(shí)會(huì)發(fā)生什么
for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i) }, 1000); }
在瀏覽器里運(yùn)行一下,看看和你預(yù)想的結(jié)果是否相同?
沒(méi)錯(cuò),控制臺(tái)輸出了3個(gè)3,而不是預(yù)想的 0、1、2。
事實(shí)上,這個(gè)問(wèn)題的答案是,循環(huán)本身及三次 timeout 回調(diào)均共享唯一的變量 ** i 。當(dāng)循環(huán)結(jié)束執(zhí)行時(shí),i 的值為3。所以當(dāng)?shù)谝粋€(gè) timeout 執(zhí)行時(shí),調(diào)用的 i 當(dāng)讓也為 3 了。
話說(shuō)到這兒,想必客官已經(jīng)猜到 let 是干嘛用的。
你沒(méi)猜錯(cuò),就是解決這兩個(gè)bug的。你盡可以把上述的兩個(gè)例子中的 var 替代成 let 再運(yùn)行一次。
注意:必須聲明 'use strict' 后才能使用let聲明變量,否則瀏覽并不能顯示結(jié)果
let是更完美的var
let聲明的變量擁有塊級(jí)作用域。 也就是說(shuō)用let聲明的變量的作用域只是外層塊,而不是整個(gè)外層函數(shù)。let 聲明仍然保留了提升特性,但不會(huì)盲目提升,在示例一中,通過(guò)將var替換為let可以快速修復(fù)問(wèn)題,如果你處處使用let進(jìn)行聲明,就不會(huì)遇到類似的bug。
let聲明的全局變量不是全局對(duì)象的屬性。這就意味著,你不可以通過(guò)window.變量名的方式訪問(wèn)這些變量。它們只存在于一個(gè)不可見的塊的作用域中,這個(gè)塊理論上是Web頁(yè)面中運(yùn)行的所有JS代碼的外層塊。
形如for (let x...)的循環(huán)在每次迭代時(shí)都為x創(chuàng)建新的綁定。
這是一個(gè)非常微妙的區(qū)別,拿示例二來(lái)說(shuō),如果一個(gè)for (let...)循環(huán)執(zhí)行多次并且循環(huán)保持了一個(gè)閉包,那么每個(gè)閉包將捕捉一個(gè)循環(huán)變量的不同值作為副本,而不是所有閉包都捕捉循環(huán)變量的同一個(gè)值。
所以示例二中,也以通過(guò)將var替換為let修復(fù)bug。
這種情況適用于現(xiàn)有的三種循環(huán)方式:for-of、for-in、以及傳統(tǒng)的用分號(hào)分隔的類C循環(huán)。
用let重定義變量會(huì)拋出一個(gè)語(yǔ)法錯(cuò)誤(SyntaxError)。
這個(gè)很好理解,用代碼說(shuō)話
let a = 'a'; let a = 'b';
上述寫法是不允許的,瀏覽器會(huì)報(bào)錯(cuò),因?yàn)橹貜?fù)定義了。
** 在這些不同之外,let和var幾乎很相似了。舉個(gè)例子,它們都支持使用逗號(hào)分隔聲明多重變量,它們也都支持解構(gòu)特性。 **
ES6引入的第三個(gè)聲明類關(guān)鍵詞:const
一句話說(shuō)明白,const 就是用來(lái)定義常量的!任何腦洞(fei)大(zhu)開(liu)的寫法都是非法的
比如這樣:
//只聲明變量不賦值 const a 這樣: //重復(fù)聲明變量 const a = 'a'; const a = 'b';
還有這樣:
//給變量重新賦值 const a = 'a'; a = 'b'
再來(lái)個(gè)黑科技:
//不過(guò)不推薦這么干,實(shí)在沒(méi)啥意思,常量常量,不變的才叫常量嘛~ const a = {a:'a'}; //重新賦值當(dāng)然是行不通的了 a = {a:'b'}; //嘿嘿嘿科技 a.a = 'b'
const 確實(shí)沒(méi)啥說(shuō)的,普通用戶使用完全沒(méi)問(wèn)題,高(dou)端(bi)用戶咋用都是問(wèn)題。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“var與ES6規(guī)范中l(wèi)et、const區(qū)別是什么”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!