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 个非常有用的功能
作者:疯狂的技术宅

ES2019 中 8 个非常有用的功能相关推荐

  1. Javascript在ES2019中又新增了8个功能!你还学的动么?

    苦逼学习的ES6还没玩溜呢,现在又更新了8个功能,不得不感叹前端在这几年的快速发展. 不过好在,基础夯实之后,再学习新的内容,分分钟的事情. 废话不多说,直接来看这回又更新了些什么幺蛾子. Catch ...

  2. Eclipse中10个最有用的快捷键组合

    一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ctrl+shift+r:打开资源 这可能 ...

  3. Eclipse中10个最有用的快捷键组合(转)

    Eclipse中10个最有用的快捷键组合 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask ...

  4. WinXP中鲜为人知的28项隐藏功能

    WinXP中鲜为人知的28项隐藏功能 Windows的很多隐藏功能,都没有直接体现在菜单或者系统的开始项中,而是直接以文件的形式存在于Windows安装目录中,今天,笔者就带大家认识一下它们吧. 1. ...

  5. Element Table 可以实现哪些常见的有用的功能

    最近项目中频繁使用 table 功能,因为 UI 框架使用的又是 Element UI,于是总结下在 Element 下 el-table 组件使用技巧. 1.行背景色 table 组件提供了 row ...

  6. 每个人都应该使用的Python 3中被忽略的3个功能

    重点 (Top highlight) Python 3 has been around for a while now, and most developers - especially those ...

  7. 如何在Swift中使用CoreData设置有用的自动完成UITextField

    by Emrick Sinitambirivoutin 由Emrick Sinitambirivoutin 如何在Swift中使用CoreData设置有用的自动完成UITextField (How t ...

  8. 太方便 微信能精准搜图片了!网友:出点有用的功能有多难?

    上个月底,微信向iOS用户发布了8.0.18正式版,首次支持朋友圈发送超过9张照片,现在可以发最多20张照片了,且超过9张之后会显示制作成新的视频.而在近日,正当部分用户还没用上这些功能的时候,微信& ...

  9. 还可以这么玩:盘点iOS 11中Siri的12项新功能

    本文讲的是 还可以这么玩:盘点iOS 11中Siri的12项新功能, iOS 11的首次亮相带来了一些变化,其中包括增强现实游戏和更好的iMessage体验,但或许操作系统在任何方面的改变都不如Sir ...

最新文章

  1. 三星电子电容器件识别
  2. 压力与动力是否成正比?
  3. 例1:反转一个三位整数
  4. 亲自动手用HTK实现YES NO孤立词识别
  5. Saltstack-7:返回
  6. 关于SharePoint解决方案开发模型的凌乱文章…
  7. Kubernetes 详解
  8. php基础-基本语法
  9. pycharm python InvalidVersionSpecError: Invalid version spec: =2.7
  10. [Android 5.1] 多用户管理UserManager相关整理
  11. 用c语言编程点亮7个二极管,单片机c语言编程二极管_单片机c语言编程_单片机c语言编程led...
  12. openwrt 启动盘制作 linux,U盘启动OpenWRT教程,OpenWRT从U盘启动
  13. Oracle数据库:创建和删除视图view,简单和复杂视图,内建视图,topN分析,oracle分页查询
  14. 贴片电阻有哪几类封装尺寸?
  15. FileZilla FTP服务器源代码分析
  16. 论目前最好的中文搜索引擎
  17. 基于MRS-Hudi构建数据湖的典型应用场景介绍
  18. python歌词分析_Python 词云分析周杰伦新歌《说好不哭》
  19. 讲故事的技艺:《极乐迪斯科》中的叙事与机制
  20. Python网络爬虫:基础知识Beautiful Soup

热门文章

  1. Mysql8【有与无】M12.函数和运算符
  2. 【golang音频库】发现了一个特别棒的音频库,beep,使用docker方式驱动设备,可以使用golang进行控制音频设备,播放音乐。
  3. TX Text Control .NET Server for ASP.NET 31.X
  4. python怎么通过手机号定位_6.1 python+appium元素定位方式(登录app)
  5. STM32CubeMX和华为LiteOS Studio开发STM32
  6. Mysql索引,SQL优化
  7. 2020-01-29
  8. Cherry邀我做善事
  9. SimpliciTI 网络协议栈
  10. NewWare Day4 WPS表格数据处理