一、数组扁平化的核心概念

在Web开发中，处理嵌套数组是常见需求。例如从API获取的JSON数据可能包含多层嵌套，或需要处理DOM树状结构。数组扁平化（Array Flattening）指将多维数组转换为一维数组的过程，这在数据清洗、React组件渲染、搜索算法等场景尤为重要。

1.1 扁平化的典型应用场景

数据可视化：处理嵌套的坐标数据
表单验证：统一处理嵌套的验证规则
状态管理：Redux/Vuex中的嵌套状态转换
文件系统：遍历嵌套目录结构

1.2 性能考量要素

选择实现方案时需考虑：

时间复杂度（O(n) vs O(n²)）
空间复杂度（是否产生中间数组）
最大递归深度（浏览器限制通常为1000-5000）
稀疏数组处理能力

二、原生方法：Array.prototype.flat()

ES2019引入的flat()方法是最简洁的解决方案，支持指定展开深度。

2.1 基础用法

const nested = [1, [2, [3, [4]], 5]];
// 默认展开1层
console.log(nested.flat()); 
// [1, 2, [3, [4]], 5]
// 指定展开深度
console.log(nested.flat(2)); 
// [1, 2, 3, [4], 5]
// 完全展开
console.log(nested.flat(Infinity)); 
// [1, 2, 3, 4, 5]

2.2 高级特性

稀疏数组处理：自动过滤空位

const sparseArr = [1, , [2, , [3]]];
console.log(sparseArr.flat()); 
// [1, 2, , 3] (保留空位)

类型安全：非数组元素保持不变

console.log([1, 'a', {b:2}].flat()); 
// [1, 'a', {b:2}]

2.3 浏览器兼容性

现代浏览器全面支持（Chrome 69+, Firefox 62+, Edge 79+）

旧版浏览器需polyfill：

if (!Array.prototype.flat) {
Array.prototype.flat = function(depth = 1) {
  return depth > 0 
    ? this.reduce((acc, val) => 
        acc.concat(Array.isArray(val) ? val.flat(depth - 1) : val), [])
    : this.slice();
};
}

三、递归实现方案

当环境不支持flat()时，递归是直观的解决方案。

3.1 基础递归实现

function flattenRecursive(arr) {
  let result = [];
  for (const item of arr) {
    if (Array.isArray(item)) {
      result.push(...flattenRecursive(item));
    } else {
      result.push(item);
    }
  }
  return result;
}

3.2 优化递归方案

尾递归优化（需引擎支持）：

function flattenTailRecursive(arr, acc = []) {
for (const item of arr) {
  Array.isArray(item) 
    ? flattenTailRecursive(item, acc)
    : acc.push(item);
}
return acc;
}

深度控制：

function flattenWithDepth(arr, depth = Infinity) {
if (depth <= 0) return arr.slice();
return arr.reduce((acc, val) => {
  return acc.concat(
    Array.isArray(val) ? flattenWithDepth(val, depth - 1) : val
  );
}, []);
}

3.3 递归的局限性

最大调用栈限制（可通过改写为迭代解决）
每次递归创建新数组，内存开销较大

四、迭代实现方案

迭代方法可避免递归的栈溢出问题，适合处理深度嵌套。

4.1 使用循环+展开运算符

function flattenIterative(arr) {
  const stack = [[...arr], 0];
  const result = [];
  while (stack.length) {
    const [current, depth] = stack.pop();
    if (depth >= Infinity) {
      result.push(...current.filter(x => !Array.isArray(x)));
      continue;
    }
    for (const item of current) {
      if (Array.isArray(item)) {
        stack.push([item, depth + 1]);
      } else {
        result.push(item);
      }
    }
  }
  return result;
}

4.2 使用reduce的迭代实现

function flattenReduce(arr) {
  return arr.reduce((acc, val) => {
    return acc.concat(
      Array.isArray(val) ? flattenReduce(val) : val
    );
  }, []);
}
// 注：此实现本质仍是递归，需配合深度控制

4.3 广度优先搜索(BFS)实现

function flattenBFS(arr) {
  const queue = [...arr];
  const result = [];
  while (queue.length) {
    const item = queue.shift();
    if (Array.isArray(item)) {
      queue.push(...item);
    } else {
      result.push(item);
    }
  }
  return result;
}

五、性能优化技巧

5.1 预分配数组空间

function flattenPreAlloc(arr) {
  let size = 0;
  const stack = [[arr, 0]];
  // 计算总长度
  while (stack.length) {
    const [current] = stack.pop();
    for (const item of current) {
      if (Array.isArray(item)) {
        stack.push([item, 0]);
      } else {
        size++;
      }
    }
  }
  // 填充结果
  const result = new Array(size);
  let index = 0;
  stack.push([arr, 0]);
  while (stack.length) {
    const [current] = stack.pop();
    for (const item of current) {
      if (Array.isArray(item)) {
        stack.push([item, 0]);
      } else {
        result[index++] = item;
      }
    }
  }
  return result;
}

5.2 使用TypedArray（数值数组）

function flattenNumeric(arr) {
  const flat = [];
  const stack = [arr];
  while (stack.length) {
    const current = stack.pop();
    for (const item of current) {
      if (Array.isArray(item)) {
        stack.push(item);
      } else if (typeof item === 'number') {
        flat.push(item);
      }
    }
  }
  return new Float64Array(flat.reverse());
}

六、边界条件处理

6.1 特殊值处理

const edgeCases = [
  null, 
  undefined, 
  {}, 
  new Date(), 
  /regex/, 
  Symbol('foo'),
  NaN,
  Infinity
];
function safeFlatten(arr) {
  return arr.reduce((acc, val) => {
    if (Array.isArray(val)) {
      return acc.concat(safeFlatten(val));
    }
    // 过滤掉非原始值（根据需求调整）
    if (val != null && typeof val !== 'object' && !isNaN(val)) {
      acc.push(val);
    }
    return acc;
  }, []);
}

6.2 循环引用处理

function flattenWithCycleDetection(arr, seen = new WeakSet()) {
  const result = [];
  const stack = [[arr, 0]];
  while (stack.length) {
    const [current, depth] = stack.pop();
    if (seen.has(current)) continue;
    seen.add(current);
    for (const item of current) {
      if (Array.isArray(item)) {
        stack.push([item, depth + 1]);
      } else {
        result.push(item);
      }
    }
  }
  return result;
}

七、综合性能对比

方法	时间复杂度	空间复杂度	最大深度	备注
Array.prototype.flat	O(n)	O(n)	5000+	最佳原生方案
递归实现	O(n)	O(n)	1000-	需注意栈溢出
迭代实现	O(n)	O(n)	无限制	最稳定的方案
BFS实现	O(n)	O(n)	无限制	顺序与DFS不同
预分配空间	O(n)	O(1)	无限制	数值数组性能最优

八、最佳实践建议

现代项目：优先使用flat()，配合polyfill处理兼容性
深度嵌套：采用迭代或BFS实现
性能敏感场景：使用预分配空间或TypedArray
特殊数据：添加边界条件处理逻辑
函数式编程：考虑使用reduce+递归组合

掌握这些技术方案后，开发者可根据具体场景选择最适合的扁平化策略，在代码可读性和性能之间取得平衡。对于大型项目，建议封装统一的工具函数并添加类型定义，提升代码复用性和可维护性。

JavaScript数组扁平化技术全解析：从基础到进阶的5种实现方案