ES2019中值得收藏的功能有哪些

這篇文章主要介紹了ES2019中值得收藏的功能有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

ES2019 規(guī)范是對(duì) JavaScript的小規(guī)模擴(kuò)展，但仍帶來了一些有趣的功能。本文向你展示八個(gè) ES2019 的功能，這些功能可以使你的開發(fā)變得更輕松。

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

有時(shí)我們?cè)谔幚碜址畷r(shí)需要處理多余的空格。ES2020 增加了兩個(gè)功能：.trimStart() 和 trimEnd() 方法可以幫你處理這些瑣事。

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

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

// String.prototype.trimStart() 例子:
// 處理不帶空格的字符串：
'JavaScript'.trimStart()
// Output:
//'JavaScript'

// 處理以空格開頭的字符串：
' JavaScript'.trimStart()
// Output:
//'JavaScript'

// 兩邊都留有空格的字符串
' JavaScript '.trimStart()
// Output:
//'JavaScript '

// 以空格結(jié)尾的字符串
'JavaScript '.trimStart()
// Output:
//'JavaScript '


// String.prototype.trimEnd() 例子:
// 處理不帶空格的字符串：
'JavaScript'.trimEnd()
// Output:
//'JavaScript'

// 處理以空格開頭的字符串：
' JavaScript'.trimEnd()
// Output:
//' JavaScript'

// 兩邊都留有空格的字符串
' JavaScript '.trimEnd()
// Output:
//' JavaScript'

// 以空格結(jié)尾的字符串
'JavaScript '.trimEnd()
// Output:
//'JavaScript'

Function.prototype.toString()

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

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

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

數(shù)組是 JavaScript 的基本組成部分之一。它們有時(shí)會(huì)引起很多問題。當(dāng)你必須要處理多維數(shù)組時(shí)尤其如此。甚至將多維數(shù)組轉(zhuǎn)換為一維這樣看似簡單的任務(wù)也可能很困難。

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

但是頁可以指定級(jí)數(shù)，并在調(diào)用時(shí)作為參數(shù)傳遞。如果不確定需要多少級(jí)，也可以使用 Infinity。

// 創(chuàng)建一個(gè)數(shù)組:
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]]

// 展平一級(jí):
let myFlatArray = myArray.flat(1)

// 輸出:
console.log(myFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ]

// 用參數(shù) Infinity 展平:
let myInfiniteFlatArray = myArray.flat(Infinity)

// 輸出:
console.log(myInfiniteFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ]

Array.prototype.flatMap()

除了 flat() 方法之外，還有 flatMap()?？梢园阉醋魇?flat() 的高級(jí)版本。區(qū)別在于 flatMap() 方法把 flat() 與 map() 結(jié)合了起來。在展平數(shù)組時(shí)，可以調(diào)用回調(diào)函數(shù)。

這樣就可以在展平過程中使用原始數(shù)組中的每個(gè)元素。當(dāng)在對(duì)數(shù)組進(jìn)行展平操作的同時(shí)又要修改內(nèi)容時(shí)很方便。

// 創(chuàng)建數(shù)組:
const myArray = ['One word', 'Two words', 'Three words']

// 用 map() 將數(shù)組中的所有字符串拆分為單詞：
// 注意：這將會(huì)創(chuàng)建多維數(shù)組。
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() 將數(shù)組中的所有字符串拆分為單詞：
// 注意：這將會(huì)創(chuàng)建多維數(shù)組。
const myFlatWordArray = myArray.flatMap(str => str.split(' '))

console.log(myFlatWordArray)
// Output:
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ]

Object.fromEntries()

當(dāng)需要把某個(gè)對(duì)象轉(zhuǎn)換為數(shù)組時(shí)，可以用 entries() 來完成。但是想要反向操作的話就困難了。ES2019 提供了 fromEntries() 來輕松解決這個(gè)問題。

這個(gè)方法的作用很簡單。它需要鍵值對(duì)的可迭代形式，例如數(shù)組或 Map，然后將其轉(zhuǎn)換為對(duì)象。

// 把數(shù)組轉(zhuǎn)換為對(duì)象:
// 創(chuàng)建數(shù)組:
const myArray = [['name', 'Joe'], ['age', 33], ['favoriteLanguage', 'JavaScript']]
const myObj = Object.fromEntries(myArray)
console.log(myObj)
// Output:
// {
//   name: 'Joe',
//   age: 33,
//   favoriteLanguage: 'JavaScript'
// }


// 把 Map 轉(zhuǎn)換為對(duì)象:
// 創(chuàng)建 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 時(shí)，還必須使用綁定。即使沒有使用該異常，你也必須將其作為參數(shù)傳遞。 在 ES2019 種，如果不想使用該異常，則可以使用不帶參數(shù)的 catch 塊。

// ES2019 之前:
try {
  // Do something.
} catch (e) {
    //忽略必需的e參數(shù)
       //如果你不想用它，也應(yīng)該保留。
}

// ES2019:
try {
  // Do something.
} catch {
  // 不需要添加任何參數(shù)
}

格式正確的 JSON.stringify()

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

ES2019 修復(fù)了 JSON.stringify() 方法?，F(xiàn)在能夠?qū)δ切┯袉栴}的代碼段進(jìn)行分類，并且可以將它們轉(zhuǎn)換回其原始表示形式。

Symbol.prototype.description

符號(hào)是在 ES2015（ES6）中引入的新數(shù)據(jù)類型。它們通常用于標(biāo)識(shí)對(duì)象屬性。 ES2019 增加了 description 屬性。這個(gè)屬性是只讀的，無法更改它的值。它用來返回給定符號(hào)的描述。

要牢記兩點(diǎn)。首先，創(chuàng)建符號(hào)時(shí)描述不是必須的，而是可選的。所以當(dāng)你嘗試訪問 description 時(shí)，可能會(huì)得到除 undefined 之外的任何信息。如果你嘗試訪問不帶描述的符號(hào)描述，則會(huì)得到 undefined（未定義）信息。

第二點(diǎn)是 description 是對(duì)符號(hào)本身的描述。它不是符號(hào)的標(biāo)識(shí)符。這意味著你不能使用現(xiàn)有的描述（即 description 屬性的值）來訪問現(xiàn)有的符號(hào)。它只是為了更容易識(shí)別正在你正在使用的符號(hào)。

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

// 創(chuàng)建帶有描述的 Symbol：
// 創(chuàng)建 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() 方法提供了另一種讀取符號(hào)描述的方式。它的缺點(diǎn)是在返回的字符串中還包含 Symbol()。另一個(gè)區(qū)別是 toString() 方法永遠(yuǎn)不會(huì)返回不存在的undefined 描述。

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

// 創(chuàng)建帶有描述的 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()'

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ES2019中值得收藏的功能有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!