1.let命令?
基本概念
let語法類似于var，不同點(diǎn)在于let定義的變量只在定義它的代碼塊中有效。
{
var a = 1;
let b = 2;
}
a // 輸出1
b // 報(bào)錯(cuò)?Uncaught ReferenceError: b is not defined
var 定義的變量要么為全局變量，要么是在函數(shù)之中的局部變量沮尿。上述代碼塊中的?a?即為全局變量轿亮，所以在代碼塊外也可調(diào)用此變量。而在代碼塊外調(diào)用變量 b 報(bào)錯(cuò)可證明?b?只在定義它的代碼塊中有效福贞。
不存在變量提升和暫時(shí)性死區(qū)
ES6 中的?let?命令是不存在“變量提升”現(xiàn)象的，變量提升指的是在變量未經(jīng)定義之前便可調(diào)用停士。
console.log(a);
var a = 1;
// undefined
console.log(b);
let b = 2;
// Uncaught ReferenceError: b is not defined
上述代碼肚医，使用 var 定義的變量 a 發(fā)生變量提升绢馍，在腳本程序運(yùn)行時(shí)變量已經(jīng)存在了，只是還未定義值肠套，所以輸出 undefined舰涌。而變量 b 在未定義之前調(diào)用打印?b?的代碼會報(bào)錯(cuò)，表明使用let?命令定義的變量是不存在變量提升的你稚。
b = 3;
let b = 2;
//?Uncaught ReferenceError: b is not defined
當(dāng)你輸入上述代碼卻得到報(bào)錯(cuò)的結(jié)果是不是很疑惑呀瓷耙，為什第一句代碼沒有把變量 b 定義為一個(gè)全局變量呢？
沒錯(cuò)刁赖！“罪魁禍?zhǔn)住?就是 let 命令搁痛，因?yàn)閺漠?dāng)前作用域的頭部一直到?let 命令聲明變量?b?之前，b都是不可用的宇弛，這在語法上稱為暫時(shí)性死區(qū)（temporal dead zone）鸡典。
ES6中規(guī)定暫時(shí)性死區(qū)和let、const不出現(xiàn)變量提升枪芒，能夠有效地避免在聲明變量之前就使用它彻况。
重復(fù)定義檢查
相同作用域內(nèi)，var 可以讓同一個(gè)變量名在同一個(gè)作用域里被定義多次舅踪，而?let?則不允許纽甘。以下是幾個(gè)例子。
{
let a = 1;
var a = 2;
}
{
let b = 2;
let b =3;
}
function test(argument){
let argument = 4;
}
test();
上述三塊代碼均會報(bào)出變量名已經(jīng)聲明的錯(cuò)誤抽碌。
let 用途
下面考慮一種需求：需要動態(tài)往HTML中一個(gè)ID為“list”的標(biāo)簽中插入十個(gè)li標(biāo)簽悍赢，并且每個(gè)li標(biāo)簽都帶有一個(gè)提示本標(biāo)簽被點(diǎn)擊的點(diǎn)擊事件。
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 循環(huán)完成了上述需求货徙。這時(shí)候你會想這個(gè)和?let?命令有什么關(guān)系左权，我換成?var 豈不是也能實(shí)現(xiàn)。下面我們來檢驗(yàn)一下?lián)Q成?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);
}
當(dāng)我們點(diǎn)擊上述代碼生成的?li?標(biāo)簽時(shí)赏迟，會發(fā)現(xiàn)無論點(diǎn)擊哪個(gè)都會打印出“Item 11 is clicked.”。下面我來解釋一下為什么會出現(xiàn)這種情況祷舀，因?yàn)樵?for?循環(huán)中的變量?i?是var定義的，在全局范圍內(nèi)都有效烹笔，而每個(gè)標(biāo)簽被點(diǎn)擊所執(zhí)行的函數(shù)內(nèi)部的?i?都指的是這個(gè)全局的?i?裳扯。而使用?let?命令時(shí)，循環(huán)體的每一次執(zhí)行都產(chǎn)生一個(gè)作用域谤职，每次綁定點(diǎn)擊事件時(shí)饰豺，函數(shù)都能保留當(dāng)前計(jì)數(shù)器的數(shù)值和引用。
注意：
let允蜈、const 命令定義的全局變量不屬于頂層對象的屬性冤吨。
let a = 1;
window.a // undefined
2.const命令
基本概念
const 命令用來定義常量蒿柳，一旦聲明，不可改變漩蟆。這也意味著聲明變量的同時(shí)就需要進(jìn)行初始化垒探，不可留到以后賦值。
const Max_Age;
Max_Age = 100;
// Uncaught SyntaxError: Missing initializer in const declaration
const 命令與?let?命令一樣：
1.只在聲明的塊級作用域有效怠李；
2.常量不可提升圾叼，同樣存在暫時(shí)性死區(qū)；
3.不可重復(fù)聲明捺癞。
原理
變量與內(nèi)存之間的關(guān)系由三部分組成：變量名夷蚊、內(nèi)存綁定及內(nèi)存地址。const 的實(shí)現(xiàn)原理便是在常量名和內(nèi)存地址之間創(chuàng)建一個(gè)不可變的綁定髓介。在某些情況下惕鼓，并非是值不可變的。對于基本類型（數(shù)值唐础，字符串等）而言箱歧，常量指向的內(nèi)存地址便保存著實(shí)際值。而對于對象彻犁、數(shù)組等引用類型叫胁，常量指向的只是一個(gè)指針，const 只能保證這個(gè)指針是不可變的汞幢，如下：
const obj = {};
obj.item = 456;
obj.item; // 輸出456
obj = {}; // Uncaught TypeError: Assignment to constant variable.
凍結(jié)對象
上述說明當(dāng)用?const?定義對象時(shí)驼鹅，并不能保證值不可變，下面我們就介紹如何獲取值不可變的對象森篷。除了凍結(jié)對象输钩，如果對象的屬性指向的還是對象，那么這個(gè)屬性也該被凍結(jié)仲智。如下代碼便可獲取值不可變的對象买乃。
const deepFreeze = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach((key,i) => {
if(typeof obj[key] === 'object')
{ deepFreeze(obj[key]);}
});
};
3.建議
1. 一般情況下，使用?const?命令對值進(jìn)行存儲钓辆；
2. 當(dāng)一個(gè)值容器存儲的值確認(rèn)會被改變時(shí)才使用?let?進(jìn)行定義剪验；
3. 不再使用?var。
