如何在JavaScript中创建自定义双层循环函数替代嵌套for循环？

兄弟，完全没问题啊！你根本不用一直写一堆嵌套for循环把代码搞得乱糟糟的，把这种逻辑封装成可调用的自定义函数是JavaScript里非常常见的做法，既能让代码更整洁，还能复用。我给你举几个实用的例子：

1. 针对固定层数的循环（比如双层循环） #

如果你的场景就是固定的双层循环（比如遍历二维数组、处理两个数组的所有组合），可以直接封装成一个语义化的函数：

// 封装双层循环的通用函数
function nestedLoop(arr1, arr2, callback) {
  for (let i = 0; i < arr1.length; i++) {
    for (let j = 0; j < arr2.length; j++) {
      // 将当前元素和索引传递给回调，让调用者自定义处理逻辑
      callback(arr1[i], arr2[j], i, j);
    }
  }
}

// 使用示例：遍历水果和颜色的所有组合
const fruits = ['apple', 'banana'];
const colors = ['red', 'yellow'];

nestedLoop(fruits, colors, (fruit, color) => {
  console.log(`${color} ${fruit}`);
});
// 输出：red apple、red banana、yellow apple、yellow banana

每次需要双层循环时，直接调用这个函数就行，不用重复写循环结构，代码逻辑也更清晰。

2. 支持任意层数的通用循环函数 #

如果你的场景需要动态处理多层循环（比如3层、4层甚至更多），可以写一个递归版的通用函数来搞定：

// 通用多层循环函数：接收每层的长度数组，以及回调函数
function multiLevelLoop(levelLengths, callback) {
  const currentIndices = new Array(levelLengths.length).fill(0);

  function traverse(level) {
    // 所有层遍历完成，触发回调并传入当前索引组合
    if (level === levelLengths.length) {
      callback([...currentIndices]);
      return;
    }

    // 遍历当前层的所有元素
    for (currentIndices[level] = 0; currentIndices[level] < levelLengths[level]; currentIndices[level]++) {
      traverse(level + 1);
    }
  }

  traverse(0);
}

// 使用示例：3层循环，每层长度分别为2、3、2
multiLevelLoop([2, 3, 2], (indices) => {
  console.log(`当前索引组合：${indices.join(', ')}`);
});
// 输出所有3层索引的组合：0, 0, 0；0, 0, 1；0, 1, 0；...1, 2, 1

这个函数可以灵活适配任意层数的嵌套场景，特别适合需要动态生成循环层数的业务需求。

3. 用高阶函数简化写法 #

如果你觉得原生for循环太繁琐，也可以用JavaScript自带的高阶函数（比如forEach）来封装，写法更简洁：

// 用forEach封装的双层循环函数
function forEachNested(arr1, arr2, callback) {
  arr1.forEach((item1, index1) => {
    arr2.forEach((item2, index2) => {
      callback(item1, item2, index1, index2);
    });
  });
}

这种写法更符合函数式编程的风格，同样能达到复用和简化代码的目的。

总之，不管是固定层数还是动态层数的嵌套循环，都完全可以通过自定义函数来封装，没必要一直写重复的循环代码。这样你的代码会更易读、易维护，还能减少重复造轮子带来的错误。

内容的提问来源于stack exchange，提问作者Owen Page