譯者按： 又過(guò)了1年...

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

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

最近這些年，ECMASCript標(biāo)準(zhǔn)發(fā)展節(jié)奏非常穩(wěn)定，每年都會(huì)發(fā)布新的特性。那么，ECMASCript 2019可能會(huì)有哪些特性呢？

ECMASCript語(yǔ)法提案的批準(zhǔn)流程

JavaScript的標(biāo)準(zhǔn)即為ECMAScript，其標(biāo)準(zhǔn)委員會(huì)是TC39。

所有語(yǔ)法提案都需要經(jīng)歷標(biāo)準(zhǔn)的批準(zhǔn)流程，該流程包括5個(gè)階段：

• Stage 0 - Strawman（展示階段）
• Stage 1 - Proposal（征求意見(jiàn)階段）
• Stage 2 - Draft（草案階段）
• Stage 3 - Candidate（候選階段）
• Stage 4 - Finished（定案階段）

只有語(yǔ)法特性到達(dá)Stage 4，該特性才能成為正式的ECMAScript標(biāo)準(zhǔn)。但是，JS引擎例如V8(Chrome和Node.js)以及SpiderMonkey(Firefox)會(huì)試驗(yàn)性地支持Stage 4之前的語(yǔ)法特性，這樣開(kāi)發(fā)者可以進(jìn)行測(cè)試和反饋。

當(dāng)我寫(xiě)這篇博客的時(shí)候，還沒(méi)有新的Stage 4的語(yǔ)法提案，處于Stage 3的語(yǔ)法提案有好幾個(gè)。ES2019可能不會(huì)包括所有Stage 3的語(yǔ)法提案。事實(shí)上，有些提案已經(jīng)被擱置很多年了。

Class相關(guān)變化

有好幾個(gè)提案是針對(duì)Class的，包括：

• 屬性定義
• 私有方法及屬性
• 靜態(tài)方法及屬性

代碼示例如下：

class Truck extends Automobile {model = "Heavy Duty"; // 公有屬性#numberOfSeats = 5; // 私有屬性#isCrewCab = true;static #name = "Truck"; // 靜態(tài)私有屬性// 靜態(tài)方法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;}} } 復(fù)制代碼

個(gè)人認(rèn)為，使用#來(lái)定義私有成員不是很好，學(xué)習(xí)其他語(yǔ)言，使用private來(lái)定義顯然更好。

String的trimStart()與trimEnd()方法

String有一個(gè)trim()方法可以移除字符串開(kāi)頭和結(jié)尾的空格，而trimStart()與trimEnd()方法則可以分別移除開(kāi)頭和結(jié)尾的空格：

const one = " hello and let "; const two = "us begin. "; console.log( one.trimStart() + two.trimEnd() ) // 打印"hello and let us begin." 復(fù)制代碼

有趣的是，不少瀏覽器已經(jīng)支持了這2個(gè)方法。可見(jiàn)，瀏覽器們一直在推動(dòng)ECMASCript標(biāo)準(zhǔn)的進(jìn)步。

使用BigInt定義大整數(shù)

Number所能定義的最大整數(shù)為2^53 ，對(duì)于更大數(shù)，則可以使用BigInt來(lái)定義：

// 最大的Number const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991// 在整數(shù)后面添加n來(lái)定義BigInt const ABiggerInteger = 9100000000000001n;// 使用BigInt() const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n// 使用BigInt() const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n 復(fù)制代碼

關(guān)于BigInt的更多使用示例，可以查看BigInt: arbitrary-precision integers in JavaScript

Array的flat()與flatMap()方法

如果你學(xué)習(xí)過(guò)函數(shù)式編程，那么你應(yīng)該知道flat()和flatMap()。flat()可以將一個(gè)包含嵌套數(shù)組的數(shù)組變換為一維數(shù)組。

const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]]; // flat()的參數(shù)為數(shù)組的嵌套深度 const ahhThatsBetter = nestedArraysOhMy.flat( 2 ); console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ] 復(fù)制代碼

flatMap()與map()類(lèi)似，當(dāng)回調(diào)函數(shù)返回?cái)?shù)組時(shí)，flatMap()返回的是一維數(shù)組，而map()返回的是嵌套數(shù)組：

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" ] 復(fù)制代碼

其他ES2019候選特性

這些是當(dāng)前的Stage 3候選特性：

• globalThis
• 動(dòng)態(tài)import()
• 遺留的RegExp特性 features
• import.meta
• String的matchAll()方法
• Object.fromEntries()
• 規(guī)范JSON.stringify
• 標(biāo)準(zhǔn)化命令行程序的Hashbang

ES2019什么時(shí)候發(fā)布？

過(guò)去幾年，TC39通常在6月份發(fā)布ECMAScript標(biāo)準(zhǔn)。因此，ES2019很可能也會(huì)在今年6月份發(fā)布。

如何試用ES2019特性？

其實(shí)有些特性其實(shí)JS引擎已經(jīng)支持了，我們只需要配置一下就好了。

使用Node.js 11

Node.js使用V8引擎，而V8引擎已經(jīng)支持了一些最新的特性，例如Array.prototype.flat和String.prototype.trimEnd，因此使用最新版的Node.js，即Node.js 11即可試用這些特性。

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

node -v v11.8.0 復(fù)制代碼

如果要啟用某個(gè)特性，可以使用node命令的--harmony-{feature-flag}選項(xiàng)。使用--v8-options，則可以查看node命令的所有選項(xiàng)，一些實(shí)驗(yàn)性的特性被標(biāo)記為"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)) 復(fù)制代碼

Windows

node --v8-options | find "in progress" 復(fù)制代碼

例如，當(dāng)我們的Node.js代碼index.js中的Class有靜態(tài)方法，則在執(zhí)行的時(shí)候添加--harmony-static-fields選項(xiàng)即可：

node --harmony-class-fields --harmony-static-fields index.js 復(fù)制代碼

使用Babel 7.0 +

使用Babel，我們就可以使用最新的JavaScript語(yǔ)法了，因?yàn)樗鼤?huì)對(duì)代碼進(jìn)行轉(zhuǎn)換以兼容舊的瀏覽器。

Babel支持通過(guò)一些插件來(lái)支持實(shí)驗(yàn)性的JS特性。Babel所支持的ECMAScript特性提案可以查看babel/proposals倉(cāng)庫(kù)。

參考

• Learn JavaScript in 2019!
• The History (and Future) of Asynchronous JavaScript
• Build a Secure Node.js Application with JavaScript Async Await Using Hapi
• Use TypeScript to Build a Node API with Express
• Standard ECMA-262

關(guān)于Fundebug

Fundebug專(zhuān)注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，Fundebug累計(jì)處理了9億+錯(cuò)誤事件，付費(fèi)客戶(hù)有Google、360、金山軟件、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
blog.fundebug.com/2019/01/30/…

總結(jié)

以上是生活随笔為你收集整理的ECMASCript 2019可能会有哪些特性？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。