本篇文章给大家介绍ES2019 中 8 个非常有用的功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
ES2019 规范是对 JavaScript的小规模扩展,但仍带来了一些有趣的功能。本文向你展示八个 ES2019 的功能,这些功能可以使你的开发变得更轻松。
有时我们在处理字符串时需要处理多余的空格。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'
函数的 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? */ // }"
数组是 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' ]
除了 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' ]
当需要把某个对象转换为数组时,可以用 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 // }
以前使用 try ... catch
时,还必须使用绑定。即使没有使用该异常,你也必须将其作为参数传递。 在 ES2019 种,如果不想使用该异常,则可以使用不带参数的 catch 块。
// ES2019 之前: try { // Do something. } catch (e) { //忽略必需的e参数 //如果你不想用它,也应该保留。 } // ES2019: try { // Do something. } catch { // 不需要添加任何参数 }
过去,当对包含特定字符的东西使用 JSON.stringify()
时,会得到格式不正确的 Unicode 字符串。从 U+D800到 U+DFFF 的编码段会变成 “�”。更糟的是没办法把这些错误的字符变回原样。
ES2019 修复了 JSON.stringify()
方法。现在能够对那些有问题的代码段进行分类,并且可以将它们转换回其原始表示形式。
符号是在 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: // ''
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中文网其他相关文章!