【CuteJavaScript】ES2019 新特性彙總

最近 ECMAScript2019，最新提案完成：tc39 Finished Proposals，我這裏也是按照官方介紹的順序進行整理，若有疑問，能夠查看官方介紹啦~

另外以前也整理了 《ES6/ES7/ES8/ES9系列》，能夠一塊兒看哈。

1. 可選的 catch 綁定

1.1 介紹

在 ECMAScript2019 最新提案中，支持咱們在使用 try catch 錯誤異常處理時，選擇性的給 catch 傳入參數。

即咱們能夠不傳入 catch 參數。

正常使用 try catch：

try {
    // todo 
} catch (err){
    console.log('err：',err)
}

在 ES10 中能夠這麼使用：

try {
    // todo 
} catch {
    // todo 
}

1.2 使用場景

當咱們不須要對 chtch 返回的錯誤信息進行處理時，好比：咱們對於一些數據處理，常常會出現格式報錯，可是咱們並不關心這個錯誤，咱們只須要繼續處理，或從新請求數據等。

這種狀況，咱們就可使用這個新特性，固然，仍是須要根據實際狀況考慮。

2. JSON.superset

2.1 介紹

• 來源背景：

因爲在 ES2019 以前不支持轉義行分隔符 (\u2028) 和段落分隔符 (\u2029) 字符，而且在解析過程當中會報錯: SyntaxError: Invalid or unexpected token。

const LS = "";
const PS = eval("'\u2029'");// SyntaxError: Invalid or unexpected token

• 解決方案：

JSON 語法由** ECMA-404** 定義並由 RFC 7159 永久修復，容許行分隔符 (\u2028) 和段落分隔符 (\u2029) 字符，直接出如今字符串中。

2.2 使用

在 ES10 中，咱們就能夠直接使用 eval("'\u2029'"); 而不會再提示錯誤。

3. Symbol.prototype.description

3.1 介紹

在 ES6 中引入 Symbol 這個基本數據類型，能夠實現一些數據內省等高級功能。

此次 ES10 中，爲 Symbol 類型增長 Symbol.prototype.description 的一個訪問器屬性，用來獲取 Symbol 類型數據的描述信息（description）。

3.2 使用

MDN 上的案例介紹：

console.log(Symbol('pingan8787').description);
// expected output: "pingan8787"

console.log(Symbol.iterator.description);
// expected output: "Symbol.iterator"

console.log(Symbol.for('leo').description);
// expected output: "leo"

console.log(Symbol('pingan8787').description + ' and leo!');
// expected output: "pingan8787 and leo!"

另外咱們也能夠這麼使用：

let pingan = Symbol('pingan8787').description;
console.log(pingan === 'pingan8787'); // true

4. Function.prototype.toString

4.1 介紹

在 ES10 以前，咱們對一個函數調用 toString() 方法，返回的結果中會將註釋信息去除。

在 ES10 以後，函數再調用 toString() 方法，將準確返回原有內容，包括空格和註釋等：

let pingan8787 = function(){
    // do something
    console.log('leo')
}
pingan8787.toString();
/**
"function(){
    // do something
    console.log('leo')
}"
*/

5. Object.fromEntries

5.1 介紹

Object.fromEntries 是 ES10 中新的靜態方法，用於將鍵值對列表轉換爲對象。

Object.fromEntries() 方法接收一個鍵值對的列表參數，並返回一個帶有這些鍵值對的新對象。

這個迭代參數應該是一個可以實現 @iterator 方法的的對象，返回一個迭代器對象。它生成一個具備兩個元素的類數組的對象，第一個元素是將用做屬性鍵的值，第二個元素是與該屬性鍵關聯的值。

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

5.2 使用

• Object.entries 和 Object.fromEntries() 互轉

let leo = { name: 'pingan8787', age: 10};
let arr = Object.entries(leo);
console.log(arr);// [["name", "pingan8787"],["age", 10]]

let obj = Object.fromEntries(arr);
console.log(obj);// {name: "pingan8787", age: 10}

• Map 轉化爲 Object

const map = new Map([ ['name', 'pingan8787'], ['age', 10] ]);
const obj = Object.fromEntries(map);
console.log(obj); // {name: "pingan8787", age: 10}

• Array 轉化爲 Object

const arr = [ ['name', 'pingan8787'], ['age', 10] ];
const obj = Object.fromEntries(arr);
console.log(obj); // {name: "pingan8787", age: 10}

6. 更友好的 JSON.stringify

6.1 介紹

更友好的 JSON.stringify，對於一些超出範圍的 Unicode 字符串，爲其輸出轉義序列，使其成爲有效 Unicode 字符串。

6.2 使用

// Non-BMP characters still serialize to surrogate pairs.
JSON.stringify('𝌆')
// → '"𝌆"'
JSON.stringify('\uD834\uDF06')
// → '"𝌆"'

// Unpaired surrogate code units will serialize to escape sequences.
JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'

7. String.prototype.{trimStart,trimEnd}

7.1 String.prototype.trimStart

trimStart() 方法從字符串的開頭刪除空格，返回一個新字符串，表示從其開頭（左端）剝離空格的調用字符串，不會直接修改原字符串自己。

trimLeft()是此方法的別名。

let pingan8787 = '   Hello pingan8787!   ';
console.log(pingan8787);        // "   Hello pingan8787!   ";
console.log(pingan8787.length); // 23;

console.log(pingan8787.trimStart());        // "Hello pingan8787!   ";
console.log(pingan8787.trimStart().length); // 20;

7.2 String.prototype.trimEnd

trimEnd() 方法從一個字符串的右端移除空白字符，返回一個新字符串，表示從其（右）端剝去空白的調用字符串，不會直接修改原字符串自己。

trimRight()是此方法的別名。

let pingan8787 = '   Hello pingan8787!   ';
console.log(pingan8787);        // "   Hello pingan8787!   ";
console.log(pingan8787.length); // 23;

console.log(pingan8787.trimEnd());        // "   Hello pingan8787!";
console.log(pingan8787.trimEnd().length); // 20;

8. Array.prototype.{flat,flatMap}

在 ES10 以前，咱們要將一個數組打平，因爲官方沒有對應 API，咱們可能須要 lodash 活着手寫循環去操做。

8.1 Array.prototype.flat

在 ES10 中，官方新增一個 Array.prototype.flat 方法，將數組第一層數據打平，也僅限第一層。若是咱們須要將多層遞歸，則須要顯式傳入參數：

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

8.2 Array.prototype.flatMap

在 ES10 中，官方還增長了 Array.prototype.flatMap 方法，其實就是 flat 和 map 一塊兒組合操做：

[1,3,5].map(x => [x * x]); // [[1],[9],[25]]

[1,3,5].flatMap(x => [x * x]); // [1,9,25]

參考文章：

1.ES2019 新特性簡介
2.ES2019 新特性簡介

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787/Leo_Reading/issues
ES小冊	js.pingan8787.com

微信公衆號