ECMAScript 2019(ES10)新特性簡介

簡介

ES10是ECMA協會在2019年6月發行的一個版本，由於是ECMAScript的第十個版本，因此也稱爲ES10.

今天咱們講解一下ES10的新特性。

ES10引入了2大特性和4個小的特性，咱們接下來一一講解。

Array的新方法flat和flatMap

在ES10中，給Array引入了兩個新的方法，分別是flat和flatMap。

先來看一下flat。

咱們看一下 Array<T>.prototype.flat() 的定義：

.flat(depth = 1): any[]

flat的做用是將Array中的Array中的內容取出來，放到最頂層Array中。咱們能夠傳入一個depth參數，表示的是須要flat的Array層級。

舉個例子：

> [ 1,2, [3,4], [[5,6]] ].flat(0) // no change
[ 1, 2, [ 3, 4 ], [ [ 5, 6 ] ] ]

> [ 1,2, [3,4], [[5,6]] ].flat(1)
[ 1, 2, 3, 4, [ 5, 6 ] ]

> [ 1,2, [3,4], [[5,6]] ].flat(2)
[ 1, 2, 3, 4, 5, 6 ]

當depth=0的時候，就表示不會對Array內置的Array進行flat操做。

咱們再看一下Array<T>.prototype.flatMap()的定義：

.flatMap<U>(
  callback: (value: T, index: number, array: T[]) => U|Array<U>,
  thisValue?: any
): U[]

flatMap是map和flat的結合，下面的兩個操做是等價的：

arr.flatMap(func)
arr.map(func).flat(1)

咱們看幾個flatMap的例子：

> ['a', 'b', 'c'].flatMap(x => x)
[ 'a', 'b', 'c' ]
> ['a', 'b', 'c'].flatMap(x => [x])
[ 'a', 'b', 'c' ]
> ['a', 'b', 'c'].flatMap(x => [[x]])
[ [ 'a' ], [ 'b' ], [ 'c' ] ]

> ['a', 'b', 'c'].flatMap((x, i) => new Array(i+1).fill(x))
[ 'a', 'b', 'b', 'c', 'c', 'c' ]

Object的新方法fromEntries

Object.fromEntries的主要做用就是經過給定的[key,value]，來建立新的Object對象。

var newObj =  Object.fromEntries([['foo',1], ['bar',2]]);
console.log(newObj);
{ foo: 1, bar: 2 }

上面例子中，咱們經過給定的兩個key-value對，建立了新的object對象。

和fromEntries相反的方法，就是Object.entries,用來遍歷對象屬性。

仍是剛剛的例子，咱們再調用一下Object.entries方法：

console.log(Object.entries(newObj));
[ [ 'foo', 1 ], [ 'bar', 2 ] ]

String的新方法trimStart和trimEnd

JS中已經有了trim的方法，能夠消除String先後的空格。

> '  abc  '.trim()
'abc'

但有時候可能須要消除前面或者後面的空格，ES10引入了trimStart和trimEnd方法：

> '  abc  '.trimStart()
'abc  '
> '  abc  '.trimEnd()
'  abc'

注意，有些瀏覽器可能已經有了trimLeft和trimRight方法，在EMCAScript規範中，他們和trimStart，trimEnd是等價的。

可訪問的Symbol的description屬性

咱們在建立Symbol的時候，能夠傳入一個description做爲參數來構建Symbol：

const sym = Symbol('www.flydean.com');

在ES10以前，咱們想要訪問Symbol的description是這樣作的：

console.log(String(sym));
//Symbol(www.flydean.com)

如今咱們能夠直接經過description屬性來訪問了：

console.log(sym.description);
//www.flydean.com

可忽略的catch參數

在傳統的寫法中，catch是要接受一個error參數的：

try {
  // ···
} catch (error) {
  // ···
}

但有時候咱們已經知道這個異常是不重要的，或者說，咱們想忽略掉這個異常，那麼在ES10中，咱們能夠省略這個error參數：

try {
  // ···
} catch {
  // ···
}

Array的穩定排序

Array有個sort功能，能夠根據元素內容進行排序。

ES10中引入了穩定排序的概念，也就是說若是排序的key是相同的，那麼這些相同key的順序在排序中是不會發生變化的。

舉個例子：

const arr = [
  { key: 'b', value: 1 },
  { key: 'a', value: 2 },
  { key: 'b', value: 3 },
];

arr.sort((x, y) => x.key.localeCompare(y.key, 'en-US'));

咱們根據key來進行排序，從而讓a，排在b前面，可是兩個key=b的元素位置是不會變化的。

console.log(arr);
[
  { key: 'a', value: 2 },
  { key: 'b', value: 1 },
  { key: 'b', value: 3 }
]

JSON.stringify

JSON是一個很方便的數據傳輸格式，它不像XML那麼複雜，優勢就是體積小，便於傳輸。

根據RFC3629的規範，在公共環境中傳輸JSON，必須使用UTF-8進行編碼。

JSON text exchanged between systems that are not part of a closed
ecosystem MUST be encoded using UTF-8 [RFC3629].

在講JSON.stringify以前，咱們先回顧一下ES6中的Escape sequences。

ES6中有三種escape:

1. Hex escape:16進制escape。轉義的是2位的16進制。

> '\x7A' === 'z'
  true

1. Unicode escape：轉義的是4位的16進制

> '\u007A' === 'z'
  true

1. Unicode code point escape：轉義的是1位或者多位的16進制

> '\u{7A}' === 'z'
  true

最後一個轉義是在ES6中引入的。

unicode字符集最後是要存儲到文件或者內存裏面的，直接存儲的話，空間佔用太大。那怎麼存呢？使用固定的1個字節，2個字節仍是用變長的字節呢？因而咱們根據編碼方式的不一樣，分紅了UTF-8，UTF-16，UTF-32等多種編碼方式。

其中UTF-8是一種變長的編碼方案，它使用1-4個字節來存儲。UTF-16使用2個或者4個字節來存儲。

而UTF-32是使用4個字節來存儲。這三種編碼方式中，只有UTF-8是兼容ASCII的，這也是爲何國際上UTF-8編碼方式比較通用的緣由（畢竟計算機技術都是西方人搞出來的）。

咱們知道在Unicode編碼中，U+D800到U+DFFF的這些字符是預留給UTF-16使用，若是咱們輸入的是這個範圍內的字符的話，是沒法被轉換成爲UTF-8格式的。

這就是原來的JSON.stringify可能出現的問題。

在ES10中，JSON.stringify對於這些不可轉換成UTF-8的字符，直接返回對應的code unit escape sequences。

console.log(JSON.stringify('\u{D800}'));
"\ud800"

JSON 被歸爲ECMAScript的子集

在以前，JSON不是ECMAScript的子集，從而致使有些能夠在JSON中包含的字符，不可以在ECMAScript的字面量中出現，好比U+2028 和U+2029 ：

const sourceCode = '"\u2028"';
eval(sourceCode); // SyntaxError

JSON.parse(json); // OK

此次改變以後，咱們在編碼的時候就不須要再去區分是JSON仍是ECMAScript了。

Function的toString方法

在ES10中，若是Function能夠經過以ECMAScript源代碼的方式表示的話，則toString會直接返回這個函數的代碼：

> class C { foo() { /*hello*/ } }
> C.prototype.foo.toString()
'foo() { /*hello*/ }'

若是是一些native的方法，好比底層c或者c++實現的代碼，則直接返回[native code]:

> Math.pow.toString()
'function pow() { [native code] }'

本文做者：flydean程序那些事

本文連接：http://www.flydean.com/ecmascript-10/

本文來源：flydean的博客

歡迎關注個人公衆號:「程序那些事」最通俗的解讀，最深入的乾貨，最簡潔的教程，衆多你不知道的小技巧等你來發現！