七個即將列入規範的JavaScript提案功能，之後確定有用獲得的

時間 2019-11-06

標籤七個即將列入規範 javascript 提案功能之後確定有用獲得欄目 JavaScript 简体版

原文原文鏈接

今天看到一個文章，說node12&chrome中7個新的提案功能。javascript

若是在這裏發表了這個文章有侵權嫌疑，請告知刪除此文java

我看了下，有幾個確定用的到，甚至還有?.，玩ruby的同窗是否是以爲很熟悉(&.)。node

如下是看到的文章的原文。git

JavaScript(或ECMA script)是一種不斷髮展的語言，有許多關於如何更好發展的建議和想法。TC39(技術委員會39)是負責定義JS標準和特性的委員會，今年他們一直很活躍。如下是目前處於"第3階段"的一些提案的摘要，這是在"完成"以前的最後一個階段。這意味着這些功能應該很快就會在瀏覽器和其餘引擎中實現。事實上，其中一些如今可用。github

1. 私有字段 `#`

Chrome & NodeJS 12 中可用chrome

是的，你沒有看過。最終，JS在類中獲取私有字段。再也不須要this._doPrivateStuff()，定義閉包來存儲私有值，或者使用WeakMap來hack私有props。數據庫

語法看起來像下面這樣：promise

// 私有字段必須使用'#'開頭
// 而且不能夠在類這個塊的外面去訪問

class Counter {
  #x = 0;

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

  onClick() {
    this.#increment();
  }

}

const c = new Counter();
c.onClick(); // works fine
c.#increment(); // error
複製代碼

提案：github.com/tc39/propos…瀏覽器

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;
複製代碼

提案：github.com/tc39/propos…

3. null合併 `??`

變量的可選值可能缺失，若是丟失，則使用默認值，這樣屬於很常見的現象：

const duration = input.duration || 500;
複製代碼

||的問題是它將覆蓋全部falsy值，如(0, '', false)，在某些狀況下多是有效的輸入。

鍵入null合併運算符，他只會覆蓋undefined或null：

const duration = input.duration ?? 500;
複製代碼

提案：github.com/tc39/propos…

4. BigInt `1n`

Chrome & NodeJS 12 中可用

JS一直不擅長數學的一個緣由是咱們沒法可靠地存儲大於2 ^ 53的數，這使得處理至關大的數很是困難。幸運的是，BigInt是一個解決這個特定問題的提案。

閒話少說，show me your code：

// 能夠定義 BigInt 經過追加 'n' 到一個數字字面量
const theBiggestInt = 9007199254740991n;

// 對字面量使用構造函數
const alsoHuge = BigInt(9007199254740991);

// 或者對字符串使用
const hugeButString = BigInt('9007199254740991');
複製代碼

你還能夠在BigInt上使用與普通數字相同的運算符，例如:+，-，/，*，%，…不過有一個問題，在大多數操做中不能將BigInt與數字混合使用。比較Number和BigInt工做方式，但不能添加他們：

1n < 2 
// true

1n + 2
// 🤷‍♀️ Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
複製代碼

譯：根據上面的報錯提示，你能夠改成顯示的轉換
Number(1n) + 2
複製代碼

提案：github.com/tc39/propos…

5. `static` 字段

Chrome & NodeJS 12 中可用

這個很簡單。它容許在類上有一個靜態字段，相似於大多數OOP語言。靜態字段能夠做爲枚舉的替代，它們也能夠用於私有字段。

class Colors {
  // public static fields
  static red = '#ff0000';
  static green = '#00ff00';

  // private static fields
  static #secretColor = '#f0f0f0';

}


font.color = Colors.red;

font.color = Colors.#secretColor; // Error
複製代碼

提案：github.com/tc39/propos…

6. 頂層 `await`

chrome中可用

容許在你代碼的頂層使用await。這對於調試瀏覽器控制檯中的異步內容(如fetch)很是有用，而無需將其封裝在async函數中。

若是你須要複習異步並等待，請看我在這篇文章裏對他的解釋。

另外一個致命的用例是，它能夠在以異步方式初始化的ES模塊的頂層使用(好比創建鏈接的數據庫層)。當import這樣的「異步模塊」時，模塊系統將在執行依賴它的模塊以前等待它解析。這將使處理異步初始化比當前返回初始化promise並等待它的工做區容易得多。模塊將不知道它的依賴關係是不是異步的。

// db.mjs
export const connection = await createConnection();
複製代碼

// server.mjs
import { connection } from './db.mjs';

server.start();
複製代碼

在此示例中，在db.mjs中完成鏈接以前，不會在server.mjs中執行任何操做。

提案：github.com/tc39/propos…

7. `WeakRef`

Chrome & NodeJS 12 中可用

對象的弱引用是再也不可以使對象保持活的引用。每當咱們使用(const、let、var)建立一個變量時，只要該變量的引用仍然可訪問，垃圾收集器(GC)就永遠不會從內存中刪除該變量。這些都是強引用。可是，若是沒有對弱引用引用的對象有強引用，則GC能夠在任什麼時候候刪除它。WeakRef實例有一個deref方法，它返回被引用的原始對象，若是原始對象被垃圾回收期收集，則返回undefined。

這對於緩存廉價對象可能頗有用，由於你不想將全部對象都永遠存儲在內存中。

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();
  }
};

// this will look for the value in the cache
// and recalculate if it's missing
const fibonacciCached = (number) => {
  const cached = getValue(number);
  if (cached) return cached;
  const sum = calculateFibonacci(number);
  setValue(number, sum);
  return sum;
};
複製代碼