文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES2019中值得收藏的功能有哪些

2023-06-14 20:23

关注

这篇文章主要介绍了ES2019中值得收藏的功能有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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() {  }myFunc.toString()// Output:// "function myFunc() {}"// ES2019:function myFunc() {  }myFunc.toString()// Output:// "function 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()'

感谢你能够认真阅读完这篇文章,希望小编分享的“ES2019中值得收藏的功能有哪些”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯