JavaScript数组扁平化技巧全解析

JavaScript数组扁平化看似简单，实则暗藏诸多陷阱：原生`flat()`虽简洁高效，却受限于环境兼容性、默认仅单层展开及对环引用和稀疏数组的处理盲区；`reduce + concat`递归方案灵活可控，适合老环境与定制逻辑，但性能稍逊且需防范栈溢出；扩展运算符配合循环仅适用于深度已知的场景，鲁棒性差；而`flatMap()`本质是“映射+单层扁平”，误用易导致预期外结果。真正关键在于——扁平化只是手段而非目的，面对真实业务中的API嵌套、用户输入或异常数据，必须根据兼容性、结构确定性、是否需过滤/校验等维度理性选型，并始终为环引用、空槽、非数组项等边界情况做好防护。

JavaScript 扁平化数组最直接、最可靠的方式是用 Array.prototype.flat()，但它的行为受参数和环境限制；其他方法（如递归、reduce + concat、扩展运算符）各有适用边界和隐性坑。

flat() 方法：默认只扁平一层，深度需显式指定

flat() 是现代浏览器和 Node.js（≥12）的原生方案，但它默认只处理一层嵌套：

const arr = [1, [2, [3, [4]]]];
arr.flat(); // [1, 2, [3, [4]]] —— 注意：第三层没动

要彻底扁平，得传参 Infinity：

arr.flat(Infinity); // [1, 2, 3, 4]

• 传 0 相当于不扁平，返回原数组（浅拷贝）
• 传负数（如 -1）会被转为 0，不是报错
• IE 完全不支持，需检查运行环境或加 polyfill
• 会跳过空槽（sparse array 中的 empty slots），比如 [1, , 3].flat() → [1, 3]

reduce + concat 实现通用递归扁平（兼容老环境）

当需要支持 IE 或自定义逻辑（比如过滤 null/undefined、跳过某些类型）时，手动递归更可控：

const flatten = arr => arr.reduce((acc, val) => 
  Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []
);

• 注意 concat() 对非数组项会直接追加，对数组会展开一层 —— 所以必须递归调用自身
• 若原数组含 null、undefined 或原始值（如字符串），Array.isArray(val) 能准确区分
• 性能比 flat(Infinity) 略差，尤其深层嵌套时函数调用栈更深
• 无法处理环状引用（会爆栈），生产环境需加循环检测

扩展运算符 + while 循环：只适合已知最大深度

有人用 [...arr] 配合循环“暴力展开”，但这仅适用于你知道最多几层的情况：

let arr = [1, [2, [3]]];
while (arr.some(Array.isArray)) {
  arr = [].concat(...arr);
}

• [].concat(...arr) 是关键：扩展运算符把 arr 当作多个参数传给 concat，实现单层展开
• 每次循环只降一层，some(Array.isArray) 判断是否还有嵌套
• 如果嵌套太深或结构不规则（如混有对象、类数组），容易出错或无限循环
• 不能替代 flat(Infinity)，因为没有深度上限控制，也难加中间处理逻辑

flatMap() 不是扁平化主力，别误用

flatMap() 的作用是先 map 再 flat(1)，它只扁平**一层**，且前提是 map 返回数组：

[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

• 它不会递归处理 map 返回的嵌套数组：[1].flatMap(x => [[x]]) → [[1]]，不是 [1]
• 想靠它多层扁平？得链式调用多次 flatMap()，可读性和效率都差
• 真正适合场景是“映射后合并结果”，比如拆分字符串、展开 Promise 结果等

真正要注意的是：扁平化不是目的，而是解决数据结构不匹配的手段。如果你的嵌套来自 API 响应或用户输入，优先确认结构是否稳定；用 flat(Infinity) 最省事，但一旦遇到环引用、稀疏数组或需要过滤，就得切到手写递归，并记得加类型判断和边界防护。

以上就是《JavaScript数组扁平化技巧全解析》的详细内容，更多关于的资料请关注golang学习网公众号！