JS 扁平化 (flatten) 数组

最新推荐文章于 2025-06-08 21:35:46 发布

weixin_34288121

最新推荐文章于 2025-06-08 21:35:46 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

文章标签：前端 json 数据结构与算法 ViewUI

原文链接：https://juejin.im/post/5c6b63f6f265da2da53ec057

本文探讨了在JavaScript中将嵌套多层的数组转换为单一层次数组的多种方法，包括使用flat()、reduce()、toString()、concat()、generator及字符串过滤等技术，同时也提到了underscore或lodash库的flatten函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

数组是 JS 中使用频率仅次于对象的数据结构，官方提供了众多的 API，谈谈如何扁平化（flatten）数组。

数组的扁平化，是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组

flat

flat(depth) 方法会递归到指定深度将所有子数组连接，并返回一个新数组, depth指定嵌套数组中的结构深度，默认值为1，不管多少层则可以用Infinity关键字作为参数

[1, 2, [3]].flat(1) // [1, 2, 3]

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

[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]
复制代码

flat()有兼容性问题，不建议使用

reduce

function flatten(arr) {
  return arr.reduce((a, b) => {
    // return Array.isArray(b) ? a.concat(flatten(b)) : a.concat(b);
    return a.concat(Array.isArray(b) ? flatten(b) : b);
  }, []);
};

// es6
const flatten = arr =>
  arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

toString

只适于数组的元素都是数字

function flatten(arr) {
  return arr.toString().split(",").map(item => +item);
};


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

[].concat(...arr)

function flatten(arr) {
  return !Array.isArray(arr) ? arr : [].concat.apply([], arr.map(flatten));
}


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

generator

function* flatten(arr) {
  if (!Array.isArray(arr)) yield arr;
  else for (let el of arr) yield* flatten(el);
}

let flattened = [...flatten([1,[2,[3,[4]]]])];  // [1, 2, 3, 4]
复制代码

字符串过滤

将输入数组转换为字符串并删除所有括号（[]）并将输出解析为数组

const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);
复制代码

undercore or lodash 库

使用undercore库或者lodash的中_.flatten函数，具体用法查阅API文档

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];
复制代码

参考文献

实现扁平化（flatten）数组的方法还有很多种，可以参考一下文献