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

前端小蜜蜂發表於2021-04-13
JavaScript

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 標準還增加了其它的特性或改進，本文沒有全部列舉出來，如果感興趣可以查閱官方文件。

相關文章