ECMASCript 2019可能會有哪些特性？

時間 2019-12-31

標籤 ecmascript 可能會有哪些特性欄目 JavaScript 简体版

原文原文鏈接

譯者按： 又過了1年...javascript

原文：What's New in JavaScript for 2019
譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。java

最近這些年，ECMASCript標準發展節奏很是穩定，每一年都會發布新的特性。那麼，ECMASCript 2019可能會有哪些特性呢？node

ECMASCript語法提案的批准流程

JavaScript的標準即爲ECMAScript，其標準委員會是TC39。git

全部語法提案都須要經歷標準的批准流程，該流程包括5個階段：github

Stage 0 - Strawman（展現階段）
Stage 1 - Proposal（徵求意見階段）
Stage 2 - Draft（草案階段）
Stage 3 - Candidate（候選階段）
Stage 4 - Finished（定案階段）

只有語法特性到達Stage 4，該特性才能成爲正式的ECMAScript標準。可是，JS引擎例如V8(Chrome和Node.js)以及SpiderMonkey(Firefox)會試驗性地支持Stage 4以前的語法特性，這樣開發者能夠進行測試和反饋。web

當我寫這篇博客的時候，尚未新的Stage 4的語法提案，處於Stage 3的語法提案有好幾個。ES2019可能不會包括全部Stage 3的語法提案。事實上，有些提案已經被擱置不少年了。typescript

Class相關變化

有好幾個提案是針對Class的，包括：express

代碼示例以下：編程

class Truck extends Automobile {
  model = "Heavy Duty"; // 公有屬性
  #numberOfSeats = 5; // 私有屬性
  #isCrewCab = true;
  static #name = "Truck"; // 靜態私有屬性

  // 靜態方法
  static formattedName() {
    return `This vehicle is a ${ Truck.#name }.`;
  }

  constructor( model, seats = 2 ) {
    super();
    this.seats = seats;
  }

  // 私有方法
  #getBodyType() {
    return this.#isCrewCab ? "Crew Cab" : "Standard Cab";
  }

  bodyType() {
    return `${ this.#numberOfSeats }-passenger ${ this.model } ${ this.#getBodyType() }`;
  }

  get seats() { return this.#numberOfSeats; }
  set seats( value ) {
    if ( value >= 1 && value < 7 ) {
      this.#numberOfSeats = value;
      this.#isCrewCab = value > 3;
    }
  }
}

我的認爲，使用#來定義私有成員不是很好，學習其餘語言，使用private來定義顯然更好。小程序

String的trimStart()與trimEnd()方法

String有一個trim()方法能夠移除字符串開頭和結尾的空格，而trimStart()與trimEnd()方法則能夠分別移除開頭和結尾的空格：

const one = "      hello and let ";
const two = "us begin.        ";
console.log( one.trimStart() + two.trimEnd() ) // 打印"hello and let us begin."

有趣的是，很多瀏覽器已經支持了這2個方法。可見，瀏覽器們一直在推進ECMASCript標準的進步。

使用BigInt定義大整數

Number所能定義的最大整數爲2^53 ，對於更大數，則可使用BigInt來定義：

// 最大的Number
const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991

// 在整數後面添加n來定義BigInt
const ABiggerInteger = 9100000000000001n;

// 使用BigInt()
const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n

// 使用BigInt()
const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n

關於BigInt的更多使用示例，能夠查看BigInt: arbitrary-precision integers in JavaScript

Array的flat()與flatMap()方法

若是你學習過函數式編程，那麼你應該知道flat()和flatMap()。flat()能夠將一個包含嵌套數組的數組變換爲一維數組。

const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]];
// flat()的參數爲數組的嵌套深度
const ahhThatsBetter = nestedArraysOhMy.flat( 2 );
console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ]

flatMap()與map()相似，當回調函數返回數組時，flatMap()返回的是一維數組，而map()返回的是嵌套數組：

const scattered = [ "my favorite", "hamburger", "is a", "chicken sandwich" ];

const huh = scattered.map( chunk => chunk.split( " " ) );
console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ]

const better = scattered.flatMap( chunk => chunk.split( " " ) );
console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]

其餘ES2019候選特性

這些是當前的Stage 3候選特性：

ES2019何時發佈？

過去幾年，TC39一般在6月份發佈ECMAScript標準。所以，ES2019極可能也會在今年6月份發佈。

如何試用ES2019特性？

其實有些特性其實JS引擎已經支持了，咱們只須要配置一下就行了。

使用Node.js 11

Node.js使用V8引擎，而V8引擎已經支持了一些最新的特性，例如Array.prototype.flat和String.prototype.trimEnd，所以使用最新版的Node.js，即Node.js 11便可試用這些特性。

我使用的Node.js版本爲11.8.0：

node -v
v11.8.0

若是要啓用某個特性，可使用node命令的--harmony-{feature-flag}選項。使用--v8-options，則能夠查看node命令的全部選項，一些實驗性的特性被標記爲"in progress"。

macOS / Linux

node --v8-options | grep "in progress"
  --harmony-do-expressions (enable "harmony do-expressions" (in progress))
  --harmony-class-fields (enable "harmony fields in class literals" (in progress))
  --harmony-static-fields (enable "harmony static fields in class literals" (in progress))
  --harmony-await-optimization (enable "harmony await taking 1 tick" (in progress))
  --harmony-locale (enable "Intl.Locale" (in progress))
  --harmony-intl-list-format (enable "Intl.ListFormat" (in progress))
  --harmony-intl-relative-time-format (enable "Intl.RelativeTimeFormat" (in progress))

Windows

node --v8-options | find "in progress"

例如，當咱們的Node.js代碼index.js中的Class有靜態方法，則在執行的時候添加--harmony-static-fields選項便可：

node --harmony-class-fields --harmony-static-fields index.js

使用Babel 7.0 +

使用Babel，咱們就可使用最新的JavaScript語法了，由於它會對代碼進行轉換以兼容舊的瀏覽器。

Babel支持經過一些插件來支持實驗性的JS特性。Babel所支持的ECMAScript特性提案能夠查看babel/proposals倉庫。

參考

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！