javascript中怎么实现数组拍平

# JavaScript中怎么实现数组拍平

## 什么是数组拍平（Flatten）

数组拍平是指将多维数组转换为一维数组的过程。例如：

```javascript
const nestedArray = [1, [2, [3, [4]], 5]];
// 拍平后变为 [1, 2, 3, 4, 5]

原生方法实现

1. Array.prototype.flat()

ES2019引入的flat()方法是最直接的解决方案：

const arr = [1, [2, [3, [4]], 5];

// 默认拍平1层
console.log(arr.flat()); // [1, 2, [3, [4]], 5]

// 指定拍平层级
console.log(arr.flat(2)); // [1, 2, 3, [4], 5]

// 完全拍平
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]

2. 替代方案（ES6之前）

对于不支持flat()的环境，可以使用concat与apply组合：

function flatten(arr) {
  return [].concat.apply([], arr);
}

// 只能拍平一层
flatten([1, [2, [3]]]); // [1, 2, [3]]

递归实现

1. 基础递归版本

function flattenDeep(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      result = result.concat(flattenDeep(item));
    } else {
      result.push(item);
    }
  });
  return result;
}

2. 使用reduce优化

function flattenDeep(arr) {
  return arr.reduce((acc, val) => 
    Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val),
    []
  );
}

迭代实现

1. 使用栈的非递归方案

function flattenStack(arr) {
  const stack = [...arr];
  const result = [];
  
  while (stack.length) {
    const next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.unshift(next);
    }
  }
  
  return result;
}

2. 性能优化版本

function flattenFast(arr) {
  const result = [];
  const stack = [arr];
  let current;
  
  while (current = stack.pop()) {
    for (let i = current.length - 1; i >= 0; i--) {
      if (Array.isArray(current[i])) {
        stack.push(current[i]);
      } else {
        result.push(current[i]);
      }
    }
  }
  
  return result.reverse();
}

特殊场景处理

1. 处理稀疏数组

function flattenSparse(arr) {
  return arr.flat(Infinity).filter(x => x !== undefined);
}

2. 保留原数组结构（带层级信息）

function flattenWithLevels(arr, level = 0) {
  return arr.reduce((acc, val) => {
    if (Array.isArray(val)) {
      acc.push(...flattenWithLevels(val, level + 1));
    } else {
      acc.push({ value: val, level });
    }
    return acc;
  }, []);
}

性能对比

通过基准测试比较不同方法的性能（单位：ops/sec）：

测试环境：Chrome 115，数组规模1000个元素

实际应用案例

1. 处理API返回的嵌套数据

const apiResponse = [
  { id: 1, items: [10, 20] },
  { id: 2, items: [30, [40, 50]] }
];

const allItems = apiResponse
  .map(item => item.items)
  .flat(Infinity);
// [10, 20, 30, 40, 50]

2. 多维表格数据处理

function processTableData(data) {
  return data
    .flatMap(row => row.cells)
    .flatMap(cell => cell.values);
}

注意事项

1. 循环引用风险：递归方法可能因循环引用导致栈溢出

   const arr = [];
   arr.push(arr);
   flattenDeep(arr); // 报错
   

2. 非数组对象：类数组对象（如arguments）需要先转换

   function flattenArgs() {
    return flattenDeep(Array.from(arguments));
   }
   

3. 浏览器兼容性：flat()在IE和旧版Edge中不支持

扩展思考

1. 按需拍平的惰性实现

使用生成器实现按需拍平：

function* flattenLazy(arr) {
  for (const item of arr) {
    if (Array.isArray(item)) {
      yield* flattenLazy(item);
    } else {
      yield item;
    }
  }
}

// 使用
const lazyResult = [...flattenLazy(nestedArray)];

2. 拍平与树形结构转换

双向转换函数示例：

// 扁平数组转树形
function unflatten(arr, parentId = null) {
  return arr.filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: unflatten(arr, item.id)
    }));
}

总结

JavaScript中实现数组拍平有多种方式，选择时需要考虑： 1. 环境兼容性（是否支持ES2019+） 2. 性能需求（大数据量时栈实现更优） 3. 特殊需求（是否需要保留层级信息等）

现代项目推荐优先使用arr.flat(Infinity)，对于复杂场景可以结合递归或迭代方案实现定制化的拍平逻辑。 “`