在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()的疑问，或者在使用中遇到的挑战，欢迎在评论区和我互动讨论！
记得关注「前端达人」，我们一起在前端的道路上不断进阶，下次见！