javascript如何扁平化数组_有哪些方法可以使用【教程】

10次阅读

最直接可靠的是Array.prototype.flat(),但默认只扁平一层,需flat(Infinity)彻底展开;兼容老环境或需自定义逻辑时宜用reduce+concat递归实现;扩展运算符配合while仅适用于已知深度;flatmap仅限map后单层扁平。

javascript如何扁平化数组_有哪些方法可以使用【教程】

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、跳过某些类型)时,手动递归更可控:

立即学习Java免费学习笔记(深入)”;

const flatten = arr => arr.reduce((acc, val) =>    Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), [] );
  • 注意 concat() 对非数组项会直接追加,对数组会展开一层 —— 所以必须递归调用自身
  • 若原数组含 nullundefined 或原始值(如字符串),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() 的作用是先 mapflat(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) 最省事,但一旦遇到环引用、稀疏数组或需要过滤,就得切到手写递归,并记得加类型判断和边界防护。

text=ZqhQzanResources