ECMAScript 2020新增特性

（給前端大學(xué)加星標(biāo)，提升前端技能.）

譯者：潘繩杰

https://blog.bookcell.org/2020/04/12/ecmascript-2020-new-feature/

前言

TC39 委員會(huì)于近期批準(zhǔn)了 ECMAScript 2020（即 ES2020）候選提案，即經(jīng)審定最終添加到 JavaScript 語言中的特性集。ES2020 候選提案是今年六月提交 ECMA 大會(huì)（General Assembly）的審批匯總。

@潘繩杰，南京華為慧通，熱愛前端和工程化

正文從這開始～～

Jordan Harband提出的String.prototype.matchAll

String.prototype上的match()方法僅返回完全匹配，但是沒有返回關(guān)于特定正則組的任意信息。感謝Jordan Harband關(guān)于String.prototype.matchAll的提案，可以返回比match()多很多的信息。返回的迭代器除了精確匹配外還給了我們訪問所有的正則匹配捕獲組。你還記得Gorkem Yakin和Daniel Ehrenberg添加到ECMAScript 2018的具名捕獲組嗎？matchAll()方法和此能很好的協(xié)調(diào)。通過下面例子來解釋一下。

1. const text ="From 2019.01.29 to 2019.01.30";

2. const regexp =/(?\d{4}).(?\d{2}).(?\d{2})/gu;

3. const results = text.match(regexp);

4. 
   

5. console.log(results);

6. // [ '2019.01.29', '2019.01.30' ]

1. const text ="From 2019.01.29 to 2019.01.30";

2. const regexp =/(?\d{4}).(?\d{2}).(?\d{2})/gu;

3. const results =Array.from(text.matchAll(regexp));

4. 
   

5. console.log(results);

6. // [

7. // [

8. // '2019.01.29',

9. // '2019',

10. // '01',

11. // '29',

12. // index: 5,

13. // input: 'From 2019.01.29 to 2019.01.30',

14. // groups: [Object: null prototype] { year: '2019', month: '01', day: '29' }

15. // ],

16. // [

17. // '2019.01.30',

18. // '2019',

19. // '01',

20. // '30',

21. // index: 19,

22. // input: 'From 2019.01.29 to 2019.01.30',

23. // groups: [Object: null prototype] { year: '2019', month: '01', day: '30' }

24. // ]

25. // ]

Domenic Denicola提出的import()

不同于ECMAScript 2015中介紹的靜態(tài)模塊，Domenic Denicola提案的動(dòng)態(tài)導(dǎo)入可以實(shí)現(xiàn)按需加載。這個(gè)類似函數(shù)的格式（不是繼承自Function .prototype）返回一個(gè)很強(qiáng)大的promise。使用場景比如: 按需導(dǎo)入，在一個(gè)腳本中計(jì)算模塊名并加載執(zhí)行變得可能。

1. const modulePage ='page.js';

2. import(modulePage)

3. .then((module)=>{

4. module.default();

5. });

1. (async()=>{

2. const helpersModule ='helpers.js';

3. constmodule=awaitimport(helpersModule)

4. const total =module.sum(2,2);

5. })();

Daniel Ehrenberg提出的BigInt-任意精度整數(shù)

感謝Daniel Ehrenberg, Number.MAXSAFEINTEGER不再是JavaScript中的一個(gè)限制。BigInt是一個(gè)能表示任意精度整數(shù)的新基礎(chǔ)類型。你可以通過使用BigInt方法或者在一個(gè)數(shù)字后添加n后綴來把一個(gè)數(shù)字轉(zhuǎn)換為一個(gè)新的bigint類型。

1. Number.MAX_SAFE_INTERGER

2. // 9007199254740991

3. 
   

4. Number.MAX_SAFE_INTEGER +10-10

5. // 9007199254740990 ?

6. 
   

7. BigInt(Number.MAX_SAFE_INTEGER)+10n-10n

8. // 9007199254740991n ?

Jason Williams, Robert Pamely and Mathias Bynens提出的Promise.allSettled

自從ECMAScript 2015以來，JavaScript僅支持兩種promise組合: Promise.all()和Promise.race()。感謝Jason Williams, Robert Pamely and Mathias Bynens，現(xiàn)在我們可以使用Promise.allSettled()。用這個(gè)方法來處理所有promise都解決時(shí)的場景（不管成功或失敗）。看看下面的例子，并沒有使用catch捕獲異常！

1. Promise.allSettled([

2. fetch("https://api.github.com/users/pawelgrzybek").then(data => data.json()),

3. fetch("https://api.github.com/users/danjordan").then(data => data.json())

4. ])

5. .then(result => console.log(`All profile settled`));

還有Promise.any()有潛力很快進(jìn)入ECMAScript規(guī)范中，在文章“Promise組合解釋”中介紹了相關(guān)內(nèi)容。

Jordan Harband提出的globalThis

那么在JavaScript中什么是全局的this?是在瀏覽器中的window，在worker中的self，在Nodejs中的global或者其他… 這種混亂結(jié)束了！感謝Jordan Harband，我們現(xiàn)在可以使用globalThis關(guān)鍵字了。

Kevin Gibbons提出的for-in機(jī)制

ECMAScript遺留了一個(gè)關(guān)于for-in循環(huán)順序的詳細(xì)描述。感謝Kevin Gibbons所付出的努力，為for-in機(jī)制定義了一系列規(guī)則。(原文: Thanks to Kevin Gibbons who finally put some TLC and defined a set in stone set of rules for for-in mechanics.)

Gabriel Isenberg, Claude Pache and Dustin Savery提出的optional chaining

讀取層次很深的對(duì)象屬性時(shí)通常是容易出錯(cuò)并且對(duì)應(yīng)代碼也不易閱讀。感謝Gabriel Isenberg, Claude Pache and Dustin Savery，這件事情現(xiàn)在變得簡單了。如果你是一個(gè)TypeScript用戶，那么你不會(huì)發(fā)現(xiàn)什么新的特性，因?yàn)樵?.7版本中TypeScript已經(jīng)實(shí)現(xiàn)了這個(gè)特性。喜歡！

1. // 之前

2. const title = data && data.article && data.article.title

3. 
   

4. // 現(xiàn)在

5. const title = data?.article?.title

Gabriel Isenberg 提出的空值聯(lián)合

空值聯(lián)合添加了一個(gè)新的短路原則操作符來處理默認(rèn)值。Gabriel Isenberg做了很棒的工作。這個(gè)特性結(jié)合optional chanining特性使用。不同于||操作符，空值聯(lián)合操作符??僅在左邊的值為嚴(yán)格的null或undefined時(shí)起左右。

1. ""||"default value"

2. // default value

3. 
   

4. ""??"default value"

5. // ""

1. const title = data?.article?.title ??"What's new in ECMAScript 2020"

Domenic Denicola提出的import.meta

Domenic Denicola提出的import.meta提案添加一個(gè)host相關(guān)的元數(shù)據(jù)對(duì)象到當(dāng)前執(zhí)行的模塊中。

1. console.log(import.meta.url)

2. // file:///Users/pawelgrzybek/main.js

EXPORT * AS NS FROM “MOD”

這是一個(gè)添加到規(guī)范中的有用特性，可以讓開發(fā)者導(dǎo)出其他模塊命名空間下的對(duì)象到一個(gè)新的名稱下。

1. export*as ns from"mod"

參考

• WHAT’S NEW IN ECMASCRIPT 2020

• ECMAScript 2020: the final feature set

分享前端好文，點(diǎn)亮?在看?