← 返回目录

15. 循环嵌套实战

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

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 += `${j}×${i}=${i * j} `;  // 把一个式子拼到这行后面
	}
	console.log(str);              // 一行拼完，打印这一行
}
		

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

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

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

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

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

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

④ 1~100 求和 & 找数实战

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

// 找数字 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 别混用；先把内层一行打对，再套外层循环。