快速了解 JavaScript ES2019 的五个新增特性

2021-04-13 13:32:10 阅读：224 来源： 互联网

标签：flat JavaScript 五个数组 Output ES2019 方法

ES2019 规范是对 JavaScript 的一个较小的补充，但它仍然带来了一些有用的功能。本文将向你展示五个 ES2019 新增的特性，这些特性或许可以让你的编程轻松一点。这些特性包括 trimStart()、trimEnd()、flat()、flatMap()、Object.fromEntries() 等。

字符串的 trimStart 和 trimEnd 方法

这两个方法都可以帮助你从给定的字符串中删除空白空间。第一个方法，trimStart() 将删除字符串开头的所有空白。第二个，trimEnd() 将删除字符串末尾的所有空白。如果你需要去除两边的空白，一种方法是同时使用这两个方法，另一种方法是使用 trim() 这个字符串方法。

'JavaScript'.trimStart()
// Output:
//'JavaScript'

' JavaScript'.trimStart()
// Output:
//'JavaScript'

' JavaScript '.trimStart()
// Output:
//'JavaScript '

'JavaScript '.trimStart()
// Output:
//'JavaScript '

' JavaScript'.trimEnd()
// Output:
//' JavaScript'

' JavaScript '.trimEnd()
// Output:
//' JavaScript'

'JavaScript '.trimEnd()
// Output:
//'JavaScript'

函数的 toString 方法

任何对象都有 toString() 方法，函数也不例外。该方法的作用是允许你打印你或其他人编写的函数的代码。在 ES2019 之前，toString() 方法会删除注释和空白。因此，该函数的打印的版本可能与原始代码不一样。ES2019 发布后，toString() 方法返回的值将与原始值一致，包括注释、空白和特殊字符。

// 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? */
// }"

数组的 flat 和 flatMap 方法

数组是 JavaScript 中的基本部分之一，它们有时也会让人头疼，尤其是当你要处理多维数组的时候。比如将多维数组变成一维数组这样一个看似简单的事件。现在 ES2019 为数组提供的 flat() 和 flatMap() 方法可以让这个问题变得简单。

flat() 方法

第一个是 flat()，中文可以理解为展开或扁平化的意思。它的作用是把多维数组扁平化为一维数组。默认情况下，flat() 只会展开第一层。如果你需要扁平化更多的层数或深度，你可以指定一个层数或深度值，作为参数传递。如果你不确定多少层，你也可以使用 Infinity，表示有多少层展开多少展。

// 创建一个数组:
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]]

// 展开数组第一层
let myFlatArray = myArray.flat(1)
console.log(myFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ]

// 有多少层展开多少层
let myInfiniteFlatArray = myArray.flat(Infinity)
console.log(myInfiniteFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ]

flatMap() 方法

除了 flat() 方法外，还有 flatMap() 方法。你可以把这个方法看作是 flat() 的高级版本。不同的是，flatMap() 方法结合了 flat() 和 map() 方法。当你扁平化一个数组时，你可以调用一个回调函数。这允许你在扁平化的过程中对原数组内部的单个元素进行处理。当你想扁平化一个数组，但同时又想修改内容时，这就很方便了。

// 创建一个数组:
const myArray = ['One word', 'Two words', 'Three words']

// 将数组中的字符串使用空格分隔
// 注意：这会创建一个二维数组
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']

// 将数组中的字符串使用空格分隔
const myFlatWordArray = myArray.flatMap((str) => str.split(' '))
console.log(myFlatWordArray)
// Output:
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ]

Object.fromEntries() 方法

当你需要将一些对象转换为数组时，你可以用 entries() 方法来实现，但反过来将对象的数组合并为单个对象，在 ES2019 之前还没有一个现成的方法。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 转换为对象:
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 时，你必须把异常作为一个参数传递给 catch，即使你没有使用这个参数。ES2019 把这个参数变成可选项。如果你不想使用异常，你可以使用不带参数的 catch 块。

// ES2019 之前:
try {
  // Do something.
} catch (e) {
  // 没有用到异常参数 e
  // 但该参数不能省略
}

// ES2019:
try {
  // Do something.
} catch {
  // 没有用到异常参数，可以省略
}

小结

以上五个特性是我觉得比较有用的。除了这五个特性，ES2019 标准还增加了其它的特性或改进，本文没有全部列举出来，如果感兴趣可以查阅官方文档。

标签：flat,JavaScript,五个,数组,Output,ES2019,方法
来源： https://www.cnblogs.com/fehoney/p/14652743.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9