JavaScript 中的 Array.prototype.flatMap 与 map 的性能对比、内部原理与适用场景

描述
Array.prototype.flatMap 是 ECMAScript 2019 中新增的数组方法，它将映射（map）和扁平化（flat）操作合二为一。从功能上看，flatMap 相当于先对数组的每个元素执行 map 方法生成一个新的数组，然后对结果数组执行 flat(1) 进行一层扁平化。虽然我们可以用 map 结合 flat 实现相同效果，但 flatMap 在语义清晰性、性能优化和某些特定场景下具有独特优势。理解其内部原理、性能差异以及适用场景，有助于在开发中更恰当地选择使用。

解题过程循序渐进讲解

第一步：基本语法与功能
flatMap 的语法为：array.flatMap(callback(currentValue[, index[, array]])[, thisArg])。

• callback：为数组中每个元素执行的函数，可以接收三个参数（当前值、索引、原数组）。
• 返回值：一个新数组，由 callback 返回的数组（或类数组结果）连接并扁平化一层后形成。

示例对比：

const arr = [1, 2, 3];

// 使用 map + flat
const result1 = arr.map(x => [x, x * 2]).flat();
// 结果: [1, 2, 2, 4, 3, 6]

// 使用 flatMap
const result2 = arr.flatMap(x => [x, x * 2]);
// 结果: [1, 2, 2, 4, 3, 6]

两者结果相同，但 flatMap 代码更简洁。

第二步：内部实现机制
flatMap 并非简单封装 map 和 flat，而是有独立的内部算法，其主要步骤包括：

1. 创建一个新数组（结果数组）。
2. 遍历原数组的每个元素，对每个元素执行回调函数，回调应返回一个数组（或类数组，如字符串、Set 等可迭代对象）。
3. 对回调返回的每个值，检查其是否为可迭代对象（通过 IsConcatSpreadable 内部方法判断）。如果是，则遍历其元素并依次推入结果数组；如果不是，则直接推入结果数组。
4. 注意：无论回调返回什么，flatMap 只扁平化一层。如果返回多层嵌套数组，内层不会继续扁平化。

关键点：flatMap 在一次遍历中完成映射和扁平化，避免了 map 创建中间数组再 flat 带来的额外内存分配和遍历开销。在 V8 引擎中，flatMap 被优化为直接写入最终数组，减少了中间数据结构的创建。

第三步：性能对比分析
性能差异主要体现在：

1. 遍历次数：map + flat 需要两次完整遍历（先 map 遍历，后 flat 遍历），而 flatMap 只需要一次遍历。
2. 内存占用：map 生成中间数组，其元素是子数组，之后 flat 又创建新数组。flatMap 直接生成最终数组，减少了中间内存分配。
3. 垃圾回收：中间数组的创建和丢弃会增加垃圾回收压力，flatMap 更优。

简单测试（仅供参考，实际性能受引擎、数据规模影响）：

const largeArray = new Array(1000000).fill(1);

console.time('map + flat');
largeArray.map(x => [x, x]).flat();
console.timeEnd('map + flat');

console.time('flatMap');
largeArray.flatMap(x => [x, x]);
console.timeEnd('flatMap');

在多数现代引擎中，flatMap 会快 20%-50%，尤其在数据量较大时优势更明显。

第四步：适用场景与注意事项
适用场景：

1. 一对多映射：当需要将每个元素映射为多个值（数组）并扁平化时，如拆分字符串、展开嵌套数据。

   const sentences = ["Hello world", "Good morning"];
   const words = sentences.flatMap(sentence => sentence.split(' '));
   // ["Hello", "world", "Good", "morning"]
   

2. 过滤并映射：可以利用 flatMap 返回空数组来实现过滤效果，因为空数组扁平化后相当于不添加任何元素。

   const numbers = [1, 2, 3, 4];
   const evens = numbers.flatMap(x => x % 2 === 0 ? [x] : []);
   // [2, 4]  等价于 filter
   

3. 处理可选结果：当某些元素可能映射为空结果时，避免在结果数组中留下 null 或 undefined。

注意事项：

1. flatMap 只能扁平化一层，更深层嵌套需要额外处理。
2. 如果回调返回非可迭代值（如数字），它会被当作单个元素推入结果数组，不会报错。
3. 在需要深度扁平化或多层映射时，仍需要 flat 配合使用。

第五步：总结
flatMap 是功能与性能兼顾的数组方法，它在语义上更清晰地表达“映射并扁平化”的意图，内部优化减少了遍历次数和内存占用。在需要将元素映射为数组并连接时，优先使用 flatMap 而非 map + flat。然而，在需要深度扁平化（如 flat(2) 或 flat(Infinity)）或复杂映射逻辑时，分开操作可能更合适。理解其原理有助于在性能敏感场景中做出最佳选择。