ES10 中 Array.flatMap() 方法的理解与区别

背景

随着前端技术的不断发展，JavaScript 在 ES6、ES7、ES8 等版本中也不断推出新的 API 以适应新的应用场景。在 ES10 中，Array 就新增了一个方法：flatMap()，它与 Array.map() 和 Array.flat() 方法相似，却有所不同。在本文中，我们将探讨这三个方法之间的区别。

概述

在介绍这三个方法之前，我们先来看一下它们的作用：

• Array.map()：将数组中的每个元素进行操作并生成一个新的数组。常用于将数据转换为另一种形式。

• Array.flat()：将嵌套数组“拍平”，即将多维数组转换为一维数组。

• Array.flatMap()：将数组中的每个元素进行操作，并且可以将操作后的结果“拍平”，即将一维数组转换为一维数组。

通过以上的概述，我们可以看出这三个方法的相似点和不同点：

• 相似点：它们都是对数组进行操作，且返回操作后的数组。

• 不同点：map() 和 flatMap() 都可以操作数组元素，并且 map() 只能进行单纯的操作，而 flatMap() 可以将操作后的结果拍平。而 flat() 只能将多维数组转换为一维数组，不能进行操作。

使用

接下来我们将分别简单介绍这三个方法的使用以及示例。

1. Array.map()

map() 用于对数组中的每个元素进行操作，并返回操作后的新数组。比如将一个数组中的每个字符串转换成大写字母：

let arr = ['hello', 'world', 'js']
let result = arr.map(str => str.toUpperCase())
console.log(result) // ["HELLO", "WORLD", "JS"]

2. Array.flat()

flat() 用于将多维数组转换为一维数组。比如将一个二维数组转换为一维数组：

let arr = [[1,2], [3,4], [5,6]]
let result = arr.flat()
console.log(result) // [1, 2, 3, 4, 5, 6]

3. Array.flatMap()

flatMap() 将数组中的每个元素进行操作，并将操作后的结果拍平。比如将一个字符串数组转换成一个包含每个字符串的字符数的数组：

let arr = ['hello', 'world', 'js']
let result = arr.flatMap(str => str.split('').map(char => char.length))
console.log(result) // [5, 1, 5, 5, 1, 2]

首先对每个字符串使用 split() 方法将其拆分为字符数组，再对每个字符求其长度，最终将所有长度拍平到一个一维数组当中。

总结

在理解 ES10 中的 Array.flatMap() 方法以及其与 Array.map()、Array.flat() 方法之间的区别之后，我们可以根据不同的需求选择不同的方法来操作数组。map() 和 flatMap() 对于拥有较复杂操作需求的数组操作较为合适，而 flat() 对于需要将多维数组转换为一维数组的操作较为适合。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f57021f6b2d6eab3e26e27