1. 引言
本周精讀的內(nèi)容是：Google I/O 19。
2019 年 Google I/O 介紹了一些激動(dòng)人心的 JS 新特性，這些特性有些已經(jīng)被主流瀏覽器實(shí)現(xiàn)，并支持 polyfill，有些還在草案階段。
我們可以看到 JS 語言正變得越來越嚴(yán)謹(jǐn)，不同規(guī)范間也逐漸完成了閉環(huán)，而且在不斷吸納其他語言的優(yōu)秀特性，比如 WeakRef，讓 JS 在成為使用范圍最廣編程語言的同時(shí)，也越成為編程語言的集大成者，讓我們有信心繼續(xù)跟隨 JS 生態(tài)，不用被新生的小語種分散精力。
2. 精讀
本視頻共介紹了 16 個(gè)新特性。
private class fields
私有成員修飾符，用于 Class：
class IncreasingCounter {
#count = 0;
get value() {
return this.#count;
}
increment() {
this.#count++;
}
}
通過 # 修飾的成員變量或成員函數(shù)就成為了私有變量，如果試圖在 Class 外部訪問，則會(huì)拋出異常：
const counter = new IncreasingCounter()
counter.#count
// -> SyntaxError
counter.#count = 42
// -> SyntaxError
雖然 # 這個(gè)關(guān)鍵字被吐槽了很多次，但結(jié)論已經(jīng)塵埃落定了，只是個(gè)語法形式而已，不用太糾結(jié)。
目前僅 Chrome、Nodejs 支持。
Regex matchAll
正則匹配支持了 matchAll API，可以更方便進(jìn)行正則遞歸了：
const string = 'Magic hex number: DEADBEEF CAFE'
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu/
for (const match of string.matchAll(regex)) {
console.log(match)
}
// Output:
// ['DEADBEEF', index: 19, input: 'Magic hex number: DEADBEEF CAFE']
// ['CAFE', index: 28, input: 'Magic hex number: DEADBEEF CAFE']
相比以前在 while 語句里循環(huán)正則匹配，這個(gè) API 真的是相當(dāng)?shù)谋憷?。And more，還順帶提到了 Named Capture Groups，這個(gè)在之前的 精讀《正則 ES2018》 中也有提到，具體可以點(diǎn)過去閱讀，也可以配合 matchAll 一起使用。
Numeric literals
大數(shù)字面量的支持，比如：
1234567890123456789 * 123;
// -> 151851850485185200000
這樣計(jì)算結(jié)果是丟失精度的，但只要在數(shù)字末尾加上 n，就可以正確計(jì)算大數(shù)了：
1234567890123456789n * 123n;
// -> 151851850485185185047n
目前 BigInt 已經(jīng)被 Chrome、Firefox、Nodejs 支持。
BigInt formatting
為了方便閱讀，大數(shù)還支持了國際化，可以適配成不同國家的語言表達(dá)形式：
const nf = new Intl.NumberFormat("fr");
nf.format(12345678901234567890n);
// -> '12 345 678 901 234 567 890'
記住 Intl 這個(gè)內(nèi)置變量，后面還有不少國際化用途。
同時(shí)，為了方便程序員閱讀代碼，大數(shù)還支持帶下劃線的書寫方式：
const nf = new Intl.NumberFormat("fr");
nf.format(12345678901234567890n);
// -> '12 345 678 901 234 567 890'
目前已經(jīng)被 Chrome、Firefox、Nodejs 支持。
flat & flatmap
等價(jià)于 lodash flatten 功能：
const array = [1, [2, [3]]];
array.flat();
// -> [1, 2, [3]]
還支持自定義深度，如果支持 Infinity 無限層級(jí)：
const array = [1, [2, [3]]];
array.flat(Infinity);
// -> [1, 2, 3]
這樣我們就可以配合 .map 使用：
[2, 3, 4].map(duplicate).flat();
因?yàn)檫@個(gè)用法太常見，js 內(nèi)置了 flatMap 函數(shù)代替 map，與上面的效果是等價(jià)的：
[2, 3, 4].flatMap(duplicate);
目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。
fromEntries
fromEntries 是 Object.fromEntries 的語法，用來將對(duì)象轉(zhuǎn)化為數(shù)組的描述：
const object = { x: 42, y: 50, abc: 9001 };
const entries = Object.entries(object);
// -> [['x', 42], ['y', 50]]
這樣就可以對(duì)對(duì)象的 key 與 value 進(jìn)行加工處理，并通過 fromEntries API 重新轉(zhuǎn)回對(duì)象：
const object = { x: 42, y: 50, abc: 9001 }
const result Object.fromEntries(
Object.entries(object)
.filter(([ key, value]) => key.length === 1)
.map(([ key, value ]) => [ key, value * 2])
)
// -> { x: 84, y: 100 }
不僅如此，還可以將 object 快速轉(zhuǎn)化為 Map:
const map = new Map(Object.entries(object));
目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。
Map to Object conversion
fromEntries 建立了 object 與 map 之間的橋梁，我們還可以將 Map 快速轉(zhuǎn)化為 object：
const objectCopy = Object.fromEntries(map);
目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。
globalThis
業(yè)務(wù)代碼一般不需要訪問全局的 window 變量，但是框架與庫一般需要，比如 polyfill。
訪問全局的 this 一般會(huì)做四個(gè)兼容，因?yàn)?js 在不同運(yùn)行環(huán)境下，全局 this 的變量名都不一樣：
const getGlobalThis = () => {
if (typeof self !== "undefined") return self; // web worker 環(huán)境
if (typeof window !== "undefined") return window; // web 環(huán)境
if (typeof global !== "undefined") return global; // node 環(huán)境
if (typeof this !== "undefined") return this; // 獨(dú)立 js shells 腳本環(huán)境
throw new Error("Unable to locate global object");
};
因此整治一下規(guī)范也合情合理：
globalThis; // 在任何環(huán)境，它就是全局的 this
目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。
Stable sort
就是穩(wěn)定排序結(jié)果的功能，比如下面的數(shù)組：
const doggos = [
{ name: "Abby", rating: 12 },
{ name: "Bandit", rating: 13 },
{ name: "Choco", rating: 14 },
{ name: "Daisy", rating: 12 },
{ name: "Elmo", rating: 12 },
{ name: "Falco", rating: 13 },
{ name: "Ghost", rating: 14 }
];
doggos.sort((a, b) => b.rating - a.rating);
最終排序結(jié)果可能如下：
[
{ name: "Choco", rating: 14 },
{ name: "Ghost", rating: 14 },
{ name: "Bandit", rating: 13 },
{ name: "Falco", rating: 13 },
{ name: "Abby", rating: 12 },
{ name: "Daisy", rating: 12 },
{ name: "Elmo", rating: 12 }
];
也可能如下：
[
{ name: "Ghost", rating: 14 },
{ name: "Choco", rating: 14 },
{ name: "Bandit", rating: 13 },
{ name: "Falco", rating: 13 },
{ name: "Abby", rating: 12 },
{ name: "Daisy", rating: 12 },
{ name: "Elmo", rating: 12 }
];
注意 choco 與 Ghost 的位置可能會(huì)顛倒，這是因?yàn)?JS 引擎可能只關(guān)注 sort 函數(shù)的排序，而在順序相同時(shí)，不會(huì)保持原有的排序規(guī)則。現(xiàn)在通過 Stable sort 規(guī)范，可以確保這個(gè)排序結(jié)果是穩(wěn)定的。
目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。
Intl.RelativeTimeFormat
Intl.RelativeTimeFormat 可以對(duì)時(shí)間進(jìn)行語義化翻譯：
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
rtf.format(-1, "day");
// -> 'yesterday'
rtf.format(0, "day");
// -> 'today'
rtf.format(1, "day");
// -> 'tomorrow'
rtf.format(-1, "week");
// -> 'last week'
rtf.format(0, "week");
// -> 'this week'
rtf.format(1, "week");
// -> 'next week'
不同語言體系下，format 會(huì)返回不同的結(jié)果，通過控制 RelativeTimeFormat 的第一個(gè)參數(shù) en 決定，比如可以切換為 ta-in。
Intl.ListFormat
ListFormat 以列表的形式格式化數(shù)組：
const lfEnglish = new Intl.ListFormat("en");
lfEnglish.format(["Ada", "Grace"]);
// -> 'Ada and Grace'
可以通過第二個(gè)參數(shù)指定連接類型：
const lfEnglish = new Intl.ListFormat("en", { type: "disjunction" });
lfEnglish.format(["Ada", "Grace"]);
// -> 'Ada or Grace'
目前已經(jīng)被 Chrome、Nodejs 支持。
Intl.DateTimeFormat -> formatRange
DateTimeFormat 可以定制日期格式化輸出：
const start = new Date(startTimestamp);
// -> 'May 7, 2019'
const end = new Date(endTimestamp);
// -> 'May 9, 2019'
const fmt = new Intl.DateTimeFormat("en", {
year: "numeric",
month: "long",
day: "numeric"
});
const output = `${fmt.format(start)} - ${fmt.format(end)}`;
// -> 'May 7, 2019 - May 9, 2019'
最后一句，也可以通過 formatRange 函數(shù)代替：
const output = fmt.formatRange(start, end);
// -> 'May 7 - 9, 2019'
目前已經(jīng)被 Chrome 支持。
Intl.Locale
定義國際化本地化的相關(guān)信息：
const locale = new Intl.Locale("es-419-u-hc-h12", {
calendar: "gregory"
});
locale.language;
// -> 'es'
locale.calendar;
// -> 'gregory'
locale.hourCycle;
// -> 'h12'
locale.region;
// -> '419'
locale.toString();
// -> 'es-419-u-ca-gregory-hc-h12'
目前已經(jīng)被 Chrome、Nodejs 支持。
Top-Level await
支持在根節(jié)點(diǎn)生效 await，比如：
const result = await doSomethingAsync();
doSomethingElse();
目前還沒有支持。
Promise.allSettled/Promise.any
Promise.allSettled 類似 Promise.all、Promise.any 類似 Promise.race，區(qū)別是，在 Promise reject 時(shí)，allSettled 不會(huì) reject，而是也當(dāng)作 fulfilled 的信號(hào)。
舉例來說：
const promises = [
fetch("/api-call-1"),
fetch("/api-call-2"),
fetch("/api-call-3")
];
await Promise.allSettled(promises);
即便某個(gè) fetch 失敗了，也不會(huì)導(dǎo)致 reject 的發(fā)生，這樣在不在乎是否有項(xiàng)目失敗，只要拿到都結(jié)束的信號(hào)的場(chǎng)景很有用。
對(duì)于 Promise.any 則稍有不同：
const promises = [
fetch("/api-call-1"),
fetch("/api-call-2"),
fetch("/api-call-3")
];
try {
const first = await Promise.any(promises);
// Any of ths promises was fulfilled.
console.log(first);
} catch (error) {
// All of the promises were rejected.
}
只要有子項(xiàng) fulfilled，就會(huì)完成 Promise.any，哪怕第一個(gè) Promise reject 了，而第二個(gè) Promise fulfilled 了，Promise.any 也會(huì) fulfilled，而對(duì)于 Promise.race，這種場(chǎng)景會(huì)直接 rejected。
如果所有子項(xiàng)都 rejected，那 Promise.any 也只好 rejected 啦。
目前已經(jīng)被 Chrome、Firefox 支持。
WeakRef
WeakRef 是從 OC 抄過來的弱引用概念。
為了解決這個(gè)問題：當(dāng)對(duì)象被引用后，由于引用的存在，導(dǎo)致對(duì)象無法被 GC。
所以如果建立了弱引用，那么對(duì)象就不會(huì)因?yàn)榇嬖诘倪@段引用關(guān)系而影響 GC 了！
具體用法是：
const obj = {};
const weakObj = new WeakRef(obj);
使用 weakObj 與 obj 沒有任何區(qū)別，唯一不同時(shí)，obj 可能隨時(shí)被 GC，而一旦被 GC，弱引用拿到的對(duì)象可能就變成 undefined，所以要做好錯(cuò)誤保護(hù)。
3. 總結(jié)
JS 這幾個(gè)特性提升了 JS 語言的成熟性、完整性，而且看到其訪問控制能力、規(guī)范性、國際化等能力有著重加強(qiáng)，解決的都是 JS 最普遍遇到的痛點(diǎn)問題。
那么，這些 JS 特性中，你最喜歡哪一條呢？想吐槽哪一條呢？歡迎留言。
討論地址是：精讀《What's new in javascript》 · Issue #159 · dt-fe/weekly
如果你想?yún)⑴c討論，請(qǐng) 點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。
關(guān)注 前端精讀微信公眾號(hào)
<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
special Sponsors
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享 3.0 許可證）
