JavaScript 嵌套循环

Begindev 编辑部 March 25, 2026

嵌套循环允许我们在另一个循环内部重复执行一段代码。

这是一种处理多维数据、生成图案以及解决需要遍历多组元素的问题的方式。

1. 理解嵌套循环

嵌套循环仅仅是放置在另一个循环内部的循环。对于外层循环的每一次迭代，内层循环都会完整地执行一遍。这意味着，外层循环每运行一次，整个内层循环就会从头到尾运行一次。

1.1 基本结构

嵌套循环的一般结构如下所示：

for (let i = 0; i < outerLimit; i++) { // 外层循环
  for (let j = 0; j < innerLimit; j++) { // 内层循环
    // 每次内层循环迭代要执行的代码
    // 这段代码将运行 outerLimit * innerLimit 次
  }
}

外层循环 (Outer Loop): 包含内层循环的循环。它控制内层循环将执行多少轮。
内层循环 (Inner Loop): 嵌套在外层循环内部的循环。外层循环每迭代一次，它就完整执行一次。
迭代次数: 内层循环中的代码将执行 outerLimit * innerLimit 次。

1.2 示例：简单的嵌套 For 循环

让我们看一个简单的例子来说明嵌套循环是如何工作的：

for (let i = 0; i < 3; i++) { // 外层循环: i = 0, 1, 2
  for (let j = 0; j < 2; j++) { // 内层循环: j = 0, 1
    console.log(`i = ${i}, j = ${j}`);
  }
}

输出：

i = 0, j = 0
i = 0, j = 1
i = 1, j = 0
i = 1, j = 1
i = 2, j = 0
i = 2, j = 1

在这个例子中，外层循环迭代三次（i = 0, 1, 2），而对于外层循环的每一次迭代，内层循环迭代两次（j = 0, 1）。因此，console.log 语句总共执行了 3 * 2 = 6 次。

1.3 嵌套 While 循环

你也可以以类似的方式嵌套 while 循环：

let i = 0;
while (i < 3) { // 外层循环
  let j = 0;
  while (j < 2) { // 内层循环
    console.log(`i = ${i}, j = ${j}`);
    j++;
  }
  i++;
}

这段代码产生与前面使用 for 循环的例子相同的输出。主要区别在于你需要手动初始化和增加循环计数器（i 和 j）。

1.4 混合循环类型

你甚至可以在彼此内部混合使用不同类型的循环：

let i = 0;
while (i < 3) { // 外层 while 循环
  for (let j = 0; j < 2; j++) { // 内层 for 循环
    console.log(`i = ${i}, j = ${j}`);
  }
  i++;
}

这个例子演示了你可以使用 while 循环作为外层循环，使用 for 循环作为内层循环，反之亦然。逻辑保持不变：外层循环每迭代一次，内层循环就完整执行一次。

2. 实战示例与演示

嵌套循环在许多场景中都很有用。让我们探索一些实际的例子。

2.1 示例 1：创建一个 2D 数组（矩阵）

嵌套循环通常用于创建和操作二维数组（也称为矩阵）。

// 创建一个填充了 0 的 3x3 矩阵
const matrix = [];
for (let i = 0; i < 3; i++) {
  matrix[i] = []; // 初始化行
  for (let j = 0; j < 3; j++) {
    matrix[i][j] = 0; // 将每个元素设置为 0
  }
}
console.log(matrix);

// 输出:
// [
//   [0, 0, 0],
//   [0, 0, 0],
//   [0, 0, 0]
// ]

在这个例子中，外层循环遍历矩阵的行，内层循环遍历列。对于每一行，我们要创建一个代表列的内部数组，然后将值 0 赋给每个元素。

2.2 示例 2：乘法表

让我们使用嵌套循环创建一个乘法表。

// 生成 1 到 5 的乘法表
for (let i = 1; i <= 5; i++) { // 外层循环: 行
  let row = "";
  for (let j = 1; j <= 5; j++) { // 内层循环: 列
    row += (i * j) + "\t"; // 计算乘积并添加制表符
  }
  console.log(row); // 打印该行
}

输出：

1       2       3       4       5
2       4       6       8       10
3       6       9       12      15
4       8       12      16      20
5       10      15      20      25

外层循环遍历表的行，内层循环遍历列。对于表中的每个单元格，我们计算行号和列号的乘积，并将其添加到 row 字符串中。最后，我们在外层循环的每次迭代中打印 row 字符串。

2.3 示例 3：在 2D 数组中搜索

嵌套循环可用于在 2D 数组中搜索特定元素。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const target = 5;
let found = false;

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] === target) {
      console.log(`在 matrix[${i}][${j}] 找到了 ${target}`);
      found = true;
      break; // 找到后退出内层循环
    }
  }
  if (found) {
    break; // 找到后退出外层循环
  }
}

if (!found) {
  console.log(`${target} 未在矩阵中找到`);
}

在这个例子中，外层循环遍历矩阵的行，内层循环遍历列。如果当前元素等于 target 值，我们打印元素的位置并将 found 标志设置为 true。然后我们使用 break 语句退出内层和外层循环，因为我们已经找到了元素。

2.4 示例 4：比较两个数组中的元素

嵌套循环可用于比较两个数组之间的元素。

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 5, 7, 9];

for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    if (array1[i] === array2[j]) {
      console.log(`发现共同元素: ${array1[i]}`);
    }
  }
}

这段代码遍历 array1 的每个元素，并将其与 array2 的每个元素进行比较。如果发现共同元素，它会向控制台打印一条消息。