JavaScript数组扁平化方法详解

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript数组扁平化技巧解析》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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 函数更重要。

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