JavaScript 嵌套数组扁平化的 5 种核心方案与深度实践指南

JavaScript 嵌套数组扁平化的 5 种核心方案与深度实践指南

‌「这个嵌套数组，我要怎么才能把它压平啊？」‌——相信每个 JS 开发者都曾面对过这样的灵魂拷问。本文将用最接地气的方式，手把手教你玩转数组降维操作！

---

一、先看问题：什么是数组扁平化？

▋ 概念定义

‌数组扁平化（Array Flattening）‌是将任意维度的嵌套数组转换为连续一维数组的过程，类似于数学中的张量展开操作。其核心挑战在于处理‌未知深度的递归结构‌。

举个🌰

// 原始嵌套数组
const nestedArray = [["🍎", "🍐"], [["🍌", ["🥭"]]], "🍇"];

// 目标一维数组
const perfectArray = ["🍎", "🍐", "🍌", "🥭", "🍇"];

把多维数组变成一维数组的过程，就是‌数组扁平化‌（Array Flattening）。

---

二、五大核心方案横向评测

方案 1：ES6 原生核武器 flat()

// 展开一层（默认）
["🍎", "🍐", ["🍌", ["🥭"]], "🍇"] = nestedArray.flat() 

// 展开到完全扁平
nestedArray.flat(Infinity) // ["🍎", "🍐", "🍌", "🥭", "🍇"]

优点‌：
✅ 原生API ✅ 语法极简 ✅ 层级可控

‌缺点‌：
❌ IE绝育 ❌ 无法定制处理逻辑

---

方案 2：递归+reduce 兼容之王

function deepFlatten(arr) {
  return arr.reduce((acc, current) => {
    // 递归核心：类型判断 → 展开或保留
    return acc.concat(
      Array.isArray(current) ? deepFlatten(current) : current
    );
  }, []);
}

📊 性能提示：10层嵌套万级数据 ≈ 120ms

---

方案 3：扩展运算符+map 优雅派

const flatten = arr => 
  [].concat(...arr.map(v => 
    Array.isArray(v) ? flatten(v) : v
  ))

💡 与reduce方案的差异：避免显式空数组初始化

---

方案 4：toString 类型限定技

const numberArray = [[1, 2], [3, ]];
const result = numberArray.toString()
                         .split(',')
                         .map(Number); // [1,2,3,4]

// 🔥 致命缺陷测试
const mixedArray = [true, {x:1}, [null]];
mixedArray.toString().split(','); 
// ['true', '[object Object]', ''] （数据失真！）

‌注意事项‌：
⚠️ 会丢失布尔值等类型 ⚠️ 对象元素会变成 “[object Object]”

---

方案 5：生成器+迭代器 海量数据方案

function* flattenGenerator(arr) {
  for (const item of arr) {
    if (Symbol.asyncIterator in item) { 
      // 处理异步迭代流
      yield* flattenAsync(item);
    } else if (Array.isArray(item)) {
      yield* flattenGenerator(item);
    } else {
      yield item;
    }
  }
}

// 处理10万级数据示例
const bigData = Array(1e5).fill([[]]);
console.time('generator');
[...flattenGenerator(bigData)]; 
console.timeEnd('generator'); // ≈ 65ms

‌优势‌：
🚀 惰性计算 🚀 内存友好 🚀 支持异步迭代

---

三、四维性能评测体系

维度	flat()	reduce	生成器	toString
10万数据耗时	38ms	122ms	67ms	210ms
内存峰值	低	高	极低	中
语法亲和度	★★★★★	★★★☆☆	★★☆☆☆	★★★★☆
功能扩展性	不可	可定制	极高	不可

---

四、避坑指南

坑 1：幽灵空位问题

const sparseArray = [1,,3]; 
sparseArray.flat(); // [1, empty, 3]

// ✅ 正确清洗方式
sparseArray.flat().filter(v => v !== undefined); 

坑 2：循环引用黑洞

const circularArray = [];
circularArray.push(circularArray);

// 💥 递归方案会栈溢出！
function safeFlatten(arr, seen = new Set()) {
  if (seen.has(arr)) return [];
  seen.add(arr);
  
  return arr.reduce((acc, val) => {
    if (Array.isArray(val)) {
      return acc.concat(safeFlatten(val, seen));
    }
    return acc.concat(val);
  }, []);
}

---

五、最佳实践建议

1. ‌现代项目首选‌：arr.flat(Infinity)
2. 需要兼容 IE‌：使用 reduce 递归方案
3. 处理 10w+ 数据‌：优先考虑生成器方案
4. 不确定嵌套层级‌：始终使用 Infinity 参数

六、扩展思考

当 Lodash 遇上扁平化

_.flattenDepth(arr, 3); // 可控层级展开
_.flattenDeep(arr); // 完全展开

扩展阅读：你的网站正在裸奔？Lodash原型链污染漏洞引发的“全员恶人“事件

扁平化与JSON序列化的量子纠缠

// 反向操作：一维 → 结构重建
const rebuild = (arr, template) => {
  let cursor = 0;
  return template.map(item => 
    Array.isArray(item) ? rebuild(arr, item) : arr[cursor++]
  );
};

扩展阅读
解锁数组操作新维度：flatMap 深度解析与实战指南

深入理解 JavaScript 递归：从原理到实践

从JSON过滤到编程范式：深入理解JavaScript数据操作

---

‌📚 总结一句话‌：根据项目需求选择合适方案，现代浏览器优先使用原生 API，复杂场景考虑组合方案。现在就去控制台试试这些方法吧！