ES2019 中 8 个很是有用的功能

时间 2021-04-29

标签前端程序员面试 segmentfault 数组服务器微信多线程 app 框架栏目快乐工作繁體版

原文原文链接

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

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

有时咱们在处理字符串时须要处理多余的空格。ES2020 增长了两个功能：.trimStart() 和 trimEnd() 方法能够帮你处理这些杂事。程序员

它们均可以帮助你修剪或删除给定字符串中的空格。 trimStart() 删除字符串开头的全部空格。trimEnd（）将删除字符串末尾的全部空格。不过要是想去除两边的空格呢？面试

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

// 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。app

// 建立一个数组:
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()'

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...