ES 2022 即將新增這6個(gè)特性，最后一個(gè)絕了。

引言

新版本的 ECMA Script 將在今年六月成為標(biāo)準(zhǔn)。讓我們來看看 ES2022 有什么新特性？

新功能

1. error.cause

這是一個(gè)關(guān)于錯(cuò)誤捕獲的特性，下文代碼列舉了過去我們常使用的三種捕獲錯(cuò)誤的方式。

async?function?doJob()?{
??const?rawResource?=?await?fetch('/test')
????.catch(err?=>?{
??????//?下面三種是過去常用的一些捕獲錯(cuò)誤的代碼方式
??????
??????//?1.?throw?new?Error('下載資源失敗:?'?+?err.message);
??????
??????//?2.?const?wrapErr?=?new?Error('下載資源失敗');
??????//????wrapErr.cause?=?err;
??????//????throw?wrapErr;
??????
??????//?3.?class?CustomError?extends?Error?{
??????//??????constructor(msg,?cause)?{
??????//????????super(msg);
??????//????????this.cause?=?cause;
??????//??????}
??????//????}
??????//????throw?new?CustomError('下載資源失敗',?err);
????})
}

await?doJob();?//?=>?Uncaught?Error:?下載資源失敗:?Failed?to?fetch

過去的捕獲錯(cuò)誤的寫法比較復(fù)雜，而且開發(fā)人員對(duì)具體使用哪個(gè)屬性來獲取錯(cuò)誤的上下文沒有達(dá)成共識(shí)。

新特性是在 Error 構(gòu)造函數(shù)上添加一個(gè)附加選項(xiàng)參數(shù) cause，其值將作為屬性分配給錯(cuò)誤實(shí)例。因此，可以將錯(cuò)誤鏈接起來。

async?function?doJob()?{
??const?rawResource?=?await?fetch('/test')
????.catch(err?=>?{
??????throw?new?Error('下載資源失敗',?{?cause:?err?});
????});
}

try?{
??await?doJob();
}?catch?(e)?{
??console.log(e);
??console.log('Caused?by',?e.cause);
}
//?Error:?下載資源失敗
//?Caused?by?TypeError:?Failed?to?fetch

2. Top-level await

我們現(xiàn)在可以在模塊的頂層使用 await， 并且不再需要配合 async函數(shù)使用。

Top-level await 可以在實(shí)際生產(chǎn)中有以下用途。

• 「動(dòng)態(tài)加載模塊」

const?strings?=?await?import(`/i18n/${navigator.language}`);

這允許模塊使用運(yùn)行時(shí)值來確定依賴關(guān)系。這對(duì)于開發(fā)/生產(chǎn)拆分、國際化、環(huán)境拆分等非常有用。

• 「資源初始化」

const?connection?=?await?dbConnector();

允許模塊表示資源。

• 「依賴回退」

let?jQuery;
try?{
??jQuery?=?await?import('https://cdn-a.com/jQuery');
}?catch?{
??jQuery?=?await?import('https://cdn-b.com/jQuery');
}

依賴發(fā)生故障時(shí)，可以回退到舊版本，防止程序崩潰。

3. Object.hasOwn(obj, propKey)

Object.hasOwn() 方法是比 Object.prototype.hasOwnProperty() 方法更加 「便捷」 和 「安全」 的策略。

例如 Object.create(null) 創(chuàng)建一個(gè)不繼承自 Object.prototype 的對(duì)象，使 hasOwnProperty 方法無法訪問。

Object.create(null).hasOwnProperty("foo")
//?Uncaught?TypeError:?Object.create(...).hasOwnProperty?is?not?a?function

「Object.hasOwn(obj, propKey)」 使用案例。

let?object?=?{?foo:?false?}
Object.hasOwn(object,?"foo")?//?true

let?object2?=?Object.create({?foo:?true?})
Object.hasOwn(object2,?"foo")?//?false

let?object3?=?Object.create(null)
Object.hasOwn(object3,?"foo")?//?false

4. RegExp match indices

正則表達(dá)式，繼 /i /m /g 之后，在匹配模式上新加入了 /d,使用 /d 之后，當(dāng)我們?cè)偈褂?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">exec() 方法時(shí)，返回值會(huì)增加一個(gè)新的屬性 indices。

簡(jiǎn)單回顧下exec() 方法。

相比于常見的 search() test()而言，exec() 匹配字符串的信息更豐富，它返回一個(gè)數(shù)組，其中存放匹配的結(jié)果，如果未找到匹配，則返回值為 null

let?regx?=?/a+(?z)?/g;?
let?string?=?"xaaaz"
let?result?=?regx.exec(string);
//?['aaaz',?'z',?index:?1,?input:?'xaaaz',?groups:?{Z:'z'}]

(?)是 「ES 2018」 加入的正則語法，允許我們把部分正則內(nèi)容進(jìn)行 命名 并且 分組，上述例子中，/a+(?z)?/g表示匹配至少一個(gè) 「a」 以及 「0」 個(gè)或者 「1 個(gè) z」 ，其中包含一個(gè)命名為 「Z」 的捕獲組，配合 exec() 方法使用時(shí)，我們可以直接獲取到捕獲組的信息：result.groups，如果正則中沒用使用捕獲組的正則語法，則 「groups」 為 「undefined」

盡管 exec() 返回值提供了 「index 屬性」 來展示首次匹配的索引位置，「groups 屬性」 提供了捕獲組的信息，但在一些更高級(jí)的場(chǎng)景中，這些信息可能并不足夠。例如，「語法高亮顯示」 的實(shí)現(xiàn)不僅需要匹配的索引，還需要單個(gè)捕獲組的開始和結(jié)束索引，即上述例子中 Z 捕獲組的索引信息。

新特性中，使用 /d匹配模式時(shí)，exec() 方法的返回值會(huì)增加一個(gè)新的屬性 indices。

const?re?=?/a+(?z)?/d;
const?s?=?"xaaaz";
console.log("匹配結(jié)果：",?re.exec(s));
//['aaaz',?'z',?index:?1,?input:?'xaaaz',?groups:?{Z:'z'},?indices:?[[1,5],[4,5]]

indices屬性包含了捕獲組的信息，其中，**[ 1 , 5 ]** 為 aaaz 全部字符串的匹配信息，**[ 4 , 5 ]** 為 Z 捕獲組的匹配索引信息。

5. New members of classes

• 「簡(jiǎn)易變量聲明」

「class」 支持在 constructor 外部直接聲明變量，過去我們必須在內(nèi)部聲明。

class?Cat?{
??gender?=?'female'
}
let?cat?=?new?Cat()
cat.gender?//?female

• 「私有變量和私有方法」

封裝是面向?qū)ο缶幊痰暮诵脑瓌t之一。它通常使用可見性修飾符來實(shí)現(xiàn)，例如 private or?public。

「class」 的最近改動(dòng)里加入了 #，用來將類中的變量、方法或訪問器標(biāo)記為私有，從外部訪問私有化的內(nèi)容，會(huì)直接報(bào)錯(cuò)。

class?Cat?{
??#name?=?'kitty'
??gender?=?'female'

??setName?=?()?=>?{
????this.#name?=?'jack'
??????console.log(this.#name)
??}

??#setGender?=?()?=>?{
????this.gender=?'male'
??}
}
let?cat?=?new?Cat()
cat.#name?//?SyntaxError
cat.gender?//?'female'
cat.setName()?//?'jack'
cat.#setGender?//?SyntaxError

• 「私有字段的存在性檢查」

由于嘗試訪問對(duì)象上不存在的私有字段會(huì)報(bào)錯(cuò)從而引發(fā)程序異常，因此需要能夠檢查對(duì)象是否具有給定的私有字段。

「class」 引入了關(guān)鍵詞 in 來解決訪問私有變量直接報(bào)錯(cuò)的問題。

class?Example?{
??#field

??static?isExampleInstance(object)?{
????return?#field?in?object;
??}
}
const?ex?=?new?Example()
Example.isExampleInstance(ex)?//?true
Example.isExampleInstance({})?//?false

isExampleInstance 方法可以判斷 object 是否包含 #field。

6. at（）

這個(gè)特性過去我們聊過了，\# JS即將發(fā)布數(shù)組的4個(gè)新特性，學(xué)會(huì)了拿去吹牛^[1]

.at()支持我們讀取給定索引處的元素。它可以接受負(fù)索引來從給定數(shù)據(jù)類型的末尾讀取元素。

過去我們需要這樣來獲取數(shù)組末尾元素：

const?arr?=?[1,2,3,4,5];?
arr[arr.length-1]?//?5

現(xiàn)在 at() 可以輕松完成任務(wù)：

const?arr?=?[1,2,3,4,5];?
arr.at(-1)?//?5

代碼的語義會(huì)更直觀更清爽，非常的方便！

支持類型：

• String
• Array
• Typed Array

如果對(duì)你有幫助的話，希望各位朋友點(diǎn)贊關(guān)注收藏，你的鼓勵(lì)就是我們繼續(xù)推廣「Javascrpit」語言新特性的動(dòng)力。