如何在JavaScript中高效简洁地遍历多层嵌套数组？

1. 递归 + 高阶函数（通用层级保留方案） #

递归是处理嵌套数组最直观的方式，结合forEach/map可以简洁实现对每层元素的操作，同时保留原数组的嵌套结构。

示例：遍历执行操作（无返回值） #

// 递归遍历所有层级，对每个非数组元素执行回调
const traverseNested = (arr, callback) => {
  arr.forEach(item => {
    Array.isArray(item) ? traverseNested(item, callback) : callback(item);
  });
};

// 使用：给每个数字加1并打印
const nestedArr = [1, [2, [3, 4], 5], 6];
traverseNested(nestedArr, item => console.log(item + 1)); // 输出2、3、4、5、6、7

示例：转换并返回新数组（不修改原数组） #

如果需要生成结构一致的新数组，用map替代forEach：

const transformNested = (arr, callback) => {
  return arr.map(item => {
    return Array.isArray(item) ? transformNested(item, callback) : callback(item);
  });
};

const doubledArr = transformNested(nestedArr, x => x * 2);
console.log(doubledArr); // [2, [4, [6, 8], 10], 12]

2. flat() + 高阶函数（扁平化后处理） #

如果你的操作不需要保留原嵌套结构，先扁平化数组再处理会更简单。Array.prototype.flat()支持指定扁平化深度，传入Infinity可处理任意层级的嵌套：

const flatArr = nestedArr.flat(Infinity);
// 后续用map/filter/reduce自由处理
const filteredArr = flatArr.filter(x => x > 3);
console.log(filteredArr); // [4,5,6]

3. reduce实现遍历与聚合 #

如果需要在遍历过程中聚合数据（比如求和、收集特定元素），reduce可以结合递归完成：

const sumNested = (arr) => {
  return arr.reduce((total, item) => {
    return total + (Array.isArray(item) ? sumNested(item) : item);
  }, 0);
};

console.log(sumNested(nestedArr)); // 21

性能优化建议 #

• 避免递归栈溢出：对于层级极深的数组（比如超过1000层），递归会触发栈溢出，此时用迭代法替代：

// 迭代版遍历，用栈模拟递归
const traverseIterative = (arr, callback) => {
  const stack = [...arr];
  while (stack.length) {
    const item = stack.pop();
    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      callback(item);
    }
  }
};

• 高阶函数 vs 原生循环：高阶函数（map/forEach）的性能略低于原生for循环，但差距极小，业务场景下优先考虑可读性；仅当处理百万级超大数组时，再考虑原生循环优化。

内容的提问来源于stack exchange，提问作者Caspian Power