ES2019 中8个非常有用的功能

开发 前端
ES2019 规范是对 JavaScript的小规模扩展,但仍带来了一些有趣的功能。本文向你展示八个 ES2019 的功能,这些功能可以使你的开发变得更轻松。

ES2019 规范是对 JavaScript的小规模扩展,但仍带来了一些有趣的功能。本文向你展示八个 ES2019 的功能,这些功能可以使你的开发变得更轻松。

[[386262]]

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

有时我们在处理字符串时需要处理多余的空格。ES2020 增加了两个功能:.trimStart()和 trimEnd() 方法可以帮你处理这些琐事。

它们都可以帮助你修剪或删除给定字符串中的空格。trimStart() 删除字符串开头的所有空格。trimEnd()将删除字符串末尾的所有空格。不过要是想去除两边的空格呢?

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

  1. // String.prototype.trimStart() 例子: 
  2. // 处理不带空格的字符串: 
  3. 'JavaScript'.trimStart() 
  4. // Output: 
  5. //'JavaScript' 
  6.  
  7. // 处理以空格开头的字符串: 
  8. ' JavaScript'.trimStart() 
  9. // Output: 
  10. //'JavaScript' 
  11.  
  12. // 两边都留有空格的字符串 
  13. ' JavaScript '.trimStart() 
  14. // Output: 
  15. //'JavaScript ' 
  16.  
  17. // 以空格结尾的字符串 
  18. 'JavaScript '.trimStart() 
  19. // Output: 
  20. //'JavaScript ' 
  21.  
  22.  
  23. // String.prototype.trimEnd() 例子: 
  24. // 处理不带空格的字符串: 
  25. 'JavaScript'.trimEnd() 
  26. // Output: 
  27. //'JavaScript' 
  28.  
  29. // 处理以空格开头的字符串: 
  30. ' JavaScript'.trimEnd() 
  31. // Output: 
  32. //' JavaScript' 
  33.  
  34. // 两边都留有空格的字符串 
  35. ' JavaScript '.trimEnd() 
  36. // Output: 
  37. //' JavaScript' 
  38.  
  39. // 以空格结尾的字符串 
  40. 'JavaScript '.trimEnd() 
  41. // Output: 
  42. //'JavaScript' 

Function.prototype.toString()

函数的 toString() 方法已经存在了一段时间。它的作用是使你可以打印函数的代码。ES2019 的不同之处在于它处理注释和特殊字符(例如空格)的方式。

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

  1. // ES2019 之前: 
  2. function myFunc/* is this really a good name? */() { 
  3.   /* Now, what to do? */ 
  4.  
  5. myFunc.toString() 
  6. // Output: 
  7. // "function myFunc() {}" 
  8.  
  9.  
  10. // ES2019: 
  11. function myFunc/* is this really a good name? */() { 
  12.   /* Now, what to do? */ 
  13.  
  14. myFunc.toString() 
  15. // Output: 
  16. // "function myFunc/* is this really a good name? */() { 
  17. //   /* Now, what to do? */ 
  18. // }" 

Array.prototype.flat()和Array.prototype.flatMap()

数组是 JavaScript 的基本组成部分之一。它们有时会引起很多问题。当你必须要处理多维数组时尤其如此。甚至将多维数组转换为一维这样看似简单的任务也可能很困难。

好消息是,ES2019 的两个功能使这种操作变得更容易。第一个是 flat() 方法。在多维数组上使用时,它将转换为一维。默认情况下,flat()只会将数组展平一级。

但是页可以指定级数,并在调用时作为参数传递。如果不确定需要多少级,也可以使用 Infinity。

  1. // 创建一个数组: 
  2. const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]] 
  3.  
  4. // 展平一级: 
  5. let myFlatArray = myArray.flat(1) 
  6.  
  7. // 输出: 
  8. console.log(myFlatArray) 
  9. // Output: 
  10. // [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ] 
  11.  
  12. // 用参数 Infinity 展平: 
  13. let myInfiniteFlatArray = myArray.flat(Infinity) 
  14.  
  15. // 输出: 
  16. console.log(myInfiniteFlatArray) 
  17. // Output: 
  18. // [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ] 

Array.prototype.flatMap()

除了 flat() 方法之外,还有 flatMap()。可以把它看作是 flat() 的高级版本。区别在于 flatMap() 方法把 flat() 与 map() 结合了起来。在展平数组时,可以调用回调函数。

这样就可以在展平过程中使用原始数组中的每个元素。当在对数组进行展平操作的同时又要修改内容时很方便。

  1. // 创建数组: 
  2. const myArray = ['One word', 'Two words', 'Three words'] 
  3.  
  4. // 用 map() 将数组中的所有字符串拆分为单词: 
  5. // 注意:这将会创建多维数组。 
  6. const myMappedWordArray = myArray.map(str => str.split(' ')) 
  7.  
  8. console.log(myMappedWordArray) 
  9. // Output: 
  10. // [ [ 'One', 'word' ], [ 'Two', 'words' ], [ 'Three', 'words' ] ] 
  11.  
  12.  
  13. // flatMap() 的例子: 
  14. const myArray = ['One word', 'Two words', 'Three words'] 
  15.  
  16. // 用 map() 将数组中的所有字符串拆分为单词: 
  17. // 注意:这将会创建多维数组。 
  18. const myFlatWordArray = myArray.flatMap(str => str.split(' ')) 
  19.  
  20. console.log(myFlatWordArray) 
  21. // Output: 
  22. // [ 'One', 'word', 'Two', 'words', 'Three', 'words' ] 

Object.fromEntries()

当需要把某个对象转换为数组时,可以用 entries() 来完成。但是想要反向操作的话就困难了。ES2019 提供了 fromEntries() 来轻松解决这个问题。

这个方法的作用很简单。它需要键值对的可迭代形式,例如数组或 Map,然后将其转换为对象。

  1. // 把数组转换为对象: 
  2. // 创建数组: 
  3. const myArray = [['name', 'Joe'], ['age', 33], ['favoriteLanguage', 'JavaScript']] 
  4. const myObj = Object.fromEntries(myArray) 
  5. console.log(myObj) 
  6. // Output: 
  7. // { 
  8. //   name: 'Joe', 
  9. //   age: 33, 
  10. //   favoriteLanguage: 'JavaScript' 
  11. // } 
  12.  
  13.  
  14. // 把 Map 转换为对象: 
  15. // 创建 map: 
  16. const myMap = new Map( 
  17.   [['name', 'Spike'], ['species', 'dog'], ['age', 3]] 
  18. const myObj = Object.fromEntries(myMap) 
  19. console.log(myObj) 
  20. // Output: 
  21. // { 
  22. //   name: 'Spike', 
  23. //   species: 'dog', 
  24. //   age: 3 
  25. // } 

可选的 catch 绑定

以前使用 try ... catch 时,还必须使用绑定。即使没有使用该异常,你也必须将其作为参数传递。在 ES2019 种,如果不想使用该异常,则可以使用不带参数的 catch 块。

  1. // ES2019 之前: 
  2. try { 
  3.   // Do something. 
  4. } catch (e) { 
  5.  //忽略必需的e参数 
  6.     //如果你不想用它,也应该保留。 
  7.  
  8. // ES2019: 
  9. try { 
  10.   // Do something. 
  11. } catch { 
  12.   // 不需要添加任何参数 

格式正确的 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。

  1. // 创建带有描述的 Symbol: 
  2. // 创建 Symbol 并添加描述: 
  3. //注意:描述是"My first symbol." 
  4. const mySymbol = Symbol('My first symbol.') 
  5.  
  6. // 输出 description 属性的值: 
  7. console.log(mySymbol.description) 
  8. // Output: 
  9. // 'My first symbol.' 
  10.  
  11.  
  12. // 读取不存在的 Symbol: 
  13. console.log(Symbol().description) 
  14. // Output: 
  15. // undefined 
  16.  
  17.  
  18. // 读取定义为空字符串的描述: 
  19. console.log(Symbol('').description) 
  20. // Output: 
  21. // '' 

Symbol.prototype.toString()

toString() 方法提供了另一种读取符号描述的方式。它的缺点是在返回的字符串中还包含 Symbol()。另一个区别是 toString() 方法永远不会返回不存在的undefined描述。

使用 description 的另一个原因是:如果你有一个没有说明的 Symbol 并用了 toString() 方法,仍将得到 Symbol() 部分。如果描述为空字符串,也将获得此信息。这样就基本上不可能区分不存在的描述和用作描述的空字符串。

  1. // 创建带有描述的 Symbol: 
  2. const mySymbol = Symbol('REAMDE.') 
  3.  
  4. // 输出 description 属性的值: 
  5. console.log(mySymbol.toString()) 
  6. // Output: 
  7. // 'Symbol(REAMDE.)' 
  8.  
  9. // 读取不存在的 Symbol: 
  10. console.log(Symbol().toString()) 
  11. // Output: 
  12. // 'Symbol()' 
  13.  
  14.  
  15. // 读取定义为空字符串的描述: 
  16. console.log(Symbol('').toString()) 
  17. // Output: 
  18. // 'Symbol()' 

 

责任编辑:赵宁宁 来源: 前端先锋
相关推荐

2013-11-05 10:03:22

Eclipse功能

2012-03-01 09:15:41

HTML 5

2020-10-29 10:00:55

Python函数文件

2011-07-07 17:16:43

PHP

2017-08-02 13:32:18

编程Java程序片段

2009-05-18 16:58:56

Java代码片段

2009-03-24 14:23:59

PHP类库PHP开发PHP

2023-02-19 15:22:22

React技巧

2022-09-02 23:08:04

JavaScript技巧开发

2023-06-13 15:15:02

JavaScript前端编程语言

2018-08-03 10:02:05

Linux命令

2013-08-21 10:31:22

HTML5工具

2013-06-14 14:57:09

Java基础代码

2013-08-12 15:00:24

LinuxLinux命令

2009-02-09 11:20:06

Windows7Windows

2022-06-27 19:01:04

Python应用程序数据

2013-08-13 10:46:51

LinuxLinux命令

2012-04-17 09:44:08

JavaScript

2014-09-18 09:50:32

Ruby on Rai

2015-08-12 11:09:42

开发者设计原则
点赞
收藏

51CTO技术栈公众号