【CuteJavaScript】ECMAScript2019 最新介紹

最近 ECMAScript2019，最新提案完成： tc39 Finished Proposals

，我這裡也是按照官方介紹的順序進行整理，如有疑問，可以檢視官方介紹啦~

另外之前也整理了

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]

參考文章：

ES2019 新特性簡介