JavaScript ES2019 中的 8 个新功能

JavaScript ES2019 中的 8 个新功能 694 阅读 0 评论 0 点赞

JavaScript ES2019 中的 8 个新功能

JavaScript 一直在不断改进和添加更多新功能。TC39 已经完成，并批准了 ES2019 的 8 项新功能。这个过程包含了 5 个阶段：

第 0 阶段：稻草人
第 1 阶段：提案
第 2 阶段：草案
第 3 阶段：候选
第 4 阶段：已完成 / 已批准

第 0 阶段的提案：

https://github.com/tc39/proposals/blob/master/stage-0-proposals.md

第 1 至 3 阶段的提案：

https://github.com/tc39/proposals

第 4 阶段的提案：

https://github.com/tc39/proposals/blob/master/finished-proposals.md

废话不多说，接下来让我们来逐一介绍这些功能。

1. 可选的 catch 绑定

可选的 catch 绑定提案是为了能够选择性地移除使用不到的 catch 绑定。

try {
 // trying to use a new ES2019 feature
 // which may not be implemented in other browsers
} catch (unused) {
 // revert back to old way
}

现在可以删除使用不到的绑定。

try {
 ...
} catch {
 ...
}

2.JSON 超集

这个提案的目的是让 JSON 字符串可以包含未转义的 U+2028 LINE SEPARATOR 和 U+2029 PARAGRAPH SEPARATOR 字符，而 ECMAScript 字符串是不能包含这些字符的。在 ES2019 生效之前，这样做会出现SyntaxError: Invalid or unexpected token错误。

const LS = eval('"\\u2028"');
const PS = eval("'\\u2029'");

3. 符号描述

符号是在 ES2015 中引入的，具有非常独特的功能。在 ES2019 中可以提供给定的描述，目的是避免间接从 Symbol.prototype.toString 获取描述。

const mySymbol = Symbol('myDescription');
console.log(mySymbol); // Symbol(myDescription)
console.log(mySymbol.toString()); // Symbol(myDescription)
console.log(mySymbol.description); // myDescription

4. 修订版的 Function.prototype.toString

之前的函数原型已经有 toString 方法，但是在 ES2019 中，它经过了修订，可以包含函数内的注释，不过不适应于箭头函数。

function /* comment */ foo /* another comment */ (){}
 
// Before
console.log(foo.toString()); // function foo(){}
 
// Now ES2019
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}
 
// Arrow Syntax
const bar /* comment */ = /* another comment */ () => {}
 
console.log(bar.toString()); // () => {}

5.Object.fromEntries

它是 Object.entries 方法的反向操作，可用于克隆对象。

const obj = {
 prop1: 1,
 prop2: 2,
};
 
const entries = Object.entries(obj);
console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]
const fromEntries = Object.fromEntries(entries);
console.log(fromEntries); // Object { prop1: 1, prop2: 2 }
console.log(obj === fromEntries); // false

不过需要注意的是，嵌入式对象 / 数组都只是引用。

const obj = {
 prop1: 1,
 prop2: 2,
 deepCopy: {
 mutateMe: true
 }
};
 
const entries = Object.entries(obj);
const fromEntries = Object.fromEntries(entries);
fromEntries.deepCopy.mutateMe = false;
console.log(obj.deepCopy.mutateMe); // false

6. 格式化的 JSON.stringify

这个提案是由同一个人提出来的，与 JSON 超集有关。ES2019 将使用 JSON 转义序列表示输出结果，而不是返回 UTF-16 代码单元。

// Before
console.log(JSON.stringify('\\uD800')); // "�"
 
// Now ES2019
console.log(JSON.stringify('\\uD800')); // "\\ud800"

7.String.prototype 的 trimStart 和 trimEnd

String 原型已经有了 trim 方法，用来移除字符串开头和结尾的空格。而 ES2019 引入了 trimStart 和 trimEnd。

// Trim
const name = " Codedam ";
console.log(name.trim()); // "Codedam"
 
// Trim Start
const description = " Unlocks Secret Codes ";
console.log(description.trimStart()); // "Unlocks Secret Codes "
 
// Trim End
const category = " JavaScript ";
console.log(category.trimEnd()); // " JavaScript"

8.Array.prototype 的 flat 和 flatMap

flat 方法通过将所有子数组元素以递归方式连接到指定的深度来创建数组。默认深度为 1，使数组的第一层嵌套展平。

const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]
 
// You can use Infinity to flatten all the nested arrays no matter how deep the array is
 
const arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];
arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap 方法类似于 flat，并且还与 map 相关，它会先映射数组然后将其展平。

const arr = ['Codedam', 'is Awsome', '!'];
 
const mapResult = arr.map(item => item.split(' '));
console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]
 
const flatMapResult = arr.flatMap(chunk => chunk.split(' '));
console.log(flatMapResult); // ['Codedam', 'is', 'Awsome', '!'];

其他

我还想强调一下现在处在第 3 阶段的一些有用的特性。