前端问答：flat()和flatMap()有啥不同？

在JavaScript中，数组可以说是最常用的数据结构之一。然而，当你开始接触嵌套数组时，它们可能会变得相当复杂。幸运的是，ES2019为我们带来了两个非常实用的数组方法：

flat()

和

flatMap()

。这两个方法不仅让数组的处理变得更加优雅，还大大简化了对嵌套数组的操作。

接下来，我们将详细解析这两个方法的细节、它们之间的区别，以及在实际开发中的应用场景，并配上详细的代码示例，帮助你彻底掌握这两项技能。

什么是flat()方法？

想象一下，你手里有一盒装满了各种小盒子的快递箱。每个小盒子里可能又装着更小的盒子，甚至更小的盒子里还有东西。这时候，你想要快速找到所有的小东西，但是不想一个一个打开这些小盒子。

flat()

方法就像是一个神奇的压扁机，它能帮你把这些盒子压平，直到你看到所有东西为止。

使用方法

var newArray = arr.flat([depth]);

• arr: 需要压平的“盒子”（数组）。
• depth（可选）：压平的层数，也就是你想压多少层的小盒子，默认是1层。

示例1：简单压平一层

来看个例子：

let nestedArray = [1, [2, 3], [4, [5, 6]]];
let flattenedArray = nestedArray.flat();

console.log(flattenedArray); // 输出: [1, 2, 3, 4, [5, 6]]

在这里，

flat()

像是帮你压平了一层外面的小盒子。结果就是你可以直接看到2和3，4和

[5, 6]

这些元素，但是更里面的

[5, 6]

还得再打开。

示例2：多压几层

如果你想把盒子彻底压平，再来看这个例子：

let nestedArray = [1, [2, [3, [4, 5]]]];
let flattenedArray = nestedArray.flat(2);

console.log(flattenedArray); // 输出: [1, 2, 3, [4, 5]]

这里，我们用了

flat(2)

，表示希望把更深的两层盒子都压平。结果就是，除了最里面的那个小盒子

[4, 5]

还保持着，其他都已经被压平了。

什么是flatMap()方法？

flatMap()

方法可以说是数组操作中的一把“魔法棒”。它的作用是先对数组中的每个元素进行处理，然后将处理后的结果“压扁”成一个新的数组。你可以把它想象成是

map()

和

flat()

（深度为1）这两个方法的组合体，一步到位完成映射和压平的操作。

使用方法

var newArray = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 对数组元素进行操作，并返回新数组的元素
}[, thisArg]);

• callback: 一个函数，用来定义对数组元素的处理方式。它可以接受三个参数：- currentValue: 当前正在处理的数组元素。- index（可选）：当前元素的索引。- array（可选）：调用flatMap的原数组。
• thisArg（可选）：执行callback时的this值。

示例1：基础用法

我们来看一个简单的例子：

let arr = [1, 2, 3, 4];
let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);

console.log(mappedAndFlattened); // 输出: [1, 2, 2, 4, 3, 6, 4, 8]

在这个例子中，

flatMap()

首先将数组中的每个元素

x

映射为一个包含

x

和

x * 2

的数组。然后，

flatMap()

会自动将这些生成的小数组“压扁”成一个单一的数组。这一步省去了我们手动调用

map()

和

flat()

的麻烦。

示例2：压平嵌套数组

如果我们面对的是嵌套数组，那么

flatMap()

同样能轻松应对：

let nestedArray = [[1], [2, 3], [4]];
let flattenedArray = nestedArray.flatMap(x => x);

console.log(flattenedArray); // 输出: [1, 2, 3, 4]

在这个例子中，

flatMap()

将每个子数组直接返回并“压平”成一个新的数组。结果就是，所有嵌套的元素都被展开成了一个扁平的数组。

flat() vs flatMap()

用例场景

• 使用flat()： 当你只需要将嵌套的数组“压平”而不需要对其中的元素进行任何转换时，flat()是最佳选择。它能够将多层嵌套的数组按照指定的深度拍平，直接展现出所有元素。
• 使用flatMap()： 如果你不仅需要“压平”数组，还需要先对数组中的元素进行某种转换操作，比如将每个元素映射成不同的值，然后再压平结果，那么flatMap()就派上用场了。它结合了map()和flat()的功能，一次性完成元素转换和压平。

性能对比

• flatMap()更高效： 使用flatMap()通常比先map()再flat()更高效，因为flatMap()只需遍历数组一次，而不是两次。这意味着在处理大量数据时，flatMap()可能会有更好的性能表现，减少不必要的数组遍历开销。

限制

• flatMap()的局限性： 虽然flatMap()功能强大，但它只能压平一层嵌套。如果你的数组嵌套层数较深，而你需要完全展开它们，你还是需要使用flat()并指定合适的深度。例如，flat(2)可以压平两层嵌套，而flatMap()则只能处理一层。

小结

• flat() 适用于你只想简单地展开嵌套数组，而不对元素做任何变动的场景。
• flatMap() 更适合在你需要先转换元素再展开结果的场合，并且在性能上比先map()后flat()更优。

结束

在JavaScript的世界里，掌握flat()和flatMap()这两个数组操作的方法，不仅能让你的代码更加简洁优雅，还能显著提升你处理复杂数据结构的效率。希望今天的分享能帮助你更好地理解这两个方法，并在实际项目中得心应手地应用它们。

如果你有任何关于flat()和flatMap()的疑问，或者在使用中遇到的挑战，欢迎在评论区和我互动讨论！

记得关注「前端达人」，我们一起在前端的道路上不断进阶，下次见！