首頁 > web前端 > js教程 > 主體

分享ES2019值得收藏的8個實用功能

青灯夜游
發布: 2021-04-23 19:39:27
轉載
1389 人瀏覽過

這篇文章要為大家介紹ES2019 中 8 個非常有用的功能。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

分享ES2019值得收藏的8個實用功能

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

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() 方法。現在能夠對那些有問題的程式碼段進行分類,並且可以將它們轉換回其原始表示形式。

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()'
登入後複製

更多编程相关知识,可访问:编程入门!!

以上是分享ES2019值得收藏的8個實用功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!