数组的flat()和flatMap()怎么用？

在处理多维数组或需要同时进行映射与扁平化的场景时，ES2019引入的flat()和flatMap()方法提供了极大的便利。它们让嵌套数组的操作变得简洁直观，避免了以往需要递归或多次调用的繁琐。

flat()方法：数组扁平化

flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

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

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

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

flat()接受一个可选的深度参数，默认为1。你可以传递一个具体的数字，或者使用Infinity来扁平化任意深度的嵌套。它不会改变原数组，而是返回一个新数组。

flatMap()方法：映射后扁平化

flatMap()方法相当于先对原数组的每个元素执行一个映射函数（就像map()一样），然后将结果数组“扁平化”一级深度。它是map()后紧跟着一个深度为1的flat()操作的便捷写法。

const sentences = ["Hello world", "My name is"];
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words); // ["Hello", "world", "My", "name", "is"]

上面的例子中，map函数对每个句子调用split(' ')，会返回一个单词数组。如果只用map()，我们将得到一个二维数组[["Hello", "world"], ["My", "name", "is"]]。flatMap()在映射后自动将结果扁平化一级，直接得到了单词的一维数组。

一个关键特性是，flatMap()的映射函数可以返回一个数组（用于扁平化），也可以返回一个非数组值（会被当作单元素数组处理，然后扁平化）。并且，它只能扁平化一级深度，无法指定其他深度。

const numbers = [1, 2, 3];
const result = numbers.flatMap(num => [num, num * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

这里，映射函数返回[num, num*2]，flatMap()将它们合并到了最终的一维数组中。

在实际应用中，flat()常用于处理来自API的嵌套数据结构或清理数组。flatMap()则非常适合在映射过程中产生数组，并希望立即合并结果的场景，例如提取对象数组中的某个数组属性并展开。它们都是处理现代JavaScript中复杂数据流的得力工具。