JavaScript ES2019 中的 8 項新功能

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 */ (){} // Beforeconsole.log(foo.toString()); // function foo(){} // Now ES2019console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){} // Arrow Syntaxconst 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 代碼單元。

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

7.String.prototype 的 trimStart 和 trimEnd

String 原型已經有了 trim 方法,用來移除字符串開頭和結尾的空格。而 ES2019 引入了 trimStart 和 trimEnd。

// Trimconst name = "   Codedam ";console.log(name.trim());   // "Codedam" // Trim Startconst description = "   Unlocks Secret Codes ";console.log(description.trimStart());   // "Unlocks Secret Codes " // Trim Endconst 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 階段的一些有用的特性。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章