ECMA 2019(ES10) 新特性

_zhiqiu發表於2024-05-24

本章內容：

  • 行分隔符（U + 2028）和段分隔符（U + 2029）符號現在允許在字串文字中，與 JSON 匹配
  • 更加友好的 JSON.stringify
  • 新增了 Array 的flat()方法和flatMap()方法
  • 新增了 String 的trimStart()方法和trimEnd()方法
  • Object.fromEntries()
  • Symbol.prototype.description
  • Function.prototype.toString()現在返回精確字元，包括空格和註釋
  • 簡化try {} catch {},修改 catch 繫結
  • Legacy RegEx
  • 私有的例項方法和訪問器

1.行分隔符（U + 2028）和段分隔符（U + 2029）符號現在允許在字串文字中，與 JSON 匹配

以前，這些符號在字串文字中被視為行終止符，因此使用它們會導致 SyntaxError 異常。

2.更加友好的 JSON.stringify

如果輸入 Unicode 格式但是超出範圍的字元，在原先 JSON.stringify 返回格式錯誤的 Unicode 字串。現在實現了一個改變 JSON.stringify 的第 3 階段提案，因此它為其輸出轉義序列，使其成為有效 Unicode（並以 UTF-8 表示）

3.新增 Array 的flat()方法和flatMap()方法

flat()和flatMap()本質上就是是歸納（reduce） 與 合併（concat）的操作。

Array.prototype.flat()

flat() 方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。

flat()方法最基本的作用就是陣列降維

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作為深度，展開任意深度的巢狀陣列
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
  • 其次，還可以利用flat()方法的特性來去除陣列的空項
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Array.prototype.flatMap()

flatMap() 方法首先使用對映函式對映每個元素，然後將結果壓縮成一個新陣列。它與 map 和 深度值 1 的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些。 這裡我們拿 map 方法與 flatMap 方法做一個比較。

var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// 只會將 flatMap 中的函式返回的陣列 “壓平” 一層
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

4.String 的trimStart()方法和trimEnd()方法

新增的這兩個方法很好理解，分別去除字串首尾空白字元，這裡就不用例子說宣告瞭。

5.Object.fromEntries()

Object.entries()方法的作用是返回一個給定物件自身可列舉屬性的鍵值對陣列，其排列與使用 for...in 迴圈遍歷該物件時返回的順序一致（區別在於 for-in 迴圈也列舉原型鏈中的屬性）。

而Object.fromEntries() 則是 Object.entries() 的反轉。

Object.fromEntries() 函式傳入一個鍵值對的列表，並返回一個帶有這些鍵值對的新物件。這個迭代引數應該是一個能夠實現@iterator 方法的的物件，返回一個迭代器物件。它生成一個具有兩個元素的類似陣列的物件，第一個元素是將用作屬性鍵的值，第二個元素是與該屬性鍵關聯的值。

  • 透過 Object.fromEntries， 可以將 Map 轉化為 Object:
const map = new Map([
  ["foo", "bar"],
  ["baz", 42],
]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
  • 透過 Object.fromEntries， 可以將 Array 轉化為 Object:
const arr = [
  ["0", "a"],
  ["1", "b"],
  ["2", "c"],
];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

6.Symbol.prototype.description

透過工廠函式 Symbol（）建立符號時，您可以選擇透過引數提供字串作為描述：

const sym = Symbol("The description");

以前，訪問描述的唯一方法是將符號轉換為字串：

assert.equal(String(sym), "Symbol(The description)");

現在引入了 getter Symbol.prototype.description 以直接訪問描述：

assert.equal(sym.description, "The description");

Function.prototype.toString()

現在返回精確字元(原始碼)，包括空格和註釋

function /* comment */ foo /* another comment */() {}
// 之前不會列印註釋部分
console.log(foo.toString()); // function foo(){}
// ES2019 會把註釋一同列印
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}
// 箭頭函式
const bar /* comment */ = /* another comment */ () => {};
console.log(bar.toString()); // () => {}

修改 catch 繫結

在 ES10 之前，我們必須透過語法為 catch 子句繫結異常變數，無論是否有必要。很多時候 catch 塊是多餘的。 ES10 提案使我們能夠簡單的把變數省略掉。

不算大的改動。

之前是:

try {
  // do sth
} catch (e) {
  // do sth
}

現在是:

try {
  // do sth
} catch {
  // do sth
}

相關文章