JavaScript ES2019 中的 8 個新特性

羽葉丶發表於2019-02-19
JavaScript

前言

JavaScript 不斷改進和新增更多功能。TC39 已經完成並批准了 ES2019 的這 8 個功能，它有 4 個階段，這些階段是：

  • Stage 0: Strawman
  • Stage 1: Proposals
  • Stage 2: Drafts
  • Stage 3: Candidates
  • Stage 4: Finished/Approved

以下連結可以檢視Stage 0，Stage 1 – 3 和Final Stage

可選的 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 {
  ...
}
複製程式碼

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'");
複製程式碼

符號說明

在 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
複製程式碼

Function.prototype.toString - 修訂版

我們之前已經在函式原型中使用了toString方法，但是在 ES2019 中它已被修改幷包含函式內的註釋，請注意它在Arrow Functions上不起作用。

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()); // () => {}
複製程式碼

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
複製程式碼

注意：任何嵌入式物件/陣列都只是通過引用複製。

格式良好的 JSON.stringify

這也是由同一個人提出的，並且與 JSON 超集特徵有關 。ES2019 不是將未配對的代理程式碼點作為單個 UTF-16 程式碼單元返回，而是用 JSON 轉義序列表示它們

// Before
console.log(JSON.stringify("\uD800")); // "�"

// Now ES2019
console.log(JSON.stringify("\uD800")); // "\ud800"
複製程式碼

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"
複製程式碼

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', '!'];
複製程式碼

其他

強調一下現在 Stage 3 中的一些有用的即將推出的功能。

最後

原文：8 NEW FEATURES in JavaScript ES2019
作者：Rienz
翻譯：chenyeah.com/posts/a77f9…

相關文章