ES6-let 與 const


1.let命令?


基本概念

let語法類似于var,不同點在于let定義的變量只在定義它的代碼塊中有效。

{
var a = 1;
let b = 2;
}
a // 輸出1
b // 報錯?Uncaught ReferenceError: b is not defined

var 定義的變量要么為全局變量,要么是在函數之中的局部變量。上述代碼塊中的?a?即為全局變量,所以在代碼塊外也可調用此變量。而在代碼塊外調用變量 b 報錯可證明?b?只在定義它的代碼塊中有效。


不存在變量提升和暫時性死區

ES6 中的?let?命令是不存在變量提升”現象的,變量提升指的是在變量未經定義之前便可調用。

console.log(a);
var a = 1;
// undefined


console.log(b);
let b = 2;
// Uncaught ReferenceError: b is not defined

上述代碼,使用 var 定義的變量 a 發生變量提升,在腳本程序運行時變量已經存在了,只是還未定義值,所以輸出 undefined。而變量 b 在未定義之前調用打印?b?的代碼會報錯,表明使用let?命令定義的變量是不存在變量提升的。

b = 3;
let b = 2;
//?Uncaught ReferenceError: b is not defined

當你輸入上述代碼卻得到報錯的結果是不是很疑惑呀,為什第一句代碼沒有把變量 b 定義為一個全局變量呢?

沒錯!“罪魁禍首” 就是 let 命令,因為從當前作用域的頭部一直到?let 命令聲明變量?b?之前,b都是不可用的,這在語法上稱為暫時性死區(temporal dead zone)

ES6中規定暫時性死區letconst不出現變量提升,能夠有效地避免在聲明變量之前就使用它。


重復定義檢查

相同作用域內,var 可以讓同一個變量名在同一個作用域里被定義多次,而?let?則不允許。以下是幾個例子。

{
let a = 1;
var a = 2;
}


{
let b = 2;
let b =3;
}


function test(argument){
let argument = 4;
}
test();

上述三塊代碼均會報出變量名已經聲明的錯誤。


let 用途

下面考慮一種需求:需要動態往HTML中一個ID為“list”的標簽中插入十個li標簽,并且每個li標簽都帶有一個提示本標簽被點擊的點擊事件。

var list = document.getElementById('list');
for( let i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

上述代碼利用 for 循環完成了上述需求。這時候你會想這個和?let?命令有什么關系,我換成?var 豈不是也能實現。下面我們來檢驗一下換成?var?可行嗎?

var list = document.getElementById('list');
for( var i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

當我們點擊上述代碼生成的?li?標簽時,會發現無論點擊哪個都會打印出“Item 11 is clicked.”。下面我來解釋一下為什么會出現這種情況,因為在?for?循環中的變量?i?var定義的,在全局范圍內都有效,而每個標簽被點擊所執行的函數內部的?i?都指的是這個全局的?i?。而使用?let?命令時,循環體的每一次執行都產生一個作用域,每次綁定點擊事件時,函數都能保留當前計數器的數值和引用。

注意:
let、const 命令定義的全局變量不屬于頂層對象的屬性。
let a = 1;
window.a // undefined


2.const命令


基本概念

const 命令用來定義常量,一旦聲明,不可改變。這也意味著聲明變量的同時就需要進行初始化,不可留到以后賦值。

const Max_Age;
Max_Age = 100;
// Uncaught SyntaxError: Missing initializer in const declaration

const 命令與?let?命令一樣:
1.只在聲明的塊級作用域有效;
2.常量不可提升,同樣存在暫時性死區;
3.不可重復聲明。


原理

變量與內存之間的關系由三部分組成:變量名、內存綁定及內存地址。const 的實現原理便是在常量名和內存地址之間創建一個不可變的綁定。在某些情況下,并非是值不可變的。對于基本類型(數值,字符串等)而言,常量指向的內存地址便保存著實際值。而對于對象、數組等引用類型,常量指向的只是一個指針,const 只能保證這個指針是不可變的,如下:

const obj = {};
obj.item = 456;
obj.item; // 輸出456
obj = {}; // Uncaught TypeError: Assignment to constant variable.

凍結對象

上述說明當用?const?定義對象時,并不能保證值不可變,下面我們就介紹如何獲取值不可變的對象。除了凍結對象,如果對象的屬性指向的還是對象,那么這個屬性也該被凍結。如下代碼便可獲取值不可變的對象。

const deepFreeze = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach((key,i) => {
if(typeof obj[key] === 'object')
{ deepFreeze(obj[key]);}
});
};


3.建議

1. 一般情況下,使用?const?命令對值進行存儲;
2. 當一個值容器存儲的值確認會被改變時才使用?let?進行定義;
3. 不再使用?var

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,125評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,506評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,402評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,934評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,168評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,690評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,027評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2 370

推薦閱讀更多精彩內容

  • let和const let命令 let用法類似var,但是所聲明的變涼,只在let命令所在的代碼塊內有效 for循...
    李諾哦閱讀 369評論 0 1
  • let 和 const 命令 let 命令 塊級作用域 const 命令 頂層對象的屬性 gl...
    安小明閱讀 985評論 0 0
  • let 命令 塊級作用域 const 命令 頂層對象的屬性 global 對象 let 命令 基本用法 ES6 新...
    嘉奇呦_nice閱讀 1,645評論 0 2
  • let 命令 塊級作用域 const 命令 頂層對象的屬性 global 對象 let 命令 基本用法 ES6 新...
    卞卞村長L閱讀 603評論 0 0
  • var缺陷 1.重復聲明 2.沒有塊級作用域,只有函數作用域 let特性 1.不能重復聲明 2.作用域為塊級 co...
    余生筑閱讀 332評論 0 0