1. 这是你编程路上最关键的转折点
第六天，终于轮到循环结构和数组了。如果前面几天你还在跟着教程敲代码、理解变量和条件判断，那今天这套组合拳打完，你会第一次感受到“程序真的能批量干活”。我见过太多初学者卡在这一天：循环的嵌套看不懂，数组的下标绕晕，明明照着代码敲了一遍却怎么都跑不出预期结果。但说实话，只要你把今天这两个概念啃透了，往后不管是做网页交互、数据处理还是写个小工具，你都会觉得顺手很多。
先说清楚今天要解决的痛点：你写程序的时候，是不是经常碰到这种事情——要把全班50个人的成绩都加一遍，你难道真写50行a1 + a2 + a3？要把一个列表里的每个名字都打印出来，你难道手动写100行print(name1)？循环结构就是专门用来消灭这种重复劳动的，而数组（更准确地说是数组这种数据结构）就是用来把“一堆相关数据”统一装起来、方便循环去批量处理的。二者搭配起来，你才算真正开始用程序员的思路解决问题，而不是用蛮力堆代码。
这篇文章不再重复教材上那种干巴巴的定义，我会直接用实际案例带你拆解“什么时候用循环、循环怎么写不绕”“数组到底怎么理解、下标为什么总搞错”，再把两者结合起来的实战场景、高频报错和调试技巧一次性讲透。无论你是自学的零基础新手，还是跟着培训营课程一步步走的学员——只要你处在“学完变量和条件语句、正要看循环数组”这个阶段，这篇文章就是为你准备的。我今天讲的所有思路和案例，都是基于真实学习和教学场景中反复打磨过的通用做法。
2. 循环结构：不只是“重复执行”，而是“让程序替你跑腿”
2.1 三种循环的定位差异，理解了就不需要死记语法
很多初学者拿到for、while、do-while三种循环就头大：长得不一样、语法记不住、不知道该用哪个。我先给你一个特别直白的判断标准，你按这个标准选，基本不会错：
- 你明确知道要循环多少次，或者循环次数跟某个数字有直接关系——用
for。 - 你根本不知道要跑几轮，只知道“满足某个条件就继续，不满足就停”——用
while。 - 不管条件成不成立，你都想先跑一次再说——用
do-while。
举个例子你就明白了。你要打印1到100，这就是明确知道跑100次，选for。但你要写一个“用户输入密码，错误就重新输，直到正确为止”的功能，你事先根本不知道用户会输错几次，这就是典型的while场景。而do-while呢——我教学生的时候最喜欢拿游戏里的“确认弹窗”举例：弹窗先弹出来，不管用户点“确定”还是“取消”，这个弹窗都已经展示过一次了，之后才判断要不要再弹。这种“先做一次、再判断”的场景，就是do-while的用武之地。
理解差异比背语法重要得多。你如果只会在固定句式里改数字，换个场景就懵了；但你一旦想清楚“我到底是知道次数还是只知道条件”，写什么循环都是顺势而为。
2.2 循环三要素：初始化、条件、更新——缺一个就是死循环
不管是哪一种循环，心里都必须绷着一根弦：循环由三个要素组成。很多同学写while循环写成了死循环，十有八九就是漏了要素。
- 初始化：循环变量从什么值开始。
- 条件：满足什么条件才继续循环。
- 更新：每一轮循环结束之后，循环变量怎么变。
我给你看一个典型的反面教材，某同学想用while从1加到10，结果程序卡死了：
let sum = 0; let i = 1; while (i <= 10) { sum = sum + i; // 这里漏掉了 i = i + 1; } console.log(sum);这个程序不是报错，而是“卡住不动”，因为i永远等于1，i <= 10永远成立，循环就永远出不来。实际上很多初学者第一次碰见死循环都是这个原因。调试的时候怎么办？你第一反应应该是看循环变量有没有被更新。我把这种问题叫“循环三缺一”，跟打麻将一样，缺了任何一张牌，这局就玩不下去。
2.3 嵌套循环：别被“循环套循环”吓住，它只是日历上的日期
循环里套循环，听起来很唬人，其实特像你看日历：外层的year从2020走到2024，每走一年，内层的month就要从1月走到12月。外层跑1次，内层跑12次。你用程序写出来就是这个样子：
for (let year = 2020; year <= 2024; year++) { for (let month = 1; month <= 12; month++) { console.log(year + "年" + month + "月"); } }这里的关键就是记住“外层走一步，内层走完一整圈”。很多人打印九九乘法表时写不出来，就是没搞懂这一层关系。其实嵌套循环在内层开始之前，你可以先做一次“内层循环的输出清空”之类的操作，这就是很多算法题里“每轮重新初始化临时变量”的雏形。
我在教嵌套循环的时候，经常会让学员先别着急敲代码，而是手写一遍“外层第1次进去之后，内层会打印哪些东西；内层退出后，外层第2次进去，内层又从头开始打印哪些东西”。把流程走一遍，你脑子里就会建立“循环是怎么一层层推进的”画面。这个习惯建立起来之后，后面的二维数组操作（比如矩阵打印、图像像素遍历）你都会觉得顺理成章。
2.4 循环控制：break 和 continue 不是你想用就能乱用
循环次数控制住了，还要学会“中途叫停”。我强调一下这两个词：break是彻底跳出整个循环，continue是跳过当前这一轮、直接进入下一轮。
场景很好区分：你在一排订单里找“金额大于1000的第一单”，找到就停——这就是break。你统计一批成绩时，决定把低于60分的都跳过不计入——这就是continue。拿代码说事：
// break 示例：找到第一个大于1000的订单金额就停 const orders = [300, 800, 1500, 200, 999]; for (let i = 0; i < orders.length; i++) { if (orders[i] > 1000) { console.log("找到了", orders[i]); break; // 找到后立刻跳出，不再往后遍历 } } // continue 示例：跳过60分以下的成绩，只统计及格分 const scores = [55, 88, 42, 100, 73]; let total = 0; for (let i = 0; i < scores.length; i++) { if (scores[i] < 60) { continue; // 不累加，直接进入下一轮 i++ } total += scores[i]; } console.log(total);但新手最容易犯的错误是：在嵌套循环里用了break，以为能跳出所有循环，结果它只跳出了内层循环。这是一个极其经典的坑。你要是想“跳出外层”，一般的写法是设一个标志位，在内层判断满足条件后把标志位改成false，外层循环再根据这个标志位决定要不要也退出。我的建议：刚开始接触循环控制的时候，不要把break和continue用得过于花哨，先把最纯粹的单层循环玩明白再说。
3. 数组：你不再操作单个数据，而是操作一整批数据
3.1 数组存在的意义：就是为了配合循环而生
跳出单打独斗的思维模式。你以前写变量，可能是score1 = 90、score2 = 85、score3 = 96……一旦有50个学生，你就写50个变量？别开玩笑了。数组就是专门用来装“同类型的一组数据”的容器，你只需要一个名字，就能管理一整批数据。
数组配合循环，基本上就是你在写业务代码时用到的最频繁的组合模式。比如你要给全班成绩求和，核心代码其实是同一套套路：
const scores = [90, 85, 96, 88, 100]; let sum = 0; for (let i = 0; i < scores.length; i++) { sum += scores[i]; } console.log(sum);你注意看，不管数组里是5个成绩还是500个成绩，循环体的代码根本不用改，变的只是数组本身。这就是数组和循环搭配的最大价值——代码量不随着数据量增长。我经常跟学生说：程序员的终极偷懒方式，就是把“重复动作”交给循环，把“批量数据”装进数组，然后坐等机器帮你干活。
3.2 下标从0开始：这不是故意难为你，是计算机的“偏移量”思维
数组下标从0开始，这个知识点几乎每个初学者都栽过跟头。我当年学的时候也特别不理解：明明生活中数东西都是从1开始，为什么数组偏要从0开始？后来才知道，数组在内存里的本质是一段连续的空间，下标其实不是“第几个”的意思，而是“离起点偏移了多少个位置”。
第一个元素就在起点，所以偏移量是0。第二个元素离起点隔了一个位置，偏移量是1。以此类推。所以访问arr[0]实际上是“从数组起始位置移动0格后取出来的值”，arr[3]是从起始位置移动3格后取出来的值。你如果非要用“第几个”去理解，那就记住口诀：下标等于“第几个”减1。第5个元素的下标是4，最后一个元素的下标是arr.length - 1。这个搞不清楚，后面你遍历数组就一定会出现“越界访问”或者“最后一个元素丢了”的问题。
3.3 数组的CRUD基本功：增、删、查、改
数组之所以好用，是因为它自带一堆操作方法和属性。你至少要把这些基本功打牢：length属性拿长度、push往末尾加元素、pop从末尾删元素、unshift往头部加元素、shift从头部删元素。我直接给你看一段操作汇总：
let fruits = ["苹果", "香蕉"]; fruits.push("橘子"); // 末尾追加 -> ["苹果", "香蕉", "橘子"] fruits.unshift("西瓜"); // 头部添加 -> ["西瓜", "苹果", "香蕉", "橘子"] fruits.pop(); // 删除末尾 -> ["西瓜", "苹果", "香蕉"] fruits.shift(); // 删除头部 -> ["苹果", "香蕉"] console.log(fruits.length); // 2 console.log(fruits.indexOf("香蕉")); // 1，找下标这里面我要特意提醒一件事：pop和shift不只是删元素，它们还会把“被删掉的那个元素”作为返回值给你，所以你可以用它来实现“从数组里取一个元素并移除”的效果。很多后端同学处理任务队列的时候就是用shift挨个取出任务来处理的。
另外，查找元素时indexOf找不到会返回-1，很多初学者忘了判断这个值，直接拿-1去当下标用，结果取了个undefined，排查半天也不知道错哪了。记住：凡是数组下标用之前，先想想这个下标是真的存在吗？
3.4 数组遍历的几种姿势：哪种最适合你？
遍历数组，其实就是“把数组里每个元素挨个拿出来处理一遍”。最基础的是for循环加下标，但后来出现了更优雅的for...of，专门用来遍历数组里的值，不需要关心下标：
const names = ["张三", "李四", "王五"]; for (const name of names) { console.log(name); }如果你还需要下标，那传统for循环依然是最直白的。但你要是又想要值、又想要下标，JavaScript 里还有一个forEach，它能把“值”和“下标”同时传进回调函数。我建议新手一开始不要贪多：先用标准for循环把“下标 + 数组长度 + 取值”这条链路彻底搞清楚，因为这是所有编程语言通用的最底层逻辑。等熟练了，再去用更简洁的写法提升效率。
我自己在实际带项目的时候就发现，很多用高级遍历方法写得很爽的同事，一旦碰到“数组里相邻两个元素两两比较”的算法题，还是会绕回标准for循环去处理。因为底层能力就是建立在“下标控制”上的，基础不牢，后面全是空中楼阁。
3.5 二维数组：一张Excel表格如何映射成代码
二维数组的本质是“数组里的元素还是数组”。你就把它想成Excel表格：外层数组是行，内层数组是这一行的每一格。遍历二维数组，自然就是两层循环：外层循环走行，内层循环走列。
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; for (let i = 0; i < matrix.length; i++) { let rowStr = ""; for (let j = 0; j < matrix[i].length; j++) { rowStr += matrix[i][j] + " "; } console.log(rowStr); // 每行输出一个字符串 }这套逻辑看起来简单，但一旦你实际面对“二维数组求和”“找矩阵里的最大值”这类任务时，最容易犯的错就是i和j搞混，取成了matrix[j][i]，结果矩阵非对称时直接报错或者数值怪异。我给个实在建议：你在写嵌套循环处理二维数组时，不要把变量名全都叫成i和j，你可以叫row和col——这样你的脑子不会绕。
4. 实战项目：让循环和数组真正合体的三个场景
4.1 场景一：统计班级成绩并排出等级
这是我把循环和数组结合起来教学时最常用的入门实战案例。需求是这样的：一个班有若干学生成绩，你要算出总分、平均分、最高分、最低分，并且把每个成绩划分出优良中差等级。先看数据结构和基础统计：
const scores = [72, 88, 45, 95, 60, 79, 100, 52]; let sum = 0; let max = scores[0]; let min = scores[0]; for (let i = 0; i < scores.length; i++) { sum += scores[i]; if (scores[i] > max) { max = scores[i]; } if (scores[i] < min) { min = scores[i]; } } console.log("总分:", sum); console.log("平均分:", sum / scores.length); console.log("最高分:", max); console.log("最低分:", min);注意一个细节：max和min的初始值我设成了scores[0]，而不是0。因为如果成绩全是负数（虽然成绩场景少见，但业务里完全可能有负数金额），用0当最大值初始值，就会得到错误结论。这个“极值初始值用第一个元素”的习惯，你在很多算法题里都会用到。
等级划分其实不需要分支嵌套循环，你可以单独再来一个循环，也可以在原循环内部直接加条件判断。我一般建议单独再写一个循环，这样每一步逻辑更清晰：
for (let i = 0; i < scores.length; i++) { let grade = ""; if (scores[i] >= 90) { grade = "优秀"; } else if (scores[i] >= 75) { grade = "良好"; } else if (scores[i] >= 60) { grade = "及格"; } else { grade = "不及格"; } console.log("第" + (i + 1) + "个学生成绩" + scores[i] + "，等级：" + grade); }4.2 场景二：数组去重与筛选，找到你要的那条“漏网之鱼”
业务开发中，你经常会碰到一个数组里有重复数据，要你去重。我在这里教一个初学者最好理解的方法：新开一个空数组，遍历原来的数组，用indexOf判断新数组里有没有这个元素，没有才放进去。这就是利用循环加数组方法完成的经典筛选：
const raw = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]; const unique = []; for (let i = 0; i < raw.length; i++) { if (unique.indexOf(raw[i]) === -1) { unique.push(raw[i]); } } console.log(unique); // [3, 1, 4, 5, 9, 2, 6]这个方案的优点是逻辑直白、不需要额外知识储备，缺点是大数据量时效率一般。不过对新手来说，先把思路练通，后面再去接触Set去重之类的进阶写法也不迟。有时候我看到有些人一上来就丢给你十个高端的数组方法，那样初学者反而会迷失方向。先跑通再说，这是学习编程的朴实真理。
类似的筛选还可以是“只保留大于50的数”，思路一模一样：循环遍历，满足条件的放进新数组。你掌握了这个模式，后面所有“筛选类”的逻辑都会做了。
4.3 场景三：模拟一个简陋的“状态机”
循环加数组不只是用来算加法和打印，它的能力边界远比你想象的宽。举个例子：你在做一个猜数字游戏，用户一共可以猜5次，每次猜的数字放到一个数组里，最后游戏结束的时候要列出用户猜过的所有值。这个场景就是数组和循环的配合，外加break控制提前退出。
const secret = 37; const history = []; let attempts = 5; while (attempts > 0) { // 这里假设用户输入是外部提供的 const guess = 50; // 写死只是为了展示逻辑 history.push(guess); if (guess === secret) { console.log("猜对了，用的次数：" + history.length); break; } attempts--; } console.log("猜测记录:", history);你看，history这个数组把每一次的猜测都记录了下来，循环负责一次次接收输入和控制次数。这就是“循环负责流程、数组负责记录”的典型分工。后面你学到“事件循环”“任务队列”这些更高级的概念时，本质上也是这套思路在支撑。
5. 高频报错与排查技巧：我从无数次翻车现场里总结的干货
5.1 数组越界报错：你访问了一个不存在的下标
最常见的报错之一就是“数组越界”。比如：
const arr = [10, 20, 30]; console.log(arr[3]); // 下标3不存在（只有0、1、2）不同的语言表现不一样。有的语言直接报错，比如 Java 会抛异常；有的语言像 JavaScript，不报错，但会给你一个undefined。这个更阴险，因为程序不崩，但它给你的值是undefined，你拿undefined去做计算，结果变成NaN，然后整个程序的结果都是错的了。所以见到NaN的时候，别急着查运算逻辑，先检查是不是从数组里取到了不存在的下标。
排查思路我给你列成清单：
- 打印数组的
length，先确认数组里到底有几个元素。 - 确认循环变量是从0开始还是从1开始。
- 确认访问下标的边界值是不是
arr.length - 1。 - 在关键取值那行打日志，把当前下标和取到的值都打出来。
5.2 死循环的快速定位：在循环里加打印或者设置最大执行次数
死循环的经典特征就是程序卡死、CPU占用飙升、页面无响应。我遇到很多初学者问我“为什么我的浏览器卡死了”，多半就是while循环忘了更新循环变量。更隐蔽的是条件写反了，比如while (count < 10)写成了while (count > 10)，这个一旦变量初始值恰好大于10，循环一次都不进，跟死循环恰恰相反——程序不卡，但什么也不干。
排查死循环最快的方式是“限流”：在循环里加一句console.log，看它打印到哪一步停了或刷屏了。如果刷屏了，立刻关掉程序，然后逐行检查三要素。还有一种办法是设置“安全阀”——比如你怀疑某个while可能死循环，可以先加一个计数变量，超过1万次就强制break：
let safeCount = 0; while (某种条件) { // 处理逻辑 safeCount++; if (safeCount > 10000) { console.log("疑似死循环，强制退出"); break; } }这个技巧在实战中看起来不够“优雅”，但在调试阶段它是实实在在的救命稻草。
5.3 逻辑错位：循环变量的起始和终止条件
还有一种错误特别坑：不是语法错误，也不是数组越界，而是循环次数少了一次。比如你想遍历一个长度为10的数组，结果写成了i <= arr.length，然后取arr[10]就出现了越界；或者想打印1到10，写的是for (let i = 1; i < 10; i++)，结果只打印到9。这类问题最有效的排查方式，就是在循环里打印当前下标和值，自己对比一下跟预期差在哪里。
我经常遇到学员问：“老师为什么我最后一项没打印出来？”我一看代码：i < arr.length是对的，问题出在初始值i = 1，把第一个元素跳过了。这就是为什么我前面反复强调下标从0开始的本质。这些问题本身不难，但当它们出现在几百行代码里时，就很考验你的排查基本功了。所以从一开始养成“打印关键变量”的习惯，能替你省下大把掉头发的时间。
5.4 数组复制误修改：你改的不是副本，是本体
这个坑虽然跟循环没有直接关系，但往往是在循环操作数组时暴露出来的。很多初学者想“复制”一个数组，就直接const newArr = oldArr;。在 JavaScript 里，这么做得到的不是副本，而是对同一个数组的引用。你改newArr，oldArr也跟着变了。真正想复制一个数组，可以用slice()或者展开运算符[...oldArr]。
嵌套循环遍历二维数组时也会碰到类似的问题：你想复制一个二维数组，但只做了浅拷贝，结果内层数组还是同一个引用，修改一个“副本”里的元素，原数组也变了。遇到这类问题，请记住一个原则：如果你在循环里修改了一个数组，而另一个数组的数据“神秘地”跟着变了，先检查是不是引用共享了。
6. 配合调试工具：用断点和监视列表看穿循环每一轮的变化
6.1 为什么光靠打印日志不够？
前面我强调了很多次要打印日志，但老实说，在循环场景里，纯粹靠console.log效率不高——尤其当循环要跑几十上百次的时候。你看到满屏的日志，脑子很容易被刷晕。所以我想认真介绍一下调试工具里的断点配合“监视”功能，这才是真正精准定位循环问题的利器。
无论是浏览器的开发者工具，还是主流代码编辑器的调试器，核心思路都一样：在循环体内部设置一个断点，程序每次跑到这一行就会暂停；然后你再配合“单步执行”功能，一行一行地看着变量的变化。这个过程就像电影的逐帧播放，你可以清晰地看到i是怎么从0变成1、再从1变成2的，sum是每轮怎么累加的。
6.2 结合断点排查一个数组求和Bug
我拿一个真实场景演示：某同学写了一个“求偶数之和”的程序，期望对[2, 5, 8, 3]输出10（2+8），结果输出了13。我让他别盲猜，设个断点。然后他看到：第一轮i=0，arr[0]是2，加进sum变成2，没问题；第二轮i=1，arr[1]是5，问题来了——判断arr[1] % 2 === 0时没拦住，5也被加进去了。他这才发现自己的条件写错了，把“能被2整除”判断成了“下标能被2整除”。这种错在空想时很难发现，但用断点看一眼，立刻原形毕露。
所以我特别建议：你从今天开始，别只用“跑一下、看结果对不对”的方式来验证代码。学习阶段多花一点时间在调试上，把断点和监视列表用熟练，这个习惯带来的回报在之后写复杂程序时会非常明显。很多人工作几年了还在靠console.log满天飞，归根结底是学习前期没有养成调试的习惯。
6.3 条件断点的妙用
还有一个进阶技巧叫“条件断点”。比如你怀疑循环跑到第50轮时出了问题，但第1到第49轮你不关心，不想一次次按“继续”。那你就可以给断点加一个条件i === 50，程序只有在这个条件成立时才会停下来。这方法在处理大数据量遍历时极其高效。我当年第一次用条件断点时，觉得以前一行行按F8的自己简直是原始人。
我建议你把这几个调试动作练成肌肉记忆：设置断点、单步跳过、单步进入、查看监视变量、添加条件断点、清理断点。这套组合拳打熟了，你以后排查任何跟循环相关的问题都会快人一步。
7. 练手任务与扩展思路：学完今天你能做哪些小工具
7.1 必做的入门任务清单（照着做就对了）
任务设计跟前面讲解的场景保持连贯。你可以自己建一个练习文件，把下面这几个题目挨个写一遍：
- 用循环把1到100之间所有能被3整除的数打印出来，并统计个数。
- 给定一个数组，写代码找出其中第二大的数（提示：先遍历找最大，再想办法排除最大找第二）。
- 给定一个字符串数组，把所有长度大于4的字符串拼接到一起输出。
- 自己创建一个长度为10的数组，用循环把相邻两个元素交换位置（前后互换）。
每个题目写之前，先别急着敲键盘，在纸上写出循环的三要素：初始化是什么、条件是什么、更新是什么。哪怕你只会写最笨的写法也没关系，关键是先跑通。跑通之后，再试着换一种循环写法或换一种思路，看看结果是否一致。
7.2 进阶扩展：把循环数组能力组合成小项目
如果上面的任务你已经轻松搞定，我建议你再往前走一小步：把循环和数组组合成一个真正有点用途的工具。比如：
- 用数组存一份待办事项，编写一个循环来遍历并打印“未完成”的事项。
- 模拟购物车结算：一个数组存单价，另一个数组存数量，循环计算总价。
- 写一个“猜数字游戏”的完整版本，把每次猜测都放进历史数组，最后打印出你的猜测路径。
这些练习的好处在于，它们会让你体会到“数据结构 + 流程控制”是如何组合出有实际意义的程序的。你可能会觉得它们还很简单，但很多知名应用的核心模块，底层也不过是类似的循环加数组的组合逻辑在反复运转。
7.3 从今天开始建立“分解问题”的意识
我特别想多说一句：学完循环和数组之后，你面临的真正挑战已经不再是“语法会不会”，而是“拿到一个问题，怎么把它拆成一步步可以用循环处理的子问题”。这个“拆”的能力是后面所有编程进阶的基石。
比如“统计一段文本里每个单词出现次数”这个问题，第一反应不是去背某个高级函数，而是拆解成：把文本按空格拆成单词数组、遍历每个单词、用一个容器记录每个单词到目前为止出现了几次——数组（或对象）自然就变成了那个“容器”。这就是程序员思维。当你习惯用这种思路去拆解问题，你学任何框架、任何语言都会比旁人快得多。
8. 关于Day 6，我个人教学里最想叮嘱的一件事
第6天这个位置在整套入门课程里其实非常微妙。前面几天是基础概念，后面马上要接触函数、对象、复杂逻辑。很多同学在Day 6掉队，不是因为循环数组本身有多难，而是因为从这里开始，代码的“抽象层次”变了——你不再一行行指挥程序“做什么”，而是开始定义一批数据、然后用一套规则去批量处理它们。这个思维转变对有的人来说是顿悟，对有的人来说则需要反复练习。
我自己带过不少零基础的人，发现那些能顺利跨过这天的人，都有一个共通点：他们会花时间亲手在纸上“人肉执行”循环，把每一轮变量变化写下来。这看起来笨，但那恰恰是在真正理解程序执行流程。我建议你今晚就试试：随便写一个for循环，把i、sum的每一步变化都手写记录下来。这个过程大概只需要十分钟，但它给你建立的感觉，远看十遍教程都有用。
等你哪天能在不看资料的情况下，不假思索地写出一段“遍历数组并筛选出符合条件的元素”的代码，恭喜你，Day 6你就真正过关了。后面你会发现，函数、对象、事件处理这些东西，其实都在反复利用你这两天建立的思维。这一步踏实了，整个入门阶段最陡的那段坡，你就已经爬上去了。
