区别 Array.flat() 和 Array.flatMap() - ES10 新的数组方法

在 ES10 中新增了两个数组方法：Array.flat() 和 Array.flatMap()。它们都可以用来处理嵌套数组，但在使用时需要注意它们之间的区别。

Array.flat()

Array.flat() 方法是用来将多维数组扁平化为一维数组的。它接受一个可选的参数 depth，表示扁平化的深度。如果不传递 depth，则默认为 1，只将多维数组扁平化一层。如果传递的 depth 大于数组的嵌套深度，则会将数组扁平化至最底层。

示例代码：

const arr = [1, 2, [3, 4, [5, 6]]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, [5, 6]]

在上面的示例代码中，原数组 arr 是一个三维数组，而经过一次扁平化后，变成了一个二维数组。

Array.flatMap()

Array.flatMap() 方法是 Array.map() 和 Array.flat() 方法的组合。它接受一个函数作为参数，这个函数会被应用到数组中的每个元素上，并返回一个新数组。然后，这个新数组会被扁平化成一维数组。

示例代码：

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

在上面的示例代码中，原数组 arr 中的每个元素都会被乘以 2，然后返回一个新数组 [2, 4, 6]。最后，这个新数组会被扁平化成一维数组。

区别

虽然 Array.flat() 和 Array.flatMap() 都可以用来将嵌套数组扁平化，但它们之间有一个重要的区别：

• Array.flat() 是将多维数组扁平化为一维数组。
• Array.flatMap() 是将数组中的每个元素转化为一个数组，然后将所有的数组扁平化为一维数组。

因此，当我们需要将多维数组扁平化时，应该使用 Array.flat() 方法。当我们需要对数组中的每个元素进行某种操作，并将所有操作结果扁平化为一维数组时，应该使用 Array.flatMap() 方法。

结论

在 ES10 中，我们可以使用 Array.flat() 和 Array.flatMap() 方法来更加方便地处理嵌套数组。在使用时应该注意它们之间的区别，以便选择正确的方法来实现我们的需求。学习和掌握这些新的数组方法，可以使我们更加高效地处理数组，提高代码质量和效率。

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