3.9 嵌套循环与网格思维

嵌套循环就是循环里面再放一个循环。只要数据有二维结构，就经常会用到它：行列、日历、像素网格、座位表、表格、棋盘。

关键思想很简单：外层循环每执行一轮，内层循环通常会完整执行一遍。

行与列

下面的代码会打印一个 3 行 4 列的坐标网格：

for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 4; col++) {
    console.log(`第 ${row} 行，第 ${col} 列`);
  }
}

外层循环控制行。内层循环控制当前行里的列。

正在加载概念检查...

正在加载交互实验...

一行一行构造文本

打印或生成图案时，通常在外层循环里构造当前这一行：

for (let row = 1; row <= 4; row++) {
  let line = "";

  for (let col = 1; col <= row; col++) {
    line += "*";
  }

  console.log(line);
}

输出结果：

text

*
**
***
****

这和 Python 里的嵌套循环思路一致，只是 JavaScript 里常常先拼出字符串，再打印或插入页面。

用 JS 创建小表格

嵌套循环也可以生成 HTML：

let html = "<table>";

for (let row = 1; row <= 3; row++) {
  html += "<tr>";

  for (let col = 1; col <= 3; col++) {
    html += `<td>${row},${col}</td>`;
  }

  html += "</tr>";
}

html += "</table>";
document.querySelector("#grid").innerHTML = html;

这不一定是最终项目里最推荐的写法，但它能说明嵌套循环为什么有用：一个循环决定行，另一个循环填充单元格。

让嵌套循环保持可读

row、col、i、j 这些名字要谨慎使用。当循环表示真实概念时，变量名最好直接写出那个概念：

for (let week = 1; week <= 4; week++) {
  for (let day = 1; day <= 7; day++) {
    console.log(`第 ${week} 周，第 ${day} 天`);
  }
}

正在加载本节练习...