如何高效实现数组扁平化与反扁平化？大数据高频场景优化

扁平化优化 #

原生Array.prototype.flat()是引擎底层优化的方法，性能远高于手写的reduce实现，你的场景中直接使用flat(2)就是最优方案，无需额外修改：

const arr = [[1,2], [3,4]];
const flattenedArr = arr.flat(2);
console.log("flat", flattenedArr);

反扁平化优化 #

你当前用reduce的实现存在频繁函数调用、临时数组维护的性能开销，大数据量下换成for循环+原生slice的方式可以大幅提升效率：

基础高效版 #

function deflatten(arr, chunkSize) {
  const result = [];
  const totalLength = arr.length;
  // 按固定步长循环，减少迭代次数
  for (let i = 0; i < totalLength; i += chunkSize) {
    // 用slice直接截取子数组，引擎优化的原生方法比手动push高效
    result.push(arr.slice(i, i + chunkSize));
  }
  return result;
}

// 调用示例
const deflattenedArr = deflatten(flattenedArr, 2);
console.log("de-flat", deflattenedArr);

超大数据量进阶版 #

如果处理的数组规模极大，可以提前分配结果数组的存储空间，避免数组动态扩容带来的内存重新分配开销：

function deflatten(arr, chunkSize) {
  const totalLength = arr.length;
  const resultLength = Math.ceil(totalLength / chunkSize);
  // 提前创建指定长度的数组，避免动态扩容
  const result = new Array(resultLength);
  
  for (let i = 0; i < resultLength; i++) {
    const startIndex = i * chunkSize;
    result[i] = arr.slice(startIndex, startIndex + chunkSize);
  }
  return result;
}

性能提升核心原因 #

1. 避免了reduce的回调函数调用开销：for循环是原生底层循环，引擎优化程度更高
2. 减少临时变量操作：用slice直接生成子数组，替代手动维护temp数组的频繁push与清空操作
3. 提前分配数组空间（进阶版）：避免大数据量下数组多次扩容导致的内存开销

内容的提问来源于stack exchange，提问作者Vikas Acharya