前端面試題:JS中的let和var的區別
最近很多前端的朋友去面試被問到let和var的區別,其實阮一峰老師的ES6中已經很詳細介紹了let
的用法和var
的區別。我簡單總結一下,以便各位以後面試中使用。
ES6 新增了let
命令,用來聲明局部變量。它的用法類似於var
,但是所聲明的變量,只在let
命令所在的代碼塊內有效,而且有暫時性死區的約束。
先看個var
的常見變量提升的面試題目:
題目1:
var a = 99; // 全局變量a
f(); // f是函數,雖然定義在調用的後面,但是函數聲明會提升到作用域的頂部。
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
如果以上題目有理解困難的童鞋,請系統的看一下老馬的免費JS高級視頻教程。
ES6可以用let定義塊級作用域變量
在ES6之前,我們都是用var來聲明變量,而且JS只有函數作用域和全局作用域,沒有塊級作用域,所以{}
限定不了var聲明變量的訪問範圍。
例如:
{
var i = 9;
}
console.log(i); // 9
ES6新增的let
,可以聲明塊級作用域的變量。
{
let i = 9; // i變量只在 花括號內有效!!!
}
console.log(i); // Uncaught ReferenceError: i is not defined
let 配合for循環的獨特應用
let
非常適合用於 for
循環內部的塊級作用域。JS中的for循環體比較特殊,每次執行都是一個全新的獨立的塊作用域,用let聲明的變量傳入到 for循環體的作用域後,不會發生改變,不受外界的影響。看一個常見的面試題目:
for (var i = 0; i <10; i++) {
setTimeout(function() { // 同步註冊回調函數到 異步的 宏任務隊列。
console.log(i); // 執行此代碼時,同步代碼for循環已經執行完成
}, 0);
}
// 輸出結果
10 共10個
// 這裏面的知識點: JS的事件循環機制,setTimeout的機制等
如果把 var
改成 let
聲明:
// i雖然在全局作用域聲明,但是在for循環體局部作用域中使用的時候,變量會被固定,不受外界幹擾。
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i); // i 是循環體內局部作用域,不受外界影響。
}, 0);
}
// 輸出結果:
0 1 2 3 4 5 6 7 8 9
let沒有變量提升與暫時性死區
用let
聲明的變量,不存在變量提升。而且要求必須 等let
聲明語句執行完之後,變量才能使用,不然會報Uncaught ReferenceError
錯誤。
例如:
console.log(aicoder); // 錯誤:Uncaught ReferenceError ...
let aicoder = ‘aicoder.com‘;
// 這裏就可以安全使用aicoder
ES6 明確規定,如果區塊中存在let和const命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。
總之,在代碼塊內,使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區”(temporal dead zone,簡稱 TDZ)。
let變量不能重復聲明
let不允許在相同作用域內,重復聲明同一個變量。否則報錯:Uncaught SyntaxError: Identifier ‘XXX‘ has already been declared
例如:
let a = 0;
let a = ‘sss‘;
// Uncaught SyntaxError: Identifier ‘a‘ has already been declared
總結
ES6的let讓js真正擁有了塊級作用域,也是向這更安全更規範的路走,雖然加了很多約束,但是都是為了讓我們更安全的使用和寫代碼。
順便打個小廣告,老馬目前專註於做線下的IT全棧實習,不8000就業不還實習費,如果有需要的請關註一下: aicoder.com
老馬錄制的免費在線視頻教程: qtxh.ke.qq.com
前端面試題:JS中的let和var的區別