1. 程式人生 > >七種武器:JavaScript 新特性閃亮登場

七種武器:JavaScript 新特性閃亮登場

JavaScript(或ECMA Script) 是一門不斷髮展的語言,有許多關於如何前進的建議和想法。TC39(技術委員會39)是負責定義JS標準和特性的委員會,今年他們非常活躍。以下是目前處於“Stage 3階段”的一些提案摘要,這是“完成”之前的最後一個階段。這意味著這些特性將很快在瀏覽器和其他引擎中實現。事實上,其中一些現在就有了。

1. 私有欄位#

Chrome 和 NodeJS 12 已支援

是的,你沒看錯。JS終於在類中支援私有欄位了。不再有 this._doPrivateStuff()、定義閉包來儲存私有值或者使用WeakMap來間接實現私有屬性。

語法是這樣的:

// 私有欄位必須以 '#' 開頭
// 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. 可選鏈式呼叫 ?.

以往需要訪問巢狀在物件內部好幾層的屬性時,會得到臭名昭著的錯誤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");

有了可選鏈式呼叫 ,你只要這樣寫就可以做同樣的事情:

const stop = please?.make?.it?.stop;

提案: https://github.com/tc39/proposal-optional-chaining

3. 空合併操作符 ??

變數的可選值可能沒有,如果沒有則使用預設值。這種情況很常見:

const duration = input.duration || 500;

使用||的問題是,它會覆蓋所有的假值,如(0''false),這些值可能是在某些情況下有效的輸入。

輸入空合併操作符,它只覆蓋undefinednull

const duration = input.duration ?? 500;

提案: https://github.com/tc39/proposal-nullish-coalescing

4. BigInt 1n

Chrome 和 NodeJS 12 已支援

JS在數學方面一直很糟糕的一個原因是,我們無法可靠地儲存大於2 ^ 53的數字,這使得處理相當大的數字非常困難。幸運的是,BigInt是解決這個特定問題的提案。

// 可以通過附加'n'到一個數字字面量來定義BitInt
const theBiggestInt = 9007199254740991n;

// 使用構造器
const alsoHuge = BigInt(9007199254740991);

// 或則字串形式
const hugeButString = BigInt('9007199254740991');

你也可以在BigInt上使用與普通數字相同的運算子,例如 +-/*%等等。不過有一個問題,在大多數操作中,不能將 BigIntNumber混合使用。比較Number和 BigInt是可以的,但是不能把它們相加。

1n < 2 
// true

1n + 2
//