Array.prototype.flat()是现代环境首选,支持深度控制和空位处理;旧环境可用reduce+concat手写递归实现,需用Array.isArray安全判断;慎用JSON黑魔法,应明确数据建模。
Array.prototype.flat() 最快最稳现代浏览器和 Node.js(≥12)原生支持 flat(),它是处
理多维数组扁平化的首选。它默认只展开一层,但可通过参数控制深度,还能处理空位(undefined 和 null 会保留,空槽位被跳过)。
arr.flat(Infinity)
arr.flat(2)
Promise 或自定义类?flat() 不管——它只处理数组,其他类型原样保留const arr = [1, [2, [3, [4]]], 5]; console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]
reduce + concat 手写递归IE 或老版本 Node.js 不支持 flat(),这时手写一个可靠、可读的替代方案比引入整个 Lodash 更轻量。关键点是:必须判断元素是否为数组,否则会把字符串、对象也当成可展开项。
acc.concat(item) —— 如果 item 是普通值,concat 会把它当单个元素追加;如果是数组,才真正展开depth - 1,到 0 就停止,避免无限循环Array.isArray(item) 比 typeof item === 'object' 安全得多,后者会把 null、日期、正则都误判为数组function flat(arr, depth = 1) {
if (depth === 0) return arr;
return arr.reduce((acc, item) => {
return acc.concat(Array.isArray(item) ? flat(item, depth - 1) : item);
}, []);
}flat() 的行为差异稀疏数组(如 [1, , 3])在用 flat() 后会变成紧凑数组([1, 3]),而手写 reduce 方式默认保留空位(取决于你是否用 for...of 还是 forEach)。如果业务依赖索引对齐(比如表格行数据映射),这点容易出 bug。
[1, , 3].flat() → [1, 3](空位被丢弃)Array.from({length: 3}, (_, i) => i === 1 ? undefined : i).flat() → [0, undefined, 2],因为 undefined 是值,不是空位Array(3) 或显式删除产生,遍历时会被跳过JSON.stringify + split 这类“黑魔法”网上有些方案用 JSON.stringify(arr).replace(/[\[\]]/g, '').split(','),看似一行解决,但问题极多:
['a,b', '[c]'] → 错误拆分)42 变成 "42",true 变成 "true"
undefined、Symbol、BigInt 全丢失或报错flat 慢一个数量级以上这种写法只适合临时调试、输入绝对可控的玩具场景,上线代码里出现就是隐患。
真正需要“任意嵌套+类型保全”的场景(比如解析后端返回的混合结构),应该明确建模,而不是靠字符串 hack。扁平化只是手段,目的通常是后续聚合或渲染——提前想清楚下游怎么用,比选哪个 flatten 函数更重要。