摘要：舉例來(lái)說(shuō)即便某個(gè)失敗了，也不會(huì)導(dǎo)致的發(fā)生，這樣在不在乎是否有項(xiàng)目失敗，只要拿到都結(jié)束的信號(hào)的場(chǎng)景很有用。對(duì)于則稍有不同只要有子項(xiàng)，就會(huì)完成，哪怕第一個(gè)了，而第二個(gè)了，也會(huì)，而對(duì)于，這種場(chǎng)景會(huì)直接。

本周精讀的內(nèi)容是：Google I/O 19。

2019 年 Google I/O 介紹了一些激動(dòng)人心的 JS 新特性，這些特性有些已經(jīng)被主流瀏覽器實(shí)現(xiàn)，并支持 polyfill，有些還在草案階段。

我們可以看到 JS 語(yǔ)言正變得越來(lái)越嚴(yán)謹(jǐn)，不同規(guī)范間也逐漸完成了閉環(huán)，而且在不斷吸納其他語(yǔ)言的優(yōu)秀特性，比如 WeakRef，讓 JS 在成為使用范圍最廣編程語(yǔ)言的同時(shí)，也越成為編程語(yǔ)言的集大成者，讓我們有信心繼續(xù)跟隨 JS 生態(tài)，不用被新生的小語(yǔ)種分散精力。

本視頻共介紹了 16 個(gè)新特性。

私有成員修飾符，用于 Class：

class IncreasingCounter {
  #count = 0;

  get value() {
    return this.#count;
  }

  increment() {
    this.#count++;
  }
}

通過(guò) # 修飾的成員變量或成員函數(shù)就成為了私有變量，如果試圖在 Class 外部訪問(wèn)，則會(huì)拋出異常：

const counter = new IncreasingCounter()
counter.#count
// -> SyntaxError
counter.#count = 42
// -> SyntaxError

雖然 # 這個(gè)關(guān)鍵字被吐槽了很多次，但結(jié)論已經(jīng)塵埃落定了，只是個(gè)語(yǔ)法形式而已，不用太糾結(jié)。

目前僅 Chrome、Nodejs 支持。

正則匹配支持了 matchAll API，可以更方便進(jìn)行正則遞歸了：

const string = "Magic hex number: DEADBEEF CAFE"
const regex = /p{ASCII_Hex_Digit}+/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 語(yǔ)句里循環(huán)正則匹配，這個(gè) API 真的是相當(dāng)?shù)谋憷nd more，還順帶提到了 Named Capture Groups，這個(gè)在之前的 精讀《正則 ES2018》 中也有提到，具體可以點(diǎn)過(guò)去閱讀，也可以配合 matchAll 一起使用。

大數(shù)字面量的支持，比如：

1234567890123456789 * 123;
// -> 151851850485185200000

這樣計(jì)算結(jié)果是丟失精度的，但只要在數(shù)字末尾加上 n，就可以正確計(jì)算大數(shù)了：

1234567890123456789n * 123n;
// -> 151851850485185185047n

目前 BigInt 已經(jīng)被 Chrome、Firefox、Nodejs 支持。

為了方便閱讀，大數(shù)還支持了國(guó)際化，可以適配成不同國(guó)家的語(yǔ)言表達(dá)形式：

const nf = new Intl.NumberFormat("fr");
nf.format(12345678901234567890n);
// -> "12 345 678 901 234 567 890"

記住 Intl 這個(gè)內(nèi)置變量，后面還有不少國(guó)際化用途。

同時(shí)，為了方便程序員閱讀代碼，大數(shù)還支持帶下劃線的書(shū)寫(xiě)方式：

const nf = new Intl.NumberFormat("fr");
nf.format(12345678901234567890n);
// -> "12 345 678 901 234 567 890"

目前已經(jīng)被 Chrome、Firefox、Nodejs 支持。

等價(jià)于 lodash flatten 功能：

const array = [1, [2, [3]]];
array.flat();
// -> [1, 2, [3]]

還支持自定義深度，如果支持 Infinity 無(wú)限層級(jí)：

const array = [1, [2, [3]]];
array.flat(Infinity);
// -> [1, 2, 3]

這樣我們就可以配合 .map 使用：

[2, 3, 4].map(duplicate).flat();

因?yàn)檫@個(gè)用法太常見(jiàn)，js 內(nèi)置了 flatMap 函數(shù)代替 map，與上面的效果是等價(jià)的：

[2, 3, 4].flatMap(duplicate);

目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。

fromEntries 是 Object.fromEntries 的語(yǔ)法，用來(lái)將對(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)行加工處理，并通過(guò) 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 支持。

fromEntries 建立了 object 與 map 之間的橋梁，我們還可以將 Map 快速轉(zhuǎn)化為 object：

const objectCopy = Object.fromEntries(map);

目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。

業(yè)務(wù)代碼一般不需要訪問(wèn)全局的 window 變量，但是框架與庫(kù)一般需要，比如 polyfill。

訪問(wèn)全局的 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 支持。

就是穩(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)在通過(guò) Stable sort 規(guī)范，可以確保這個(gè)排序結(jié)果是穩(wěn)定的。

目前已經(jīng)被 Chrome、Firefox、Safari、Nodejs 支持。

Intl.RelativeTimeFormat 可以對(duì)時(shí)間進(jìn)行語(yǔ)義化翻譯：

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"

不同語(yǔ)言體系下，format 會(huì)返回不同的結(jié)果，通過(guò)控制 RelativeTimeFormat 的第一個(gè)參數(shù) en 決定，比如可以切換為 ta-in。

ListFormat 以列表的形式格式化數(shù)組：

const lfEnglish = new Intl.ListFormat("en");
lfEnglish.format(["Ada", "Grace"]);
// -> "Ada and Grace"

可以通過(guò)第二個(gè)參數(shù)指定連接類型：

const lfEnglish = new Intl.ListFormat("en", { type: "disjunction" });
lfEnglish.format(["Ada", "Grace"]);
// -> "Ada or Grace"

目前已經(jīng)被 Chrome、Nodejs 支持。

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"

最后一句，也可以通過(guò) formatRange 函數(shù)代替：

const output = fmt.formatRange(start, end);
// -> "May 7 - 9, 2019"

目前已經(jīng)被 Chrome 支持。

定義國(guó)際化本地化的相關(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 支持。

支持在根節(jié)點(diǎn)生效 await，比如：

const result = await doSomethingAsync();
doSomethingElse();

目前還沒(méi)有支持。

Promise.allSettled 類似 Promise.all、Promise.any 類似 Promise.race，區(qū)別是，在 Promise reject 時(shí)，allSettled 不會(huì) reject，而是也當(dāng)作 fulfilled 的信號(hào)。

舉例來(lái)說(shuō)：

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 是從 OC 抄過(guò)來(lái)的弱引用概念。

為了解決這個(gè)問(wèn)題：當(dāng)對(duì)象被引用后，由于引用的存在，導(dǎo)致對(duì)象無(wú)法被 GC。

所以如果建立了弱引用，那么對(duì)象就不會(huì)因?yàn)榇嬖诘倪@段引用關(guān)系而影響 GC 了！

具體用法是：

const obj = {};
const weakObj = new WeakRef(obj);

使用 weakObj 與 obj 沒(méi)有任何區(qū)別，唯一不同時(shí)，obj 可能隨時(shí)被 GC，而一旦被 GC，弱引用拿到的對(duì)象可能就變成 undefined，所以要做好錯(cuò)誤保護(hù)。

JS 這幾個(gè)特性提升了 JS 語(yǔ)言的成熟性、完整性，而且看到其訪問(wèn)控制能力、規(guī)范性、國(guó)際化等能力有著重加強(qiáng)，解決的都是 JS 最普遍遇到的痛點(diǎn)問(wè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)