2022年01月31日发布ES2019值得的8个有用功能

大家好，今日小科来聊聊一篇关于2022年01月31日整理发布：分享ES2019中值得收藏的8个有用功能的文章，现在让我们往下看看吧！

本文介绍了ES2019中八个非常有用的功能。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

ES2019规范是JavaScript的一个小扩展，但它仍然带来了一些有趣的功能。本文向您展示了ES2019的八个功能，这些功能可以让您的开发更加容易。

String.prototype.trimStart()和String.prototype.trimEnd()有时候我们在处理字符串的时候需要处理额外的空格。ES2020增加了两个功能：trimStart()和trimEnd()方法来帮助你处理这些琐碎的事情。

它们可以帮助您修剪或删除给定字符串中的空格。TrimStart()删除字符串开头的所有空格。TrimEnd()将删除字符串末尾的所有空格。但是如果你想去掉两边的空格呢？

有两种选择。首先是同时使用这两个ES2019功能。第二种是使用另一种字符串方法trim()。无论哪种方式都能给你想要的结果。

//String.prototype.trimStart()示例：

//处理不带空格的字符串：

“JavaScript”。trimStart()

//输出：

//'JavaScript '

//处理以空格开头的字符串：

“JavaScript”。trimStart()

//输出：

//'JavaScript '

//两边都有空格的字符串

“JavaScript”。trimStart()

//输出：

//'JavaScript '

//以空格结尾的字符串

“JavaScript”。trimStart()

//输出：

//'JavaScript '

//String.prototype.trimEnd()示例：

//处理不带空格的字符串：

“JavaScript”。trimEnd()

//输出：

//'JavaScript '

//处理以空格开头的字符串：

“JavaScript”。trimEnd()

//输出：

//' JavaScript '

//两边都有空格的字符串

“JavaScript”。trimEnd()

//输出：

//' JavaScript '

//以空格结尾的字符串

“JavaScript”。trimEnd()

//输出：

//“JAVAScript”函数的toString()方法已存在一段时间。它的功能是让你打印函数的代码。ES2019在处理注释和特殊字符(如空格)的方式上有所不同。

过去，toString()方法删除了注释和空格。所以函数的打印版本可能看起来与原始代码不同。2019年，这种情况不会再发生。它返回的值将与原始值匹配，包括注释和特殊字符。

ES2019之前的：

函数myFunc/*这真的是一个好名字吗？*/() {

/*现在，该怎么办？*/

}

myFunc.toString()

//输出：

//'函数myFunc() {} '

//ES2019:

函数myFunc/*这真的是一个好名字吗？*/() {

/*现在，该怎么办？*/

}

myFunc.toString()

//输出：

//'函数myFunc/*这真的是个好名字吗？*/() {

///*现在，该怎么办？*/

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

这篇好文章是转载于：知行礼动