什么是javascript数组扁平化_有哪些方法可以处理多维数组

JavaScript数组扁平化是将多维数组转为一维数组的过程,核心方法包括:1. flat()(ES2019,支持深度参数与Infinity);2. 递归+reduce+concat(兼容旧环境,可定制);3. toString()+split()(仅限简单字符串化场景);4. 扩展运算符+some()循环展开(可控但性能低)。

JavaScript数组扁平化,就是把嵌套的多维数组(比如二维、三维甚至更深)转换成一维数组的过程。核心目标是“压平”层级,保留所有原始元素的顺序,去掉中间的嵌套结构。

使用 flat() 方法(最简洁)

flat() 是 ES2019 引入的原生方法,支持指定扁平化深度,默认为 1(只展开一层)。传入 Infinity 可完全扁平化任意深度的数组。

  • [1, [2, [3, 4]], 5].flat(2)[1, 2, 3, 4, 5]
  • [1, [2, [3, [4]]]].flat(Infinity)[1, 2, 3, 4]

递归 + reduce + concat(兼容老环境)

手动实现通用扁平化逻辑,适合需要支持 IE 或旧版 Node.js 的场景。利用 reduce 遍历,对每个元素判断是否为数组:是则递归扁平,否则直接保留。

  • 写法示例:arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), [])
  • 优点:逻辑清晰、可定制(比如跳过 null/undefined、过滤空数组)

使用 toString() + split()(仅适用于纯数字/字符串)

调用 toString() 会把多维数组转成逗号分隔的字符串,再用 split() 拆开。但注意:它会把所有值转为字符串,且无法区分 0"0"、丢失原始类型。

  • [1, [2, [3, 4]], 5].toString().split(',')["1", "2", "3", "4", "5"]
  • 仅建议用于简单数据清洗或临时调试,不推荐生产使用

扩展运算符 + some() 循环展开(有限深度)

利用 Array.prototype.some() 检测是否还有嵌套数组,配合扩展运算符反复展开,适合控制最大展开次数或需中途干预的场景。

  • 例如:每次用 [].concat(...arr) 展开一层,循环直到 arr.some(Array.isArray) 为 false
  • 可控性强,但性能不如 flat(),深度大时易栈溢出