ECMASCript 2019可能会有哪些特性?

译者按: 又过了 1 年…

本文采用意译,版权归原作者所有

最近这些年,ECMASCript 标准发展节奏非常稳定,每年都会发布新的特性。那么,ECMASCript 2019 可能会有哪些特性呢?

ECMASCript 语法提案的批准流程

JavaScript 的标准即为ECMAScript,其标准委员会是TC39

所有语法提案都需要经历标准的批准流程,该流程包括 5 个阶段:

  • 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 之前的语法特性,这样开发者可以进行测试和反馈。

当我写这篇博客的时候,还没有新的 Stage 4 的语法提案,处于 Stage 3 的语法提案有好几个。ES2019 可能不会包括所有 Stage 3 的语法提案。事实上,有些提案已经被搁置很多年了。

Class 相关变化

有好几个提案是针对 Class 的,包括:

代码示例如下:

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累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

版权声明

转载时请注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2019/01/30/what-is-new-in-javascript-for-2019/

您的用户遇到BUG了吗?

体验Demo 免费使用