ES2019指南 | Tech Wiki Online

ES2019指南

ECMAScript是JavaScript基於的標準，通常縮寫為ES。了解有關ECMAScript的所有內容，以及在ES2019中添加的功能

ESNext是一個總是指代JavaScript的下一個版本的名稱。

當前的ECMAScript版本是ES2018。它於2018年6月發布。

根據歷史，JavaScript版本通常在夏季進行標準化，因此我們可以預計ECMAScript 2019將於2019年夏季發布。

因此，在撰寫本文時，ES2018已經發布了，而ESNext即為ES2019。

對ECMAScript標準的提案按照階段進行組織。 1至3階段是新功能的孵化器，達到4階段的功能將作為新標準的一部分完成。

在撰寫本文時，我們在第4階段上有許多功能。我將在本節中介紹它們。主要瀏覽器的最新版本應已實現其中的大多數。

• Array.prototype.{flat,flatMap}（數組的一階方法）
• 可選catch綁定
• Object.fromEntries()（從對象條目創建對象）
• String.prototype.{trimStart,trimEnd}（字符串的一階方法）
• Symbol.prototype.description（Symbol的描述）
• JSON改進
• 符合格式的JSON.stringify()（對JSON.stringify()的修復）
• Function.prototype.toString()（函數的一階方法）

其中一些變更主要是為內部使用而進行的，但也了解一下非常好。

在第3階段還有一些其他功能，這些功能在接下來的幾個月可能被提升到第4階段，您可以在此GitHub存儲庫上查看它們：https://github.com/tc39/proposals。

Array.prototype.{flat,flatMap}（數組的一階方法）

flat()是一個新的數組實例方法，可以從多維數組創建一個一維數組。

示例：

;['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

默認情況下，它僅“展平”到一個級別，但是您可以添加一個參數來設置要將數組展平的級別數。將其設置為Infinity以獲得無限級數：

;['Dog', ['Sheep', ['Wolf']]]
 .flat()
 [
 //[ 'Dog', 'Sheep', [ 'Wolf' ] ]

 ('Dog', ['Sheep', ['Wolf']])
 ].flat(2)
 [
 //[ 'Dog', 'Sheep', 'Wolf' ]

 ('Dog', ['Sheep', ['Wolf']])
 ].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

如果您熟悉數組的JavaScript map()方法，則知道使用它，可以對數組的每個元素執行一個函數。

flatMap()是一個結合了flat()和map()的新的數組實例方法。當在map()回調中調用返回數組的函數時，它非常有用，但是您希望結果數組是平的：

;['My dog', 'is awesome']
 .map((words) => words.split(' '))
 [
 //[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

 ('My dog', 'is awesome')
 ].flatMap((words) => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

可選catch綁定

有時我們不需要在try/catch的catch塊中有一個綁定的參數。

我們以前必須這樣做：

try {
 //...
} catch (e) {
 //handle error
}

即使我們從未使用e來分析錯誤。現在我們可以簡單地省略它：

try {
 //...
} catch {
 //handle error
}

Object.fromEntries()（從對象條目創建對象）

對象具有entries()方法，自ES2017以來就被引入。

它返回一個包含對象自有屬性的數組，作為一個由[key, value]對組成的數組：

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

ES2019引入了一個新的Object.fromEntries()方法，它可以從這種屬性數組創建一個新的對象：

const person = { name: 'Fred', age: 87 }
const entries = Object.entries(person)
const newPerson = Object.fromEntries(entries)

person !== newPerson //true

String.prototype.{trimStart,trimEnd}（字符串的一階方法）

此功能已經在v8/Chrome中存在了將近一年的時間，並將在ES2019中進行標準化。

trimStart()

從原始字符串的開頭返回一個刪除了空白的新字符串

'Testing'.trimStart() //'Testing'
' Testing'.trimStart() //'Testing'
' Testing '.trimStart() //'Testing '
'Testing '.trimStart() //'Testing '

trimEnd()

從原始字符串的末尾返回一個刪除了空白的新字符串

'Testing'.trimEnd() //'Testing'
' Testing'.trimEnd() //' Testing'
' Testing '.trimEnd() //' Testing'
'Testing '.trimEnd() //'Testing'

Symbol.prototype.description（Symbol的描述）

現在，您可以通過訪問其description屬性，而不是使用toString()方法，來檢索Symbol的描述：

const testSymbol = Symbol('Test')
testSymbol.description // 'Test'

JSON改進

在此更改之前，行分隔符（\u2028）和段落分隔符（\u2029）符號在被解析為JSON的字符串中是不允許的。

在使用JSON.parse()時，這些字符導致SyntaxError，但現在它們按照JSON標準進行解析。

符合格式的JSON.stringify()（對JSON.stringify()的修復）

修復了處理UTF-8代理編碼的JSON.stringify()輸出（U+D800到U+DFFF的代理代碼點）。

在此更改之前，調用JSON.stringify()會返回一個形狀錯誤的Unicode字符（一‘’）。

現在，這些代理代碼點可以安全地使用JSON.stringify()表示為字符串，並使用JSON.parse()轉換回其原始表示。

Function.prototype.toString()（函數的一階方法）

函數一直有一個名為toString()的實例方法，該方法返回包含函數代碼的字符串。

ES2019對返回值進行了更改，以避免刪除註釋和其他字符，例如空格，確切表示函數的定義。

如果以前我們有：

function /\* this is bar \*/ bar() {}

行為是這樣的：

bar.toString() //'function bar() {}

現在新的行為是：

bar.toString() // 'function /\* this is bar \*/ bar () {}'