在过去的几年里, JavaScript 伴随着一些新的语言特征保持着稳步发展。 如果你对下一个版本的JavaScript将要发生什么很好奇,这篇文章将非常适合你!

原文作者:JavaScript 2019 有哪些新特性 - 图1 David Neal 原文:https://developer.okta.com/blog/2019/01/22/whats-new-in-es2019 译者:彭思凡

JavaScript 2019 有哪些新特性 - 图2
在我们讨论最新特征之前,理解一些新的观念是如何成为JavaScript语言的一部分也很重要。

全新的JavaScript语言特性的发展过程

简单的说,驱动JavaScript这门语言规范的叫做ECMAScript
Ecma国际团队组织检阅并采用这门语言规范变动的Ecma国际小组是第39届技术委员会(简称TC39)。
ECMAScript规范的变动经历了一个标准化过程,包括几个发展阶段。

  • 阶段 0: 理念
  • 阶段 1: 正式提案
  • 阶段 2: 草案
  • 阶段 3: 等待审核
  • 阶段 4: 批准

在一门语言的特性达到第4个阶段之前,我们都无法保证它将会成为正式的ECMAScript语言规范的一部分。然而,JavaScript引擎的实现,如 V8 (被谷歌和Node.js使用)和火狐的 SpiderMonkey,可能会在达到第4阶段之前增加实验性的支持这些被提议的特性,所以开发者们可以尝试以及意见反馈。

目前ES2019的待审批特性

在编写这篇文章时, 还没有第4阶段的TC39新提议。但这里有一些阶段3的候选特性。

免责声明:因为这些是阶段3的候选特性,ES2019这门语言的最终规范可能不会采纳所有的这些提议。事实上,这其中的一些提议已经被考虑了许多年。而且,最终的实现可能看起来或表现上会和当前的提议有区别。

JavaScript类的变化

还有许多关于改变类的提议,包括字段声明私有方法和作用域,还有静态方法和作用域。这里有一个例子来展示这些变化。

  1. class Truck extends Automobile {
  2. model = "Heavy Duty"; // public field declaration
  3. #numberOfSeats = 5; // private field declaration
  4. #isCrewCab = true;
  5. static #name = "Truck"; // static private field declaration
  6. // static method
  7. static formattedName() {
  8. // Notice that the Truck class name is used
  9. // to access the static field instead of "this"
  10. return `This vehicle is a ${ Truck.#name }.`;
  11. }
  12. constructor( model, seats = 2 ) {
  13. super();
  14. this.seats = seats;
  15. }
  16. // Private method
  17. #getBodyType() {
  18. return this.#isCrewCab ? "Crew Cab" : "Standard Cab";
  19. }
  20. bodyType() {
  21. return `${ this.#numberOfSeats }-passenger ${ this.model } ${ this.#getBodyType() }`;
  22. }
  23. get seats() { return this.#numberOfSeats; }
  24. set seats( value ) {
  25. if ( value >= 1 && value < 7 ) {
  26. this.#numberOfSeats = value;
  27. this.#isCrewCab = value > 3;
  28. }
  29. }
  30. }

个人而言,我不喜欢通过传递 # 语法来查找私有成员。我更希望看到的是新的JavaScript语言规范通过 private 关键字来达到这个目的,这与其他语言是一致的。

字符串 trimStart()trimEnd()

String 类型有一个 trim() 方法用于删除开始和字符串结束之间的所有空格。提议的 trimStart()trimEnd() 方法将允许对删除的空白做额外的控制。

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

有趣的是关于这门语言的新特性早已经被一些JavaScript引擎实施。这是浏览器现在帮助推动这门语言向前发展的众多原因之一。

更大的数值 BigInt

我们可能简单的认为一个 BigInt 是用来表示比当前最大值2更大的数值。
一个 BigInt 可以用几种不同的方式声明。

  1. // for reference
  2. const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991
  3. // use the 'n' syntax to declare a BigInt
  4. const ABiggerInteger = 9100000000000001n;
  5. // use the BigInt() constructor
  6. const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n
  7. // use the BigInt() constructor with a string
  8. const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n

阅读更多 BigInt相关用例和陷阱。

使用 flat()flatMap() 展开数组

如果你学习过函数方编程, 你可能会知道 flat()flatMap(). flat() 的设计是用于获取一组数组的值,
这其中的一些值可能是更多的数组,最后再返回一个新的一维数组。

  1. const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]];
  2. // .flat() takes an optional depth argument
  3. const ahhThatsBetter = nestedArraysOhMy.flat( 2 );
  4. console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ]

flatMap()map()类似, 但是它的回调可以返回一个数组,而且最终的结果可能会被平铺到一个一维数组中而不是一个嵌套的数组。

  1. const scattered = [ "my favorite", "hamburger", "is a", "chicken sandwich" ];
  2. // regular map() results in nested arrays
  3. const huh = scattered.map( chunk => chunk.split( " " ) );
  4. console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ]
  5. // flatMap() concatenates the returned arrays together
  6. const better = scattered.flatMap( chunk => chunk.split( " " ) );
  7. console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]

更多的ES2019提议待审核

当我写这篇文章时,这里额外还有一些阶段3的候选提议在下面这个清单里。

在过去的几年里,TC39都在六月一致发布ECMA-262 ECMAScript语言规范新的版本。在今年六月我们很有可能看到ES2019的规范发布。

今天就试用 ES2019 特性

一些被提议的语言特性在JavaScript引擎和程序中已经可以使用。这些新特性有时候默认不能使用,但是允许进行配置。

用最新版Node.js进行测试

Node.js 使用谷歌V8 JavaScript引擎。一些候选语言特性可以被使用在最新版本的Node.js,因为V8早已经支持它们(例如. Array.prototype.flatString.prototype.trimEnd)。你可以在命令行选项中使用 --harmony-{feature-flag} 来启动其他语言特性。为了知道你使用的Node.js版本支持哪些标记,你可以使用 --v8-options 选项来得到一份清单。一些候选特性标记为“in progress.”

macOS / Linux

  1. node --v8-options | grep "in progress"

Windows

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

例如,你可以使用下面的命令行选项来运行一个包含字段声明和静态方法的类的Node.js应用。

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

用 Babel 7.0+ 测试

Babel 是一个 JavaScript 实用程序允许你使用那些可能还未得到所有浏览器和环境支持的最新语言特性。比如你编写“现代的” JavaScript,Babel会将你的代码转换为等效语法来兼容老的浏览器。

Babel 通过使用 插件 还支持持实验性的语言特性。Babel 会在他们的官方仓库中提供一份 支持 ECMAScript 提议 的清单。

更进一步地了解JavaScript 和 ES

你想了解更多关于JavaScript的事情嘛?这里有一些有用的资源可以查看。

如果你感兴趣,你也可以阅读ECMAScrip 之前的版本,比如ES2015, ES2016 和 ES2017。
关注我们可以获得更多我们团队实时更新的优质内容!你可以在 TwitterFacebookLinkedIn 联系我们。有疑问?请在评论区给我们留言。