【CuteJavaScript】ES2019 新特性彙總

原創

pingan8787

2019-09-02 07:45

最近 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	[email protected]
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787...
ES小冊	js.pingan8787.com

微信公衆號

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.