在JavaScript开发中，处理多维数组是常见的需求。当数组结构规则时（如二维数组的每个子数组长度相同），遍历相对简单。但实际应用中，我们常遇到不规则多维数组，即各子数组的嵌套深度和长度不一致。例如，包含不同深度嵌套的数组结构：[[1, 2], [3, [4, 5]], [6, [7, [8, 9]]]]。这种不规则性使得传统遍历方法（如嵌套for循环）难以直接应用。本文将系统介绍JS中遍历不规则多维数组的多种方法，从递归基础到迭代优化，从扁平化处理到类型安全检查，帮助开发者高效处理复杂数据结构。
一、递归遍历：最直观的解决方案
递归是处理嵌套结构的天然方式。其核心思想是：遍历当前元素，若遇到数组则递归处理，否则执行目标操作。
function traverseRecursive(arr, callback) {
for (let item of arr) {
if (Array.isArray(item)) {
traverseRecursive(item, callback); // 递归处理子数组
} else {
callback(item); // 处理非数组元素
}
}
}
// 使用示例
const irregularArray = [1, [2, [3, 4]], 5];
traverseRecursive(irregularArray, value => console.log(value));
// 输出：1 2 3 4 5递归的优点是代码简洁，能自动适应任意深度。但存在两个问题：1）JavaScript引擎对递归深度有限制（通常约10,000层），超限会导致栈溢出；2）每次递归调用都会创建新的执行上下文，影响性能。
1.1 递归的变种：带深度控制的遍历
若需记录元素所在层级，可修改递归函数：
function traverseWithDepth(arr, callback, depth = 0) {
for (let item of arr) {
if (Array.isArray(item)) {
traverseWithDepth(item, callback, depth + 1);
} else {
callback(item, depth); // 传递当前深度
}
}
}
// 使用示例
traverseWithDepth([1, [2, [3]]], (val, d) =>
console.log(`${val} at depth ${d}`));
// 输出：1 at depth 0 2 at depth 1 3 at depth 2二、迭代实现：避免栈溢出的方案
迭代方法通过显式管理调用栈来避免递归的深度限制。常见方式是使用栈（Stack）或队列（Queue）数据结构。
2.1 使用栈的深度优先遍历（DFS）
function traverseIterativeDFS(arr, callback) {
const stack = [[...arr], 0]; // 存储数组和当前索引
while (stack.length) {
const [currentArr, index] = stack[stack.length - 1];
if (index >= currentArr.length) {
stack.pop(); // 当前数组遍历完成
continue;
}
const item = currentArr[index];
stack[stack.length - 1][1] = index + 1; // 更新索引
if (Array.isArray(item)) {
stack.push([item, 0]); // 子数组入栈
} else {
callback(item);
}
}
}
// 使用示例
traverseIterativeDFS([1, [2, [3]]], console.log);2.2 使用队列的广度优先遍历（BFS）
BFS按层级遍历，适合需要按深度处理的场景：
function traverseIterativeBFS(arr, callback) {
const queue = [[...arr], 0]; // 队列存储数组和深度
while (queue.length) {
const [currentArr, depth] = queue.shift();
for (let item of currentArr) {
if (Array.isArray(item)) {
queue.push([item, depth + 1]);
} else {
callback(item, depth); // 传递深度信息
}
}
}
}
// 使用示例
traverseIterativeBFS([1, [2, [3]]], (val, d) =>
console.log(`${val} at depth ${d}`));三、生成器函数：惰性求值的优雅方案
ES6的生成器函数（Generator）能实现惰性遍历，即按需生成值，适合处理超大规模数据。
function* traverseGenerator(arr) {
for (let item of arr) {
if (Array.isArray(item)) {
yield* traverseGenerator(item); // 委托生成器
} else {
yield item;
}
}
}
// 使用示例
const gen = traverseGenerator([1, [2, [3]]]);
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3生成器的优势在于：1）内存效率高，无需预先展开所有元素；2）可与for...of循环无缝配合；3）支持提前终止遍历（通过break或return）。
四、扁平化处理：化多维为一维
若只需获取所有元素而不需要层级信息，可将多维数组扁平化为一维数组。
4.1 递归扁平化
function flattenRecursive(arr) {
let result = [];
for (let item of arr) {
if (Array.isArray(item)) {
result.push(...flattenRecursive(item));
} else {
result.push(item);
}
}
return result;
}
// 使用示例
console.log(flattenRecursive([1, [2, [3]]])); // [1, 2, 3]4.2 使用Array.prototype.flat()
ES2019引入的flat()方法可指定展开深度：
const arr = [1, [2, [3]]];
console.log(arr.flat(Infinity)); // [1, 2, 3]
// 参数Infinity表示展开所有嵌套层级flat()的优点是语法简洁，但缺点是：1）无法在展开过程中处理元素；2）IE不支持，需polyfill。
五、类型安全与边界处理
实际开发中需考虑异常情况，如输入非数组、循环引用等。
5.1 输入验证
function safeTraverse(arr, callback) {
if (!Array.isArray(arr)) {
throw new TypeError('Input must be an array');
}
// 后续遍历逻辑...
}5.2 循环引用检测
使用WeakSet记录已访问对象：
function traverseWithCycleCheck(arr, callback) {
const visited = new WeakSet();
const stack = [[arr, 0]];
while (stack.length) {
const [currentArr, index] = stack[stack.length - 1];
if (index >= currentArr.length) {
stack.pop();
continue;
}
const item = currentArr[index];
stack[stack.length - 1][1] = index + 1;
if (Array.isArray(item)) {
if (visited.has(item)) {
console.warn('Cycle detected');
continue;
}
visited.add(item);
stack.push([item, 0]);
} else {
callback(item);
}
}
}六、性能对比与选择建议
不同方法的性能特征：
| 方法 | 时间复杂度 | 空间复杂度 | 适用场景 |
|---|---|---|---|
| 递归 | O(n) | O(d)（d为最大深度） | 简单场景，深度可控 |
| 迭代DFS | O(n) | O(d) | 深度大，需避免栈溢出 |
| 迭代BFS | O(n) | O(w)（w为最大宽度） | 需按层级处理 |
| 生成器 | O(n) | O(1)（惰性求值） | 超大规模数据 |
| flat() | O(n) | O(n) | 简单扁平化需求 |
七、实际应用案例
7.1 计算多维数组所有元素和
function sumIrregularArray(arr) {
let sum = 0;
traverseRecursive(arr, val => {
if (typeof val === 'number') sum += val;
});
return sum;
}
console.log(sumIrregularArray([1, [2, [3]]])); // 67.2 查找特定值的路径
function findValuePath(arr, target, path = []) {
for (let i = 0; i 八、进阶技巧：访问者模式
对于复杂操作，可使用访问者模式分离遍历逻辑和操作逻辑：
class ArrayVisitor {
visit(item) {
if (Array.isArray(item)) {
this.visitArray(item);
} else {
this.visitItem(item);
}
}
visitArray(arr) {
for (let item of arr) {
this.visit(item);
}
}
visitItem(item) {
console.log(item); // 默认行为，可重写
}
}
// 自定义访问者
class SumVisitor extends ArrayVisitor {
constructor() {
super();
this.sum = 0;
}
visitItem(item) {
if (typeof item === 'number') this.sum += item;
}
}
const visitor = new SumVisitor();
visitor.visit([1, [2, [3]]]);
console.log(visitor.sum); // 6九、浏览器与Node.js环境差异
1）flat()方法在IE中不可用，需polyfill：
if (!Array.prototype.flat) {
Array.prototype.flat = function(depth = 1) {
const result = [];
// 实现逻辑...
return result;
};
}2）Node.js的V8引擎对递归优化更好，但深度过大仍会栈溢出。
十、总结与最佳实践
1）简单场景优先使用递归，代码最直观；2）深度超过1000时改用迭代；3）需要惰性求值时选择生成器；4）仅需扁平化时用flat()；5）始终添加类型检查和循环引用处理。
关键词：JavaScript、不规则多维数组、递归遍历、迭代遍历、生成器函数、数组扁平化、深度优先搜索、广度优先搜索、访问者模式、类型安全
简介：本文详细探讨了JavaScript中遍历不规则多维数组的多种方法，包括递归、迭代、生成器、扁平化等技术，分析了各方法的优缺点及适用场景，提供了类型安全、循环引用检测等实用技巧，并通过实际案例展示了如何计算元素和、查找值路径等操作，最后给出了不同场景下的最佳实践建议。
