快速了解 JavaScript ES2019 的五個新增特性

2021 年 4 月 13 日
筆記
前端筆記

ES2019 規範是對 JavaScript 的一個較小的補充，但它仍然帶來了一些有用的功能。本文將向你展示五個 ES2019 新增的特性，這些特性或許可以讓你的編程輕鬆一點。這些特性包括 trimStart()、trimEnd()、flat()、flatMap()、Object.fromEntries() 等。

字符串的 trimStart 和 trimEnd 方法

這兩個方法都可以幫助你從給定的字符串中刪除空白空間。第一個方法，trimStart() 將刪除字符串開頭的所有空白。第二個，trimEnd() 將刪除字符串末尾的所有空白。如果你需要去除兩邊的空白，一種方法是同時使用這兩個方法，另一種方法是使用 trim() 這個字符串方法。

'JavaScript'.trimStart()
// Output:
//'JavaScript'

' JavaScript'.trimStart()
// Output:
//'JavaScript'

' JavaScript '.trimStart()
// Output:
//'JavaScript '

'JavaScript '.trimStart()
// Output:
//'JavaScript '

' JavaScript'.trimEnd()
// Output:
//' JavaScript'

' JavaScript '.trimEnd()
// Output:
//' JavaScript'

'JavaScript '.trimEnd()
// Output:
//'JavaScript'

函數的 toString 方法

任何對象都有 toString() 方法，函數也不例外。該方法的作用是允許你打印你或其他人編寫的函數的代碼。在 ES2019 之前，toString() 方法會刪除注釋和空白。因此，該函數的打印的版本可能與原始代碼不一樣。ES2019 發佈後，toString() 方法返回的值將與原始值一致，包括注釋、空白和特殊字符。

// 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? */
// }"

數組的 flat 和 flatMap 方法

數組是 JavaScript 中的基本部分之一，它們有時也會讓人頭疼，尤其是當你要處理多維數組的時候。比如將多維數組變成一維數組這樣一個看似簡單的事件。現在 ES2019 為數組提供的 flat() 和 flatMap() 方法可以讓這個問題變得簡單。

flat() 方法

第一個是 flat()，中文可以理解為展開或扁平化的意思。它的作用是把多維數組扁平化為一維數組。默認情況下，flat() 只會展開第一層。如果你需要扁平化更多的層數或深度，你可以指定一個層數或深度值，作為參數傳遞。如果你不確定多少層，你也可以使用 Infinity，表示有多少層展開多少展。

// 創建一個數組:
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]]

// 展開數組第一層
let myFlatArray = myArray.flat(1)
console.log(myFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ]

// 有多少層展開多少層
let myInfiniteFlatArray = myArray.flat(Infinity)
console.log(myInfiniteFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ]

flatMap() 方法

除了 flat() 方法外，還有 flatMap() 方法。你可以把這個方法看作是 flat() 的高級版本。不同的是，flatMap() 方法結合了 flat() 和 map() 方法。當你扁平化一個數組時，你可以調用一個回調函數。這允許你在扁平化的過程中對原數組內部的單個元素進行處理。當你想扁平化一個數組，但同時又想修改內容時，這就很方便了。

// 創建一個數組:
const myArray = ['One word', 'Two words', 'Three words']

// 將數組中的字符串使用空格分隔
// 注意：這會創建一個二維數組
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']

// 將數組中的字符串使用空格分隔
const myFlatWordArray = myArray.flatMap((str) => str.split(' '))
console.log(myFlatWordArray)
// Output:
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ]

Object.fromEntries() 方法

當你需要將一些對象轉換為數組時，你可以用 entries() 方法來實現，但反過來將對象的數組合併為單個對象，在 ES2019 之前還沒有一個現成的方法。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 轉換為對象:
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 時，你必須把異常作為一個參數傳遞給 catch，即使你沒有使用這個參數。ES2019 把這個參數變成可選項。如果你不想使用異常，你可以使用不帶參數的 catch 塊。

// ES2019 之前:
try {
  // Do something.
} catch (e) {
  // 沒有用到異常參數 e
  // 但該參數不能省略
}

// ES2019:
try {
  // Do something.
} catch {
  // 沒有用到異常參數，可以省略
}

小結

以上五個特性是我覺得比較有用的。除了這五個特性，ES2019 標準還增加了其它的特性或改進，本文沒有全部列舉出來，如果感興趣可以查閱官方文檔。

Tags: 前端筆記