ES2019新特性預覽

閱讀javascript語言標準規範應該是每一個前端開發者都要進行的一項工作，那麼瞭解標準化的過程也可以使我們在閱讀文檔工程中更加有的放矢。我們平常使用的javascript標準是由ecma international這個組織來發布的，它是javascript這個語言的標準化組織，成立於1960年，所以我們也把javascript叫做ecmascript。這裏，簡單介紹一下，ecmascript的文檔中提到的幾個階段:

• stage0: strawman主要是一些實驗性的想法，類似於頭腦風暴那樣。
• stage1: proposal提議階段 ，會有一些具體的api, 語法和算法等
• stage2: draft， 草稿階段
• stage3: candidate，候選階段，會完成規範文檔和初始的瀏覽器實現, 這時候還處於收集一些feedback的時候
• stage4: finished 已經完成了， 經過測試後就會正式發佈了

從2009年ES5發佈後，歷經6年tc39委員會於2015發佈了es6。自從es6推出後，tc39委員會每年都會發布新的語言標準，採用的是頻繁更新，小迭代的方式進行。而對於今年新的語言特性，我也是最近纔開始學習的。語言標準這種東西，個人感覺不必過分追求時效性，畢竟一個api出來後能用好多年，早學晚學都可以。而且作爲編程語言的使用者，個人還是喜歡等穩定後再進行深入學習。接下來這篇文章就是個人學習的一些小的總結：

主要特性

Array.prototype flat, flatMap

將數組打平這個功能在實際開發當中一直有着比較高的出場率，但是可惜之前官方並沒有爲我們提供這個API，所以我們一般都是通過lodash等工具庫或者自己手動實現這個方法函數。
我們先來回顧一下，之前如果要用原生的es5或es6，我們應該如何快速簡單地實現這個方法呢？
大家可以參考以下這段代碼：

function flatten(a) {
    return Array.isArray(a) ? [].concat(...a.map(flatten)) : [a];
}

在es2019當中，官方爲我們提供了這樣一個類似的API：flat。原理大體上和上面的代碼一樣，內部實現都是採用了遞歸的concat方法。
不過在默認的情況下，es2019中這個flat方法只會打平第1層數據。所以如果我們想要支持多層遞歸的話，就需要顯式給它傳入參數。

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

// 顯示結果爲：[1, 2, 3, 1, 2, 3, [4]]

另一個和它一起提供的是flatMap方法，其實就相當於flat和map一起組合操作。

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

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

Object.fromEntries

之前es6當中爲我們提供了Object.entries方法，主要用來實現從一個對象當中獲取他們的key、value鍵值對的功能。

那麼在es2019中，又出現了一個與之相對應的方法——Object.fromEntries。使用它可以將鍵值對數組還原成對象結構。例子如下：

var obj = {a: 1, b: 2, c: 3, d: 4};
var entries = Object.entries(obj);
var newObj = Object.fromEntries(entries);
console.log(newObj); // {a: 1, b: 2, c: 3, d: 4}

小特性

String.protope.{trimstart, trimEnd}

在對用戶輸入進行先行處理過程中，要去除字符串中多餘的空格是比較常見的操作。之前已經有了trim方法可以同時去除頭尾的空格。爲了進一步方便我們實際的開發，官方又提供了另外兩個API： trimStart和trimEnd，可以分別去除頭和尾上的空格、換行符等。

var str = "    hello, scq000   ";
str.trimStart(); // "hello, scq000    ";
str.trimEnd(); // "    hello, scq000"

Symbol.protoype.description

從es6開始，javascript中引入了Symbol這個基本數據類型，可以實現一些數據內省等高級功能。在es2019中在Symbol類型上增加了description屬性用來獲取Symbol類型數據的描述信息。

let testSymbol = Symbol('test symbol');
testSymbol.description // test symbol

可選的catch參數

在進行try catch錯誤處理過程中，你如果沒有給catch傳參數的話，代碼就會報錯。在es2019中，你可以選擇性地不給它傳入參數。一個比較常見的使用場景是: 在使用JSON.parse解析字符串的時候，雖然你知道可能會報錯，但是你並不關心這個錯誤，這時候你就可以把錯誤參數吞掉。

// 原先的代碼可能長這樣：
try {
    // do  something
} catch(e) {
    console.log(e);
}
// 新的代碼
try {
    // do something
} catch {
   // do other thing without error parameter
}

雖然新的語言規範提供了吞掉錯誤參數的機制，不過個人建議在實際代碼中還是要看情況選擇性地使用。

Array.porotype.sort

在之前JavaScript中內置的數組排序算法使用的是不穩定的排序算法，也就是說在每一次執行後，對於相同數據來說，它們的相對位置是不一致的。
比如以下這段代碼：

var arr1 = [{a: 1, b: 2}, {a: 2, b: 2}, {a: 1, b: 3}, {a: 2, b: 4}, {a: 5, b: 3}];
arr1.sort((a, b) => a.a - b.a);

返回的結果第一次可能是這樣的: [{a: 1, b: 2}, {a: 1, b: 3}...]
但是第二次就變成: [{a:1,b:3}, {a:1, b: 2}....]
這就是不穩定排序算法的一些弊端。那麼在es2019中，JavaScript內部放棄了不穩定的快排算法，而選擇使用Tim Sort這種穩定的排序算法。這個排序算法，使用二分插入排序並優化了歸併算法。如果想深入瞭解原理的話，可以參考Tim Sort。

其它特性

JSON.stringify

修復了一些unicode字符顯示的問題，以下例子來自官方文檔https://github.com/tc39/proposal-well-formed-stringify

// 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"'

JSON.superset 超集

之前如果JSON字符串中包含有行分隔符 (\u2028) 和段落分隔符 (\u2029)，那麼在解析過程中會報錯:SyntaxError: Invalid or unexpected token。es2019中新增了對它們的支持。

Function.prototype.toString

之前對於函數對象調用toString方法，會將它定義過程中的註釋等信息去掉，現在會原樣進行輸出:

var sayHello = function() {
    // do something
    console.log('hello world')
}
sayHello.toString();
// "function() {
    // do something
    console.log('hello world')
}"

參考資料

https://github.com/tc39/proposals/blob/master/finished-proposals.md