ES2019 中8个非常有用的功能

时间:2021-05-02

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之前:

functionmyFunc(){

}

myFunc.toString()

//Output:

//"functionmyFunc(){}"

//ES2019:

functionmyFunc(){

}

myFunc.toString()

//Output:

//"functionmyFunc(){

//

//}"

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

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

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

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

//创建一个数组:

constmyArray=['JavaScript',['C','C++',['Assembly',['Bytecode']]]]

//展平一级:

letmyFlatArray=myArray.flat(1)

//输出:

console.log(myFlatArray)

//Output:

//['JavaScript','C','C++',['Assembly',['Bytecode']]]

//用参数Infinity展平:

letmyInfiniteFlatArray=myArray.flat(Infinity)

//输出:

console.log(myInfiniteFlatArray)

//Output:

//['JavaScript','C','C++','Assembly','Bytecode']

Array.prototype.flatMap()

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

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

//创建数组:

constmyArray=['Oneword','Twowords','Threewords']

//用map()将数组中的所有字符串拆分为单词:

//注意:这将会创建多维数组。

constmyMappedWordArray=myArray.map(str=>str.split(''))

console.log(myMappedWordArray)

//Output:

//[['One','word'],['Two','words'],['Three','words']]

//flatMap()的例子:

constmyArray=['Oneword','Twowords','Threewords']

//用map()将数组中的所有字符串拆分为单词:

//注意:这将会创建多维数组。

constmyFlatWordArray=myArray.flatMap(str=>str.split(''))

console.log(myFlatWordArray)

//Output:

//['One','word','Two','words','Three','words']

Object.fromEntries()

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

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

//把数组转换为对象:

//创建数组:

constmyArray=[['name','Joe'],['age',33],['favoriteLanguage','JavaScript']]

constmyObj=Object.fromEntries(myArray)

console.log(myObj)

//Output:

//{

//name:'Joe',

//age:33,

//favoriteLanguage:'JavaScript'

//}

//把Map转换为对象:

//创建map:

constmyMap=newMap(

[['name','Spike'],['species','dog'],['age',3]]

)

constmyObj=Object.fromEntries(myMap)

console.log(myObj)

//Output:

//{

//name:'Spike',

//species:'dog',

//age:3

//}

可选的 catch 绑定

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

//ES2019之前:

try{

//Dosomething.

}catch(e){

//忽略必需的e参数

//如果你不想用它,也应该保留。

}

//ES2019:

try{

//Dosomething.

}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并添加描述:

//注意:描述是"Myfirstsymbol."

constmySymbol=Symbol('Myfirstsymbol.')

//输出description属性的值:

console.log(mySymbol.description)

//Output:

//'Myfirstsymbol.'

//读取不存在的Symbol:

console.log(Symbol().description)

//Output:

//undefined

//读取定义为空字符串的描述:

console.log(Symbol('').description)

//Output:

//''

Symbol.prototype.toString()

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

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

//创建带有描述的Symbol:

constmySymbol=Symbol('REAMDE.')

//输出description属性的值:

console.log(mySymbol.toString())

//Output:

//'Symbol(REAMDE.)'

//读取不存在的Symbol:

console.log(Symbol().toString())

//Output:

//'Symbol()'

//读取定义为空字符串的描述:

console.log(Symbol('').toString())

//Output:

//'Symbol()'

原文地址:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247499048&idx=1&sn=bd34b2f365a13bea81e7c3739fd9bd29&chksm=eb6bd873dc1c51656d85eee5f14ec08ecad5ecbf2c7cc2e059940fa9926dfa3a9baa4a945580&mpshare=1&s

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章