乐趣区

关于前端:ES2019-中-8-个非常有用的功能

jiezi

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()'

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

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

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版