ES2019 中 8 個很是有用的功能

時間 2021-04-29

標籤前端程序員面試 segmentfault 數組服務器微信多線程 app 框架欄目快樂工作简体版

原文原文鏈接

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

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

有時咱們在處理字符串時須要處理多餘的空格。ES2020 增長了兩個功能：.trimStart() 和 trimEnd() 方法能夠幫你處理這些雜事。程序員

它們均可以幫助你修剪或刪除給定字符串中的空格。 trimStart() 刪除字符串開頭的全部空格。trimEnd（）將刪除字符串末尾的全部空格。不過要是想去除兩邊的空格呢？面試

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

// 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。app

// 建立一個數組:
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() 方法。如今可以對那些有問題的代碼段進行分類，而且能夠將它們轉換回其原始表示形式。

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()'