ES10 的新特性：Object.fromEntries、Array.flatMap() 和 String 的 trimStart() 和 trimEnd()-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一门不断发展的语言，每年都会有新的 ECMAScript 版本推出，其中最新的版本是 ES10。ES10 在前端开发中新增了许多新特性，本文主要介绍其中三个：Object.fromEntries、Array.flatMap() 和 String 的 trimStart() 和 trimEnd()。

Object.fromEntries

在 ES10 之前，如果我们想把一个数组转换成对象，可以使用 reduce() 函数来实现。比如下面这个例子：

const fruits = [['apple', 1], ['banana', 2], ['cherry', 3]]
const obj = fruits.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
console.log(obj) // { apple: 1, banana: 2, cherry: 3 }

在 ES10 中，我们可以使用 Object.fromEntries() 函数来更简单地实现相同的功能。Object.fromEntries() 函数接收一个二维数组，每个数组里面包含两个元素，第一个元素作为对象属性名，第二个元素作为属性值，最终返回一个以数组元素作为属性的对象。例如：

const fruits = [['apple', 1], ['banana', 2], ['cherry', 3]]
const obj = Object.fromEntries(fruits)
console.log(obj) // { apple: 1, banana: 2, cherry: 3 }

从上面的例子可以看到，Object.fromEntries() 的使用非常简单，不需要使用 reduce()，代码更加简洁易懂。

Array.flatMap()

在 ES5 中，我们可以使用 array.map() 函数来遍历数组，并返回一个新的数组。而 ES6 中新增的 array.flat() 可以将多维数组转换成一维数组。在 ES10 中，我们可以使用 array.flatMap() 函数来实现类似于 array.map() 和 array.flat() 的功能，即先遍历数组，并对每个元素进行操作，最后将结果拍平成一个一维数组。例如：

const arr = [1, 2, 3, 4]
const result = arr.flatMap(x => [x * 2])
console.log(result) // [2, 4, 6, 8]

从上面的例子可以看到，“一对多”的映射关系可以使用 flatMap() 进行处理。

String 的 trimStart() 和 trimEnd()

在 ES10 中，增加了 String.prototype.trimStart() 和 String.prototype.trimEnd() 函数，分别用于删除字符串开头和结尾的空格。这两个函数的使用很容易，下面是一个简单的示例：

const str = '   hello world   '
const trimmedStart = str.trimStart()
const trimmedEnd = str.trimEnd()
console.log(trimmedStart) // 'hello world   '
console.log(trimmedEnd) // '   hello world'

String.prototype.trimStart() 可以简化常见的字符串操作。例如，在处理 URL 时，我们经常需要移除 URL 的协议部分：http:// 和 https://。我们可以通过 String.prototype.startsWith() 函数和正则表达式来实现：

const url = 'https://www.example.com/path/to/resource'
const trimmedUrl = url.startsWith('http://') ? url.slice(7) :
                   url.startsWith('https://') ? url.slice(8) : url
console.log(trimmedUrl) // 'www.example.com/path/to/resource'

使用 String.prototype.trimStart() 函数，我们可以把代码简化为：

const url = 'https://www.example.com/path/to/resource'
const trimmedUrl = url.trimStart('https://', 'http://')
console.log(trimmedUrl) // 'www.example.com/path/to/resource'

总结

ES10 中的这几个新特性都是前端开发中非常实用的。Object.fromEntries() 函数可以方便地将二维数组转换成对象，Array.flatMap() 函数可以实现先映射再拍平的功能，String.prototype.trimStart() 和 String.prototype.trimEnd() 函数可以方便地删除字符串开头和结尾的空格。我们应该掌握这些新特性，并在实际开发中灵活应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65498e6f7d4982a6eb3c1e82