『译』ES2019 简明指南

Avatarcoderfee/Jun 18, 2019/#JavaScript#

ESNext 经常用来表示下一个 JavaScript 版本的名称。

目前 ECMAScript 的版本是发布于 2018 年 6 月份的 ES2018

历史上 JavaScript 版本的标准化是在夏季,所以我们可以期待一下即将在 2019 年夏天发布的 ECMAScript 2019

本文写作时,ES2018 已经发布,而 ESNext 就是 ES2019

针对 ECMAScript 标准的提案被组织为 Stages,Stages 1-3 是新功能的孵化器,一旦该功能到达 Stage 4,那么它最终就会被纳入到新标准。

本文写作时,我们有一些位于 Stage 4 的新功能。我在本文中将介绍这些功能。主流浏览器的最新版本已经实现了这些功能中的绝大部分。

  • Array.prototype.{flat, flatMap}
  • 可选 catch 绑定
  • Object.fromEntries()
  • String.prototype.{trimStart, trimEnd}
  • Symbol.prototype.description
  • JSON 改进
  • 更好的 JSON.stringify()
  • Function.prototype.toString()

其中一些变化主要用于内部使用,但是弄清楚发生了什么变化对我们也非常有帮助。

Array.prototype.{flat, flatMap}

flat() 是一个新的数组方法,它可以从一个多维数组创建一个一维数组。

例子:

['Dog', ['Sheep', 'Wolf']].flat();
// ['Dog', 'Sheep', 'Wolf']

默认情况下,该方法只会扁平化第一层级的数组。但是它也接受一个参数,来设置你想要扁平化数组的层级。如果参数为 Infinity,则会扁平化所有层级。

['Dog', ['Sheep', ['Wolf']]].flat();
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]
['Dog', ['Sheep', ['Wolf']]].flat(2);
//[ 'Dog', 'Sheep', 'Wolf' ]
['Dog', ['Sheep', ['Wolf']]].flat(Infinity);
//[ 'Dog', 'Sheep', 'Wolf' ]

如果你对 JavaScript 数组的 map() 方法比较熟悉,正如你所知道的,它可以在数组的每个元素上执行一个函数。

flatMap() 是一个数组的新方法,它结合了 flat()map()。当你想在 map() 回调返回的数组上调用一个函数,并且返回一个扁平化的数组时,它非常有用:

['My dog', 'is awesome'].map(words => words.split(' '));
// [['My', 'Dog'], ['is', 'awesome']]
['My dog', 'is awesome'].flatMap(words => words.split(' '));
// ['My', 'Dog', 'is', 'awesome']

可选 catch 绑定

某些情况下我们不需要为 try/catch 的 catch 块绑定一个参数。

过去我们必须这样写:

try {
//...
} catch (e) {
//处理错误
}

如果我们没有必要用 e 来分析错误,现在则可以直接省略它:

try {
//...
} catch {
//处理错误
}

Object.fromEntries()

JavaScript 对象在 ES2017 中引入了 entries() 方法。

entries() 方法会返回一个包含它自身所有属性的数组,像 [key, value] 这样的数组。

const person = { name: 'Fred', age: 87 };
Object.entries(person);
// [['name', 'Fred'], ['age', '87']]

ES2019 引入了 Object.fromEntries() 方法,它可以从类似上面的属性数组中创建一个新对象:

const person = { name: 'Fred', age: 87 };
const entries = Object.entries(person);
const newPerson = Object.fromEntries(entries);
person !== newPerson; // true

String.prototype.{trimStart, trimEnd}

这个功能在 v8/Chrome 中已经接近一年了,然而它在 ES2019 中才会被标准化。

trimStart()

将原始字符串开头的空白符移除,并返回一个新字符串:

'Testing'.trimStart(); //'Testing'
' Testing'.trimStart(); //'Testing'
' Testing '.trimStart(); //'Testing '
'Testing'.trimStart(); //'Testing'

trimEnd()

将原始字符串尾部的空白符移除,并返回一个新的字符串:

'Testing'.trimEnd(); //'Testing'
' Testing'.trimEnd(); //' Testing'
' Testing '.trimEnd(); //' Testing'
'Testing '.trimEnd(); //'Testing'

Symbol.prototype.description

你现在可以通过访问其 description 属性来检索一个 Symbol 的描述了,而不必使用 toString() 方法:

const testSymbol = Symbol('Test');
testSymbol.description; // Test

JSON 改进

在此改进之前,解析 JSON 的字符串中不允许使用换行符(\u2028)和段落分隔符(\u2029)。

在包含它们的字符串中使用 JSON.parse() 时,会导致 SyntaxError。但是现在它们被定义为 JSON 的标准,也可以正确地解析。

更好的 JSON.stringify()

修复 JSON.stringify() 在处理代理 UTF-8 码点(U+D800 到 U+DFFF)的输出。

在此之前,调用 JSON.stringify() 会返回一个异常格式的 Unicode 字符 (a “�”)。

现在,这些代理码点可以使用 JSON.stringify() 安全地表示为字符串,并且可以使用 JSON.parse() 转换为其原始形式。

Function.protoytype.toString()

函数一直有一个 toString() 的实例方法,它返回包含函数代码的字符串。

ES2019 引入的变化是更改其返回值,避免剥离注释或者空白符(例如空格),以便更准确地表示函数的定义。

如果我们有如下代码:

function /* this is bar */ bar() {}

之前的行为是:

bar.toString(); // function bar() {}

现在的行为:

bar.toString(); //function /* this is bar */ bar() {}

原文链接:The ES2019 Guide

Copyright ©; 2016-2022 coderfee, All rights reserved.