ES6 新增了let命令,用來聲明局部變量檩坚。它的用法類似于var骗污,但是所聲明的變量崇猫,只在let命令所在的代碼塊內有效,而且有暫時性死區(qū)的約束需忿。
先看個var的常見變量提升的面試題目:
題目1:
var a = 99; // 全局變量a
f(); // f是函數(shù)诅炉,雖然定義在調用的后面蜡歹,但是函數(shù)聲明會提升到作用域的頂部。
console.log(a); // a=>99, 此時是全局變量的a
function f() {
console.log(a); // 當前的a變量是下面變量a聲明提升后涕烧,默認值undefined
var a = 10;
console.log(a); // a => 10
}
// 輸出結果:
undefined
10
99
ES6可以用let定義塊級作用域變量
在ES6之前月而,我們都是用var來聲明變量,而且JS只有函數(shù)作用域和全局作用域澈魄,沒有塊級作用域景鼠,所以{}限定不了var聲明變量的訪問范圍。
{
var i = 9;
}
console.log(i); // 9
ES6新增的let痹扇,可以聲明塊級作用域的變量铛漓。
{
let i = 9; // i變量只在 花括號內有效!v旯埂浓恶!
}
console.log(i); // Uncaught ReferenceError: i is not defined
let 配合for循環(huán)的獨特應用
let非常適合用于 for循環(huán)內部的塊級作用域。JS中的for循環(huán)體比較特殊结笨,每次執(zhí)行都是一個全新的獨立的塊作用域包晰,用let聲明的變量傳入到 for循環(huán)體的作用域后,不會發(fā)生改變炕吸,不受外界的影響伐憾。看一個常見的面試題目:
for (var i = 0; i <10; i++) {
setTimeout(function() { // 同步注冊回調函數(shù)到 異步的 宏任務隊列赫模。
console.log(i); // 執(zhí)行此代碼時树肃,同步代碼for循環(huán)已經執(zhí)行完成
}, 0);
}
// 輸出結果
10 共10個
// 這里面的知識點: JS的事件循環(huán)機制,setTimeout的機制等
如果把 var改成 let聲明:
// i雖然在全局作用域聲明瀑罗,但是在for循環(huán)體局部作用域中使用的時候胸嘴,變量會被固定,不受外界干擾斩祭。
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i); // i 是循環(huán)體內局部作用域劣像,不受外界影響。
}, 0);
}
// 輸出結果:
0 1 2 3 4 5 6 7 8 9
let沒有變量提升與暫時性死區(qū)
用let聲明的變量摧玫,不存在變量提升耳奕。而且要求必須 等let聲明語句執(zhí)行完之后,變量才能使用席赂,不然會報Uncaught ReferenceError錯誤吮铭。
console.log(aicoder); // 錯誤:Uncaught ReferenceError ...
let aicoder = 'aicoder.com';
// 這里就可以安全使用aicoder
ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令颅停,這個區(qū)塊對這些命令聲明的變量谓晌,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量癞揉,就會報錯纸肉。
總之溺欧,在代碼塊內,使用let命令聲明變量之前柏肪,該變量都是不可用的姐刁。這在語法上,稱為“暫時性死區(qū)”(temporal dead zone烦味,簡稱 TDZ)聂使。
let變量不能重復聲明
et不允許在相同作用域內,重復聲明同一個變量谬俄。否則報錯:Uncaught SyntaxError: Identifier 'XXX' has already been declared
let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared