[ES6]1.2Let和Const

Let

1治拿、let聲明的全局變量不是全局對(duì)象window的屬性

不能用window.變量名的方式訪問變量纷纫。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n152" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var a = 1
let b = 2
console.log(window.a)
console.log(window.b)</pre>

2寨躁、用let定義變量不允許重復(fù)聲明

在ES5中var是可用重復(fù)聲明的威蕉，而let會(huì)報(bào)錯(cuò)。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n150" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var a = 1
let a = 2 // Identifier 'a' has already been declared</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n156" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">let a = 1
let a = 2 // Identifier 'a' has already been declared</pre>

3隅津、let聲明的變量不存在變量提升

上一篇講解了var的變量提升機(jī)制诬垂，而let不存在這個(gè)機(jī)制。

<pre mdtype="fences" cid="n165" lang="javascript" spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function foo() {
console.log(a)
let a = 5
}

foo()
// Uncaught ReferenceError: Cannot access 'a' before initialization</pre>

4伦仍、let聲明的變量具有暫時(shí)性死區(qū)

JavaScript引擎在掃描代碼遇到let時(shí)结窘，會(huì)將聲明放到臨時(shí)死區(qū)中。在從上向下按順序執(zhí)行代碼時(shí)充蓝，凡是訪問到在臨時(shí)死區(qū)中的變量隧枫，都會(huì)報(bào)錯(cuò)，直至執(zhí)行過變量聲明語句后谓苟，變量才從臨時(shí)死區(qū)中移除官脓，方可正常訪問。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n171" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var a = 5
if (true) {
a = 6
let a
}
// Uncaught ReferenceError: Cannot access 'a' before initialization</pre>

有時(shí)“暫時(shí)性死區(qū)”比較隱蔽涝焙，比如：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n176" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function foo(b = a, a = 2) {
console.log(a, b)
}
foo()
// Uncaught ReferenceError: Cannot access 'a' before initialization</pre>

5卑笨、let聲明的變量擁有塊級(jí)作用域

上一篇已經(jīng)介紹了塊級(jí)作用域，這里我們說一下循環(huán)中的塊級(jí)作用域問題仑撞。

我們想象中函數(shù)是輸出0 1 2赤兴，但是函數(shù)的結(jié)果為輸出三次3，為什么會(huì)這樣呢隧哮？

這是因?yàn)閟etTimeout中的函數(shù)為異步執(zhí)行桶良，執(zhí)行順序在循環(huán)執(zhí)行完之后，而根據(jù)閉包的原則沮翔，其自由變量i在函數(shù)定義的位置向上查找艺普，而此時(shí)for循環(huán)的塊作用域中i的值為3，所以會(huì)輸出三個(gè)3鉴竭。

如何解決這個(gè)問題呢歧譬？

方法1：閉包

在i每次自增之前，都執(zhí)行一次函數(shù)搏存，保留i的備份j瑰步。在之后setTimeout執(zhí)行時(shí)，直接查找備份j璧眠。

方法2：使用let

經(jīng)過babel轉(zhuǎn)化之后缩焦，和使用閉包的寫法類似。

可以再babel官網(wǎng)進(jìn)行嘗試：babel官網(wǎng)责静。

Const

常量袁滥，不能被改變的量。

在ES5中常量的寫法：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n208" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Object.defineProperty(window, 'PI', {
value: 3.14,
writable: false
})

console.log(PI) // 3.14
PI = 5
console.log(PI) // 3.14</pre>

在ES6中常量的寫法：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n212" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">const PI = 3.1415

console.log(PI)

PI = 5

console.log(PI)
// Uncaught TypeError: Assignment to constant variable.</pre>

注意:const聲明的變量必須進(jìn)行初始化灾螃，否則會(huì)拋出異常Uncaught SyntaxError: Missing initializer in const declaration

const的特性和let大體相同题翻。

const定義對(duì)象

const在定義對(duì)象時(shí)，不能改變的是對(duì)象的引用腰鬼，而不是對(duì)象的屬性或方法嵌赠。

因?yàn)槌Ａ吭跅?nèi)存中存儲(chǔ)的是對(duì)象的引用地址塑荒，而對(duì)象的屬性和方法是存儲(chǔ)在堆內(nèi)存中。

<pre mdtype="fences" cid="n234" lang="javascript" spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">const a = {
name: 'magic',
}
console.log(a.name) // magic
a.name = 'new magic'
console.log(a.name) // new magic</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n235" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">const a = {
name: 'magic',
}
a = {
name: 'wizard'
}
// Uncaught TypeError: Assignment to constant variable.</pre>

如果我們想要讓a的name屬性不可變要怎么辦呢姜挺？

可以使用Object的freeze方法齿税，但是要注意此方法只是淺層凍結(jié)，也就是說只能對(duì)最近的一層對(duì)象進(jìn)行凍結(jié)炊豪，如果對(duì)象的屬性有嵌套對(duì)象凌箕，依然不會(huì)被凍結(jié)。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n241" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">const a = {
name: 'magic',
}
Object.freeze(a)
console.log(a.name); // magic
a.name = 'old magic'
console.log(a.name); // magic</pre>

對(duì)于let和const的選擇

建議方法是：默認(rèn)使用const词渤，只在確實(shí)需要改變變量的值時(shí)使用let牵舱。這樣就可用在某種程度上實(shí)現(xiàn)代碼的不可變，從而防止某些錯(cuò)誤的產(chǎn)生掖肋。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末仆葡，一起剝皮案震驚了整個(gè)濱河市赏参，隨后出現(xiàn)的幾起案子志笼，更是在濱河造成了極大的恐慌，老刑警劉巖把篓，帶你破解...
沈念sama閱讀 217,406評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件纫溃，死亡現(xiàn)場離奇詭異，居然都是意外死亡韧掩，警方通過查閱死者的電腦和手機(jī)紊浩，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來疗锐，“玉大人坊谁，你說我怎么就攤上這事』” “怎么了口芍？”我有些...
開封第一講書人閱讀 163,711評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長雇卷。經(jīng)常有香客問我鬓椭，道長，這世上最難降的妖魔是什么关划？我笑而不...
開封第一講書人閱讀 58,380評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任小染，我火速辦了婚禮，結(jié)果婚禮上贮折，老公的妹妹穿的比我還像新娘裤翩。我一直安慰自己，他們只是感情好调榄，可當(dāng)我...
茶點(diǎn)故事閱讀 67,432評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布岛都。她就那樣靜靜地躺著律姨，像睡著了一般。火紅的嫁衣襯著肌膚如雪臼疫。梳的紋絲不亂的頭發(fā)上择份，一...
開封第一講書人閱讀 51,301評(píng)論 1贊 301
城市分裂傳說
那天，我揣著相機(jī)與錄音烫堤，去河邊找鬼荣赶。笑死，一個(gè)胖子當(dāng)著我的面吹牛鸽斟，可吹牛的內(nèi)容都是我干的拔创。我是一名探鬼主播，決...
沈念sama閱讀 40,145評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼富蓄，長吁一口氣：“原來是場噩夢啊……” “哼剩燥！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起立倍，我...
開封第一講書人閱讀 39,008評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤灭红，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后口注，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體变擒，經(jīng)...
沈念sama閱讀 45,443評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,649評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年寝志，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了娇斑。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,795評(píng)論 1贊 347
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡材部，死狀恐怖毫缆，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情乐导，我是刑警寧澤苦丁，帶...
沈念sama閱讀 35,501評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站兽叮，受9級(jí)特大地震影響芬骄，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鹦聪，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,119評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一账阻、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧泽本，春花似錦淘太、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評(píng)論 0贊 22
一樁弒父案蒲牧，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽撇贺。三九已至，卻和暖如春冰抢，著一層夾襖步出監(jiān)牢的瞬間松嘶，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,865評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工挎扰，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留翠订，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,899評(píng)論 2贊 370
代替公主和親
正文我出身青樓遵倦，卻偏偏與公主長得像尽超，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子梧躺，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,724評(píng)論 2贊 354