JavaScript(或ECMA Script)是一門不斷發(fā)展的語言，有許多關(guān)于如何前進(jìn)的建議和想法。TC39(技術(shù)委員會39)是負(fù)責(zé)定義JS標(biāo)準(zhǔn)和特性的委員會，今年他們非?；钴S。以下是目前處于“Stage 3階段”的一些提案摘要，這是“完成”之前的最后一個階段。這意味著這些特性將很快在瀏覽器和其他引擎中實現(xiàn)。事實上，其中一些現(xiàn)在就有了。
1. 私有字段#
Chrome 和 NodeJS 12 已支持
是的，你沒看錯。JS終于在類中支持私有字段了。不再有 this._doPrivateStuff()、定義閉包來存儲私有值或者使用WeakMap來間接實現(xiàn)私有屬性。
語法是這樣的：
// 私有字段必須以 '#' 開頭
// and they can't be accessed outside the class block
class Counter {
#x = 0;
#increment() {
this.#x++;
}
onClick() {
this.#increment();
}
}
const c = new Counter();
c.onClick(); // 正常
c.#increment(); // 出錯
提案： https://github.com/tc39/proposal-class-fields
2. 可選鏈?zhǔn)秸{(diào)用 ?.
以往需要訪問嵌套在對象內(nèi)部好幾層的屬性時，會得到臭名昭著的錯誤Cannot read property 'stop' of undefined。然后你就要改變代碼來處理屬性鏈中每一個可能的undefined對象，比如:
const stop = please && please.make && please.make.it && please.make.it.stop;
// 或者使用 'object-path' 這樣的庫
const stop = objectPath.get(please, "make.it.stop");
有了可選鏈?zhǔn)秸{(diào)用 ，你只要這樣寫就可以做同樣的事情:
const stop = please?.make?.it?.stop;
提案： https://github.com/tc39/proposal-optional-chaining
3. 空合并操作符 ??
變量的可選值可能沒有，如果沒有則使用默認(rèn)值。這種情況很常見：
const duration = input.duration || 500;
使用||的問題是，它會覆蓋所有的假值，如(0, '', false)，這些值可能是在某些情況下有效的輸入。
輸入空合并操作符，它只覆蓋undefined或null。
const duration = input.duration ?? 500;
提案： https://github.com/tc39/proposal-nullish-coalescing
4. BigInt 1n
Chrome 和 NodeJS 12 已支持
JS在數(shù)學(xué)方面一直很糟糕的一個原因是，我們無法可靠地存儲大于2 ^ 53的數(shù)字，這使得處理相當(dāng)大的數(shù)字非常困難。幸運(yùn)的是，BigInt是解決這個特定問題的提案。
// 可以通過附加'n'到一個數(shù)字字面量來定義BitInt
const theBiggestInt = 9007199254740991n;
// 使用構(gòu)造器
const alsoHuge = BigInt(9007199254740991);
// 或則字符串形式
const hugeButString = BigInt('9007199254740991');
你也可以在BigInt上使用與普通數(shù)字相同的運(yùn)算符，例如 +, -, /, *, %等等。不過有一個問題，在大多數(shù)操作中，不能將 BigInt與Number混合使用。比較Number和 BigInt是可以的，但是不能把它們相加。
1n < 2
// true
1n + 2
// ???♀? Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
提案： https://github.com/tc39/proposal-bigint
參考閱讀：一文搞懂JavaScript 新數(shù)據(jù)類型BigInt
5. static 字段
Chrome & NodeJS 12 已支持
這個很簡單。它允許類擁有靜態(tài)字段，類似于大多數(shù)OOP語言。靜態(tài)字段可以用來代替枚舉，也可以用于私有字段。
class Colors {
// public static 字段
static red = '#ff0000';
static green = '#00ff00';
// private static 字段
static #secretColor = '#f0f0f0';
}
font.color = Colors.red;
font.color = Colors.#secretColor; // Error
提案： https://github.com/tc39/proposal-static-class-features
6. 頂層 await
Chrome 已支持
允許您在代碼的頂層作用域使用await。這對于在瀏覽器控制臺中調(diào)試異步內(nèi)容（如 fetch）非常有用，而不需要在異步函數(shù)中包裝它。
另一個殺手級用例是，它可以在用異步方式初始化的ES模塊的頂層使用(比如建立數(shù)據(jù)庫連接)。當(dāng)這樣一個異步模塊被導(dǎo)入時，模塊系統(tǒng)將等待它解析，然后再執(zhí)行依賴它的模塊。這將使處理異步初始化比目前通過返回一個初始化promise并等待它解決來得更容易。模塊將不知道它的依賴是否異步。
// db.mjs
export const connection = await createConnection();
// server.mjs
import { connection } from './db.mjs';
server.start();
在本例中，server.mjs 中不執(zhí)行任何操作，直到在db.mjs中完成連接。
提案：https://github.com/tc39/proposal-top-level-await
參考閱讀：頂層 await 釋疑
7. WeakRef
- Chrome 和 NodeJS 12 已支持*
對象的弱引用是不足以對象處于活動狀態(tài)的引用。當(dāng)我們使用(const, let, var)創(chuàng)建一個變量時，垃圾收集器(GC)將永遠(yuǎn)不會從內(nèi)存中刪除該變量，只要它的引用仍然是可訪問的。這些都是強(qiáng)引用。然而，弱引用引用的對象如果沒有強(qiáng)引用，則GC可以在任何時候刪除它。WeakRef實例有一個方法deref，它返回引用的原始對象，如果原始對象被回收，則返回undefined 。
這對于緩存廉價對象可能很有用，因為你不想將所有對象都永遠(yuǎn)存儲在內(nèi)存中。
const cache = new Map();
const setValue = (key, obj) => {
cache.set(key, new WeakRef(obj));
};
const getValue = (key) => {
const ref = cache.get(key);
if (ref) {
return ref.deref();
}
};
const fibonacciCached = (number) => {
const cached = getValue(number);
if (cached) return cached;
const sum = calculateFibonacci(number);
setValue(number, sum);
return sum;
};
對于緩存遠(yuǎn)程數(shù)據(jù)來說，這可能不是一個好主意，因為遠(yuǎn)程數(shù)據(jù)可能會不可預(yù)測地從內(nèi)存中刪除。在這種情況下，最好使用LRU之類的緩存。
提案：https://github.com/tc39/proposal-weakrefs
以上。希望你和我一樣對使用這些很酷的新功能感到興奮。要了解更多關(guān)于這些提案和其他我沒有提到的細(xì)節(jié)，請關(guān)注github上的TC39提案
原文：7 Exciting New JavaScript Features You Need to Know
交流
歡迎關(guān)注微信公眾號“1024譯站”，同步國際最新互聯(lián)網(wǎng)技術(shù)資訊。
