在es6中,暫時性死區(qū)是一個語法錯誤,是指let和const命令使區(qū)塊形成封閉的作用域。在代碼塊內(nèi),使用let/const命令聲明變量之前,該變量都是不可用的,在變量聲明之前屬于該變量的“死區(qū)”;這在語法上,稱為“暫時性死區(qū)”。ES6規(guī)定暫時性死區(qū)和let、const語句不出現(xiàn)變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導(dǎo)致意料之外的行為。
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
什么是暫時性死區(qū)?
ES6中,在代碼塊內(nèi),使用let/const命令聲明變量之前,該變量都是不可用的,在變量聲明之前屬于該變量的“死區(qū)”。這在語法上,稱為“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)。ES標準并沒有明確提出TDZ,但我們常用其描述let、const的不提升效果。
let/const和var的區(qū)別
在ES6之前,JS的scope只有兩種,全局作用域和函數(shù)作用域,但是在ES6種出現(xiàn)了塊級作用域,即使用let/const可以定義塊級作用域。 那么在ES6的新特性中,最容易看到TDZ作用的就是使用let/const的使用上面。 let/const與var的主要不同有兩個地方:
- let/const是使用區(qū)塊作用域;var是使用函數(shù)作用域
- 在let/const聲明之前就訪問對應(yīng)的變量與常量,會拋出ReferenceError錯誤;但在var聲明之前就訪問對應(yīng)的變量,則會得到undefined
console.log(Vname); // undefined; console.log(Lname); // ReferenceError var Vname = 'xiaoxiao'; let Lname = 'xiaoxiao';
實踐證明當我們在未聲明之前使用var定義的變量時會得到undefined,但是在使用let未定義的變量時會拋出錯誤。因為ES6中的let聲明的變量是不存在變量提升的作用。
var x = 10; if (true) { x = 20; // ReferenceError let x; }
ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令,這個區(qū)塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。 總之,在代碼塊內(nèi),使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)。
if (true) { // TDZ開始 tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceError let tmp; // TDZ結(jié)束 console.log(tmp); // undefined tmp = 123; console.log(tmp); // 123 }
上面代碼中,在let命令聲明變量tmp之前,都屬于變量tmp的“死區(qū)”。
typeof的“死區(qū)”陷阱
我們都知道使用typeof 可以用來檢測給定變量的數(shù)據(jù)類型,也可以使用它來判斷值是否被定義。當返回undefined時表示值未定義; 但是在const/let定義的變量在變量聲明之前如果使用了typeof就會報錯
typeof x; // ReferenceError let x;
因為x是使用let聲明的,那么在x未聲明之前都屬于暫時性死區(qū),在使用typeof時就會報錯。所以在使用let/const進行聲明的變量在使用typeof時不一定安全喔。
typeof y; // 'undefined'
但是可以看出,如果我們只是用了typeof而沒有去定義,也是不會報錯的,從這粒可以看出只要沒有明確規(guī)定使用const/let定義之前就是不會出錯。
傳參的“死區(qū)”陷阱
例如下面一段代碼,我們在使用
function bar(x = y, y = 2) { return [x, y]; } bar(); // 報錯
上面代碼中,調(diào)用bar函數(shù)之所以報錯(某些實現(xiàn)可能不報錯),是因為參數(shù)x默認值等于另一個參數(shù)y,而此時y還沒有聲明,屬于”死區(qū)“。如果y的默認值是x,就不會報錯,因為此時x已經(jīng)聲明了。
function bar(x = 2, y = x) { return [x, y]; } bar(); // [2, 2]
使用var和let聲明的另外一種區(qū)別。
// 不報錯 var x = x; // 報錯 let x = x; // ReferenceError: x is not defined
受“死區(qū)”的影響,使用let聲明變量時,只要變量在還沒有聲明完成前使用,就會報錯。上面這行就屬于這個情況,在變量x的聲明語句還沒有執(zhí)行完成前,就去取x的值,導(dǎo)致報錯”x 未定義“。
總結(jié)
ES6 規(guī)定暫時性死區(qū)和let、const語句不出現(xiàn)變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導(dǎo)致意料之外的行為。這樣的錯誤在 ES5 是很常見的,現(xiàn)在有了這種規(guī)定,避免此類錯誤就很容易了。
總之,暫時性死區(qū)的本質(zhì)就是,只要一進入當前作用域,所要使用的變量就已經(jīng)存在了,但是不可獲取,只有等到聲明變量的那一行代碼出現(xiàn),才可以獲取和使用該變量。
注: TDZ最一開始是為了const所設(shè)計的,但后來的對let的設(shè)計也是一致的。
注: 在ES6標準中,對于const所聲明的識別子仍然也經(jīng)常為variable(變量),稱為constant variable(固定的變量)。以const聲明所創(chuàng)建出來的常量,在JS中只是不能再被賦(can't re-assignment),并不是不可被改變(immutable)的,這兩種概念仍然有很大的差異。
【相關(guān)推薦:javascript視頻教程、web前端】
以上是es6暫時性死區(qū)是什么意思的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

在ES6中,可以利用數(shù)組對象的reverse()方法來實現(xiàn)數(shù)組反轉(zhuǎn),該方法用于顛倒數(shù)組中元素的順序,將最后一個元素放在第一位,而第一個元素放在最后,語法“array.reverse()”。reverse()方法會修改原始數(shù)組,如果不想修改需要配合擴展運算符“...”使用,語法“[...array].reverse()”。

async是es7的。async和await是ES7中新增內(nèi)容,是對于異步操作的解決方案;async/await可以說是co模塊和生成器函數(shù)的語法糖,用更加清晰的語義解決js異步代碼。async顧名思義是“異步”的意思,async用于聲明一個函數(shù)是異步的;async和await有一個嚴格規(guī)定,兩者都離不開對方,且await只能寫在async函數(shù)中。

為了瀏覽器兼容。ES6作為JS的新規(guī)范,加入了很多新的語法和API,但現(xiàn)代瀏覽器對ES6新特性支持度不高,所以需將ES6代碼轉(zhuǎn)為ES5代碼。在微信web開發(fā)者工具中,會默認使用babel將開發(fā)者ES6語法代碼轉(zhuǎn)換為三端都能很好支持的ES5的代碼,幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題;只需要在項目中配置勾選好“ES6轉(zhuǎn)ES5”選項即可。

步驟:1、將兩個數(shù)組分別轉(zhuǎn)為set類型,語法“newA=new Set(a);newB=new Set(b);”;2、利用has()和filter()求差集,語法“new Set([...newA].filter(x =>!newB.has(x)))”,差集元素會被包含在一個set集合中返回;3、利用Array.from將集合轉(zhuǎn)為數(shù)組類型,語法“Array.from(集合)”。

es5中可以利用for語句和indexOf()函數(shù)來實現(xiàn)數(shù)組去重,語法“for(i=0;i

在es6中,暫時性死區(qū)是一個語法錯誤,是指let和const命令使區(qū)塊形成封閉的作用域。在代碼塊內(nèi),使用let/const命令聲明變量之前,該變量都是不可用的,在變量聲明之前屬于該變量的“死區(qū)”;這在語法上,稱為“暫時性死區(qū)”。ES6規(guī)定暫時性死區(qū)和let、const語句不出現(xiàn)變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導(dǎo)致意料之外的行為。

不是,require是CommonJS規(guī)范的模塊化語法;而es6規(guī)范的模塊化語法是import。require是運行時加載,import是編譯時加載;require可以寫在代碼的任意位置,import只能寫在文件的最頂端且不可在條件語句或函數(shù)作用域中使用;require運行時才引入模塊的屬性所以性能相對較低,import編譯時引入模塊的屬性所所以性能稍高。

在es6中,可以利用array對象的length屬性來判斷數(shù)組里總共有多少項,即獲取數(shù)組中元素的個數(shù);該屬性可返回數(shù)組中元素的數(shù)目,只需要使用“array.length”語句即可返回表示數(shù)組對象的元素個數(shù)的數(shù)值,也就是長度值。
