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)，對于復雜場景可以結合遞歸或迭代方案實現定制化的拍平邏輯。 “`