ES2019 規范是對 JavaScript的小規模擴展，但仍帶來了一些有趣的功能。本文向你展示八個 ES2019 的功能，這些功能可以使你的開發變得更輕松。

[[386262]]

String.prototype.trimStart()和String.prototype.trimEnd()

有時我們在處理字符串時需要處理多余的空格。ES2020 增加了兩個功能：.trimStart()和 trimEnd() 方法可以幫你處理這些瑣事。

它們都可以幫助你修剪或刪除給定字符串中的空格。trimStart() 刪除字符串開頭的所有空格。trimEnd()將刪除字符串末尾的所有空格。不過要是想去除兩邊的空格呢?

有兩個選擇。第一種是同時使用這兩個 ES2019 功能。第二個是使用另一個字符串方法 trim()。兩種方式都能給你想要的結果。

// String.prototype.trimStart() 例子: 
// 處理不帶空格的字符串： 
'JavaScript'.trimStart() 
// Output: 
//'JavaScript' 
 
// 處理以空格開頭的字符串： 
' JavaScript'.trimStart() 
// Output: 
//'JavaScript' 
 
// 兩邊都留有空格的字符串 
' JavaScript '.trimStart() 
// Output: 
//'JavaScript ' 
 
// 以空格結尾的字符串 
'JavaScript '.trimStart() 
// Output: 
//'JavaScript ' 
 
 
// String.prototype.trimEnd() 例子: 
// 處理不帶空格的字符串： 
'JavaScript'.trimEnd() 
// Output: 
//'JavaScript' 
 
// 處理以空格開頭的字符串： 
' JavaScript'.trimEnd() 
// Output: 
//' JavaScript' 
 
// 兩邊都留有空格的字符串 
' JavaScript '.trimEnd() 
// Output: 
//' JavaScript' 
 
// 以空格結尾的字符串 
'JavaScript '.trimEnd() 
// Output: 
//'JavaScript' 

Function.prototype.toString()

函數的 toString() 方法已經存在了一段時間。它的作用是使你可以打印函數的代碼。ES2019 的不同之處在于它處理注釋和特殊字符(例如空格)的方式。

過去，toString() 方法刪除了注釋和空格。所以該函數的打印版本可能看起來與原始代碼不一樣。ES2019 的不會再發生這種情況。它返回的值將會與原始值匹配，包括注釋和特殊字符。

// ES2019 之前: 
function myFunc/* is this really a good name? */() { 
  /* Now, what to do? */ 
} 
 
myFunc.toString() 
// Output: 
// "function myFunc() {}" 
 
 
// ES2019: 
function myFunc/* is this really a good name? */() { 
  /* Now, what to do? */ 
} 
 
myFunc.toString() 
// Output: 
// "function myFunc/* is this really a good name? */() { 
//   /* Now, what to do? */ 
// }" 

Array.prototype.flat()和Array.prototype.flatMap()

數組是 JavaScript 的基本組成部分之一。它們有時會引起很多問題。當你必須要處理多維數組時尤其如此。甚至將多維數組轉換為一維這樣看似簡單的任務也可能很困難。

好消息是，ES2019 的兩個功能使這種操作變得更容易。第一個是 flat() 方法。在多維數組上使用時，它將轉換為一維。默認情況下，flat()只會將數組展平一級。

但是頁可以指定級數，并在調用時作為參數傳遞。如果不確定需要多少級，也可以使用 Infinity。

// 創建一個數組: 
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]] 
 
// 展平一級: 
let myFlatArray = myArray.flat(1) 
 
// 輸出: 
console.log(myFlatArray) 
// Output: 
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ] 
 
// 用參數 Infinity 展平: 
let myInfiniteFlatArray = myArray.flat(Infinity) 
 
// 輸出: 
console.log(myInfiniteFlatArray) 
// Output: 
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ] 

Array.prototype.flatMap()

除了 flat() 方法之外，還有 flatMap()。可以把它看作是 flat() 的高級版本。區別在于 flatMap() 方法把 flat() 與 map() 結合了起來。在展平數組時，可以調用回調函數。

這樣就可以在展平過程中使用原始數組中的每個元素。當在對數組進行展平操作的同時又要修改內容時很方便。

// 創建數組: 
const myArray = ['One word', 'Two words', 'Three words'] 
 
// 用 map() 將數組中的所有字符串拆分為單詞： 
// 注意：這將會創建多維數組。 
const myMappedWordArray = myArray.map(str => str.split(' ')) 
 
console.log(myMappedWordArray) 
// Output: 
// [ [ 'One', 'word' ], [ 'Two', 'words' ], [ 'Three', 'words' ] ] 
 
 
// flatMap() 的例子: 
const myArray = ['One word', 'Two words', 'Three words'] 
 
// 用 map() 將數組中的所有字符串拆分為單詞： 
// 注意：這將會創建多維數組。 
const myFlatWordArray = myArray.flatMap(str => str.split(' ')) 
 
console.log(myFlatWordArray) 
// Output: 
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ] 

Object.fromEntries()

當需要把某個對象轉換為數組時，可以用 entries() 來完成。但是想要反向操作的話就困難了。ES2019 提供了 fromEntries() 來輕松解決這個問題。

這個方法的作用很簡單。它需要鍵值對的可迭代形式，例如數組或 Map，然后將其轉換為對象。

// 把數組轉換為對象: 
// 創建數組: 
const myArray = [['name', 'Joe'], ['age', 33], ['favoriteLanguage', 'JavaScript']] 
const myObj = Object.fromEntries(myArray) 
console.log(myObj) 
// Output: 
// { 
//   name: 'Joe', 
//   age: 33, 
//   favoriteLanguage: 'JavaScript' 
// } 
 
 
// 把 Map 轉換為對象: 
// 創建 map: 
const myMap = new Map( 
  [['name', 'Spike'], ['species', 'dog'], ['age', 3]] 
) 
const myObj = Object.fromEntries(myMap) 
console.log(myObj) 
// Output: 
// { 
//   name: 'Spike', 
//   species: 'dog', 
//   age: 3 
// } 

可選的 catch 綁定

以前使用 try ... catch 時，還必須使用綁定。即使沒有使用該異常，你也必須將其作為參數傳遞。在 ES2019 種，如果不想使用該異常，則可以使用不帶參數的 catch 塊。

// ES2019 之前: 
try { 
  // Do something. 
} catch (e) { 
 //忽略必需的e參數 
    //如果你不想用它，也應該保留。 
} 
 
// ES2019: 
try { 
  // Do something. 
} catch { 
  // 不需要添加任何參數 
} 

格式正確的 JSON.stringify()

過去，當對包含特定字符的東西使用 JSON.stringify() 時，會得到格式不正確的 Unicode 字符串。從 U+D800到 U+DFFF 的編碼段會變成 “�”。更糟的是沒辦法把這些錯誤的字符變回原樣。

ES2019 修復了 JSON.stringify() 方法?，F在能夠對那些有問題的代碼段進行分類，并且可以將它們轉換回其原始表示形式。

Symbol.prototype.description

符號是在 ES2015(ES6)中引入的新數據類型。它們通常用于標識對象屬性。ES2019 增加了 description 屬性。這個屬性是只讀的，無法更改它的值。它用來返回給定符號的描述。

要牢記兩點。首先，創建符號時描述不是必須的，而是可選的。所以當你嘗試訪問 description 時，可能會得到除 undefined 之外的任何信息。如果你嘗試訪問不帶描述的符號描述，則會得到 undefined(未定義)信息。

第二點是 description 是對符號本身的描述。它不是符號的標識符。這意味著你不能使用現有的描述(即 description 屬性的值)來訪問現有的符號。它只是為了更容易識別正在你正在使用的符號。

說明：創建新的符號時，可以通過將一些字符串作為參數傳遞給 Symbol() 對象來添加描述。如果留空，description 將會是 undefined。

// 創建帶有描述的 Symbol： 
// 創建 Symbol 并添加描述： 
//注意：描述是"My first symbol." 
const mySymbol = Symbol('My first symbol.') 
 
// 輸出 description 屬性的值： 
console.log(mySymbol.description) 
// Output: 
// 'My first symbol.' 
 
 
// 讀取不存在的 Symbol： 
console.log(Symbol().description) 
// Output: 
// undefined 
 
 
// 讀取定義為空字符串的描述： 
console.log(Symbol('').description) 
// Output: 
// '' 

Symbol.prototype.toString()

toString() 方法提供了另一種讀取符號描述的方式。它的缺點是在返回的字符串中還包含 Symbol()。另一個區別是 toString() 方法永遠不會返回不存在的undefined描述。

使用 description 的另一個原因是：如果你有一個沒有說明的 Symbol 并用了 toString() 方法，仍將得到 Symbol() 部分。如果描述為空字符串，也將獲得此信息。這樣就基本上不可能區分不存在的描述和用作描述的空字符串。

// 創建帶有描述的 Symbol： 
const mySymbol = Symbol('REAMDE.') 
 
// 輸出 description 屬性的值： 
console.log(mySymbol.toString()) 
// Output: 
// 'Symbol(REAMDE.)' 
 
// 讀取不存在的 Symbol： 
console.log(Symbol().toString()) 
// Output: 
// 'Symbol()' 
 
 
// 讀取定義為空字符串的描述： 
console.log(Symbol('').toString()) 
// Output: 
// 'Symbol()'