15. 循环嵌套实战

循环里套循环，外层管行、内层管列。用九九乘法表、星星图形、求和找数三个实战把它拿下。

核心三步：
① 外层 i——走行，一圈走一行
② 内层 j——走列，一行里一列列看
③ 两层嵌套——行 × 列 = 全部格子

坑：内外层变量名搞混、内层循环没清屏。

15.1 互动演示

15.2 知识点逐条讲解（配合代码）

① 循环套循环：外层管行，内层管列

一个循环里再套一个循环，像日历：外层翻月份，内层一个月把每一天都翻一遍。规则记住一句：外层循环走 1 步，内层循环完整跑一整圈。外层管"第几行"，内层管"这行有几列"。

// 外层：管行数（第 1 行到第 9 行）
for (let i = 1; i <= 9; i++) {
  // 每开始一行，先清空这行的内容
  let str = "";
  // 内层：管这行有几列（第 i 行就有 i 个式子）
  for (let j = 1; j <= i; j++) {
    // 把一个式子拼到这行后面
    str = str + j + "×" + i + "=" + (i * j) + " ";
  }
  // 一行拼完，打印这一行
  console.log(str);
}

② 九九乘法表（经典必背）

规律就一句话：第几行，就打印几个式子（第 i 行就 j 从 1 跑到 i）。这是嵌套循环最经典的例子，要能不看资料默写给别人。

③ 星星图形：把算式换成星号

思路一模一样，只是把"拼式子"换成"拼星号"。方块：每行固定 5 个；三角：第 i 行就 i 个。

// 5×5 方块：外层 5 行，每行内层拼 5 个星
// 外层管行：一共 5 行
for (let i = 1; i <= 5; i++) {
  // 每开一行，先清空这行的内容
  let line = "";
  // 内层管列：每行固定 5 个星
  for (let j = 1; j <= 5; j++) { line += "*"; }
  // 一行拼完，打印这行
  console.log(line);
}

// 直角三角：第 i 行就拼 i 个星（内层 j 从 1 到 i）
// 外层管行：第几行
for (let i = 1; i <= 5; i++) {
  // 每开一行先清空
  let line = "";
  // 内层管列：这行拼 i 个星
  for (let j = 1; j <= i; j++) { line += "*"; }
  // 打印这行
  console.log(line);
}

④ 1~100 求和 & 找数实战

// 1~100 累加：先准备一个 0 的"存钱罐"，一圈圈往里加
let sum = 0;
for (let i = 1; i <= 100; i++) {
  // 也可以简写 sum += i
  sum = sum + i;
}
// 5050
console.log(sum);

// 找数字 47，找到就 break 不浪费后面的圈
for (let i = 1; i <= 100; i++) {
  if (i === 47) {
    console.log("找到了：" + i);
    // 找到就停，别再白跑
    break;
  }
}

如果你求和时忘了先建一个 sum = 0 的存钱罐，第一次往里加时就会变成 undefined + 100 = NaN。所以求和前先把容器清零；找数找到就 break，别白跑后面的圈。

实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：九九乘法表；做日历的月视图；购物车按店铺分组渲染商品。

② 常见的问题：外层内层都用 i 把自己搞混；九九表行列写反打不出来。

③ 解决思路：外层用 i、内层用 j 别混用；先把内层一行打对，再套外层循环。

本页重点