JavaScript ES2019中的8个新功能

àì夳堔傛蜴生んèń 2022-02-22 09:45 255阅读 0赞

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('\u0026quot;\\u2028\u0026quot;');const PS = eval(\u0026quot;'\\u2029'\u0026quot;);

### 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 */ (){}// Beforeconsole.log(foo.toString()); // function foo(){}// Now ES2019console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}// Arrow Syntaxconst bar /* comment */ = /* another comment */ () =\u0026gt; {} console.log(bar.toString()); // () =\u0026gt; {}

### 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代码单元。

// Beforeconsole.log(JSON.stringify('\\uD800')); // \u0026quot;�\u0026quot; // Now ES2019console.log(JSON.stringify('\\uD800')); // \u0026quot;\\ud800\u0026quot;

### 7.String.prototype的trimStart和trimEnd ###

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

// Trimconst name = \u0026quot;   Codedam \u0026quot;;console.log(name.trim());   // \u0026quot;Codedam\u0026quot;// Trim Startconst description = \u0026quot;   Unlocks Secret Codes \u0026quot;;console.log(description.trimStart());   // \u0026quot;Unlocks Secret Codes \u0026quot; // Trim Endconst category = \u0026quot;  JavaScript \u0026quot;;console.log(category.trimEnd());    // \u0026quot;  JavaScript\u0026quot;

### 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 =\u0026gt; item.split(' '));console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ] const flatMapResult = arr.flatMap(chunk =\u0026gt; chunk.split(' '));console.log(flatMapResult); // ['Codedam', 'is',  'Awsome', '!'];

## 其他 ##

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

*  globalThis；
 *  BigInt；
 *  import()；
 *  遗留的RegEx；
 *  私有的实例方法；
 *  String.prototype.matchAll。

英文原文：https://codedam.com/8-new-features-javascript-es2019/