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 語(yǔ)言中的特性集。ES2020 候選提案是今年六月提交 ECMA 大會(huì)（General Assembly）的審批匯總。

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

正文從這開(kāi)始～～

Jordan Harband提出的String.prototype.matchAll

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

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。使用場(chǎng)景比如: 按需導(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ǔ)類型。你可以通過(guò)使用BigInt方法或者在一個(gè)數(shù)字后添加n后綴來(lái)把一個(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以來(lái)，JavaScript僅支持兩種promise組合: Promise.all()和Promise.race()。感謝Jason Williams, Robert Pamely and Mathias Bynens，現(xiàn)在我們可以使用Promise.allSettled()。用這個(gè)方法來(lái)處理所有promise都解決時(shí)的場(chǎng)景（不管成功或失?。？纯聪旅娴睦樱](méi)有使用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)在變得簡(jiǎ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è)新的短路原則操作符來(lái)處理默認(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ī)范中的有用特性，可以讓開(kāi)發(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)亮?在看?