區(qū)別:1、let變量有塊級作用域,而var變量沒有塊級作用域;2、var變量存在變量提升(無暫時性死區(qū)約束),可以先使用再聲明,而let變量不存在變量提升(有暫時性死區(qū)約束),必須先聲明再使用;3、let變量不能重復(fù)聲明,而var變量可以。
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ES6 新增了let
命令,用來聲明局部變量。它的用法類似于var
,但是所聲明的變量,只在let
命令所在的代碼塊內(nèi)有效(塊級作用域),而且有暫時性死區(qū)的約束。
先看個var
的常見變量提升的面試題目:
題目1: var a = 99; // 全局變量a f(); // f是函數(shù),雖然定義在調(diào)用的后面,但是函數(shù)聲明會提升到作用域的頂部。 console.log(a); // a=>99, 此時是全局變量的a function f() { console.log(a); // 當(dāng)前的a變量是下面變量a聲明提升后,默認(rèn)值undefined var a = 10; console.log(a); // a => 10 } // 輸出結(jié)果: undefined 10 99
如果以上題目有理解困難的童鞋,請系統(tǒng)的看一下老馬的免費(fèi)JS高級視頻教程。
ES6可以用let定義塊級作用域變量
在ES6之前,我們都是用var來聲明變量,而且JS只有函數(shù)作用域和全局作用域,沒有塊級作用域,所以{}
限定不了var聲明變量的訪問范圍。
例如:
{ var i = 9; } console.log(i); // 9
ES6新增的let
,可以聲明塊級作用域的變量。
{ let i = 9; // i變量只在 花括號內(nèi)有效?。?! } console.log(i); // Uncaught ReferenceError: i is not defined
let 配合for循環(huán)的獨(dú)特應(yīng)用
let
非常適合用于 for
循環(huán)內(nèi)部的塊級作用域。JS中的for循環(huán)體比較特殊,每次執(zhí)行都是一個全新的獨(dú)立的塊作用域,用let聲明的變量傳入到 for循環(huán)體的作用域后,不會發(fā)生改變,不受外界的影響。看一個常見的面試題目:
for (var i = 0; i <10; i++) { setTimeout(function() { // 同步注冊回調(diào)函數(shù)到 異步的 宏任務(wù)隊(duì)列。 console.log(i); // 執(zhí)行此代碼時,同步代碼for循環(huán)已經(jīng)執(zhí)行完成 }, 0); } // 輸出結(jié)果 10 共10個 // 這里面的知識點(diǎn): JS的事件循環(huán)機(jī)制,setTimeout的機(jī)制等
如果把 var
改成 let
聲明:
// i雖然在全局作用域聲明,但是在for循環(huán)體局部作用域中使用的時候,變量會被固定,不受外界干擾。 for (let i = 0; i < 10; i++) { setTimeout(function() { console.log(i); // i 是循環(huán)體內(nèi)局部作用域,不受外界影響。 }, 0); } // 輸出結(jié)果: 0 1 2 3 4 5 6 7 8 9
let沒有變量提升與暫時性死區(qū)
用let
聲明的變量,不存在變量提升。而且要求必須 等let
聲明語句執(zhí)行完之后,變量才能使用,不然會報(bào)Uncaught ReferenceError
錯誤。
例如:
console.log(aicoder); // 錯誤:Uncaught ReferenceError ... let aicoder = 'aicoder.com'; // 這里就可以安全使用aicoder
ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令,這個區(qū)塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報(bào)錯。
總之,在代碼塊內(nèi),使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)。
let變量不能重復(fù)聲明
let不允許在相同作用域內(nèi),重復(fù)聲明同一個變量。否則報(bào)錯:Uncaught SyntaxError: Identifier 'XXX' has already been declared
例如:
let a = 0; let a = 'sss'; // Uncaught SyntaxError: Identifier 'a' has already been declared
總結(jié)
ES6的let讓js真正擁有了塊級作用域,也是向這更安全更規(guī)范的路走,雖然加了很多約束,但是都是為了讓我們更安全的使用和寫代碼。
【