编程入门Day6：循环结构与数组遍历，跨过自学分水岭

1. 为什么Day 6是自学编程路上的分水岭

很多自学编程的朋友会有一种感觉：前五天学变量、学数据类型、学运算符，都还能靠死记硬背撑过去，但到了Day 6讲循环结构和数组，突然就有点跟不上了。上课能听懂，一到自己写就卡壳。这个现象太正常了，因为从这一天开始，你不再只是记录单个数据、执行单条语句，而是开始接触真正的“程序逻辑”。

循环结构解决的是“重复劳动”的问题。举个最直观的例子，你想计算全班30个人的平均分，如果不学循环，你会怎么写？把30个变量相加？score1 + score2 + ... + score30，写到第10个你就想放弃了。更别说将来处理300人、3000人的场景。数组呢，解决的是“成批数据”的存储问题。在循环出现之前，你只能给每个数据单独取一个名字，而有了数组，我们可以给一整组数据用一个名字，用编号去访问每一个。

这两样东西单独拎出来都还好理解，让初学者真正蒙圈的，是它们俩的组合：用循环去遍历数组。一旦你掌握了这个组合，你的代码能力就跨过一个关键门槛，能从“写一次性脚本”进入“写批量处理程序”的阶段。这也正是循环和数组在一门课程里往往连着讲的原因——它们就像一对齿轮，单转没意义，咬合在一起才能带动整台机器。

所以这篇文章不会只丢给你几个语法规则，我会把循环的三种形态、数组的内存逻辑、两者的组合套路、新手最容易翻车的几个点，全部摊开讲一遍。示例统一用JavaScript写，因为你在浏览器按F12打开控制台，就能直接跑文章里的每一段代码，不需要装任何开发环境。语言只是载体，逻辑本身是所有编程语言通用的。

2. for、while、do-while：三种循环怎么选

2.1 for循环：最适合“我已经知道要跑几圈”的场景

for循环大概是绝大多数人学会的第一种循环，它长这样：

javascript复制for (let i = 0; i < 5; i++) {
    console.log("第" + i + "次执行");
}

你把它的三段拆开看：let i = 0 是起点，i < 5 是结束条件，i++ 是每一步的变化。合起来就是：从0开始，只要还小于5，就执行一次大括号里的内容，每次执行完把i加1。

用生活里的场景类比，你去操场跑步说“我要跑5圈”，这就是for循环。因为你明确知道要执行的次数。学循环的时候我特别建议你做一件事：手写一个执行过程表，也就是把每一轮循环变量i的值、条件判断结果、打印内容都列出来。别嫌麻烦，写过三五张表之后，你对循环的理解会超过很多直接抄代码的人。

2.2 while循环：更适合“我只知道什么时候停下来”

while循环的语法更简单，它就一个条件判断：

javascript复制let n = 100;
while (n > 0) {
    n = n - 10;
}

这段代码的意思是：只要n还大于0，就执行大括号里的内容，每次减10。什么时候停？不知道，反正等n减到不大于0了自然停。

什么时候应该用while？最典型的场景是你根本不知道要循环多少次，只清楚一个“停止条件”。比如你要读取用户输入，直到用户输入quit才退出；或者你要不断把一个数值折半，直到它小于某个阈值。这种情况用for会有点别扭，因为你算不清楚到底要执行几次。用while，条件挂在门口，进去一次判断一次，非常自然。

等公交车的例子很贴切。你知道“车来了就走”，但你不知道车几点来，这就要while循环。如果改成“我要等5班公交车”，那才用for。

2.3 do-while循环：不管三七二十一，先执行一次再说

do-while和while长得像，差别只在一句话：while是先判断再执行，do-while是先执行再判断。

javascript复制let password = "";
do {
    password = prompt("请输入密码");
} while (password !== "123456");

这段代码不管用户第一次输入的密码对不对，都会先弹一次输入框，之后才检查条件。这种场景很典型——有些操作你本来就希望至少做一次，比如弹菜单、读一次输入、生成一次随机数。如果你用while写，就得在循环外面额外初始化一个值，硬凑第一次进入循环的条件，代码反而别扭。

初学者不用死记do-while，你只需要知道：for负责“次数固定”，while负责“条件控制”，do-while负责“至少执行一次”。写代码时先在脑子里把场景归一下类，选型就不会错。

2.4 break和continue：两个能改变循环节奏的关键字

循环不是只能老老实实从头跑到尾，当你需要中途离场或者跳过某一步时，有两个工具：break 是跳出整个循环，continue 是跳过本次循环剩余部分、直接进入下一轮。

javascript复制for (let i = 0; i < 10; i++) {
    if (i === 3) {
        continue; // 跳过i等于3这一次
    }
    if (i === 7) {
        break;   // 到i等于7直接退出循环
    }
    console.log(i);
}

这段代码最后会打印0、1、2、4、5、6。数字3被continue跳过，数字7触发break之后就不再执行。

很多初学者会纠结“我要不要用break，是不是显得代码不够优雅”，我的建议是：先别管优雅，把功能写对。break和continue就是循环的刹车和跳挡，该用就用。

3. 数组：被低估的“基础中的基础”

3.1 数组到底是什么

数组的本质是一块连续的内存空间，里面存了一排相同用途的数据，每个数据通过编号访问。这个编号，专业术语叫“下标索引”，从0开始计数。

javascript复制let scores = [88, 92, 77, 65, 90];
console.log(scores[0]); // 输出88
console.log(scores[2]); // 输出77
console.log(scores.length); // 输出5

你可以把数组想象成一栋公寓楼，scores 是楼的名字，每个房间编号从0开始。scores[0] 是0号房间，scores[1] 是1号房间，scores.length 是这栋楼一共有几间房。

有一个细节必须强调：数组的下标范围是0到length - 1。也就是说一个长度为5的数组，合法下标是0、1、2、3、4，下标5已经越界了。索引从0开始这个设计，几乎所有的编程语言都遵循，它起初是和计算机底层的指针偏移相关的，你不需要往深挖，但你一定要形成肌肉记忆：访问数组元素之前，先想想这个下标到底存不存在。

3.2 数组和循环结合：“遍历”是所有数组操作的根基

数组本身不能干太多事，它最大的价值在于可以被循环批量处理。所谓的“遍历”，就是通过循环把数组里每个元素都访问一遍。

javascript复制let scores = [88, 92, 77, 65, 90];
for (let i = 0; i < scores.length; i++) {
    console.log("第" + i + "个成绩是" + scores[i]);
}

我见过不少初学者把循环条件写成 i <= scores.length，这就是典型的“多跑一次”。前面说了，下标最大只能到length - 1，当i等于length的时候，访问的是不存在的元素。你可以这么记忆：for循环里的小于号，在这一类的遍历场景中几乎是固定搭配。

JavaScript里面除了老派的for循环，还提供了for...of这种更简洁的写法：

javascript复制for (let score of scores) {
    console.log(score);
}

看到区别了吗？for...of 不需要管下标，它直接把数组里的值一个一个取出来。好处是代码简短、不容易写错边界。坏处是你拿不到当前是第几个元素。如果只需要值，不需要位置，用for...of就很舒服；如果需要下标，还是老老实实用索引for循环。

3.3 数组的常用内置操作

除了手动遍历，数组本身还带了很多现成方法。这里我不打算把所有API列一遍，只挑最常用的几个说清楚，它们几乎每个项目里都会遇到：

你不要急着把这几个方法全背下来，知道有这些工具存在就行。真正写程序的时候，你自然会查文档。

4. 循环和数组组合拳：五个必须手敲的经典案例

这一节是文章的核心。你不必追求把代码背下来，而是要跟着每一段代码把“思路推演”走一遍。以下所有代码都可以直接放进浏览器控制台运行。

4.1 案例一：数组求和与平均值

需求：给定一个数组，计算所有元素的总和和平均值。

javascript复制let scores = [88, 92, 77, 65, 90];
let total = 0;
for (let i = 0; i < scores.length; i++) {
    total = total + scores[i];
}
let average = total / scores.length;
console.log(total);      // 412
console.log(average);    // 82.4

核心思路只有一个：定义一个累加变量 total，初始化为0。每循环一轮，就把当前元素加到total里。为什么total初始化成0而不是别的？因为0加上任何数都不改变这个数的值，这是累加器的标准初始值。如果你要算乘法累积，比如求阶乘，那初始值就要设成1，因为1乘以任何数都不改变它。

这个案例是所有数组题目的“地基”。后面的求最大值、统计数量，本质上都是“定义一个变量，在循环里不断更新它”这个套路。

4.2 案例二：找最大值和最小值（打擂台法）

需求：找到数组里的最大值和最小值。

javascript复制let numbers = [12, 45, 3, 78, 34, 56];
let max = numbers[0];
let min = numbers[0];
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
    if (numbers[i] < min) {
        min = numbers[i];
    }
}
console.log("最大值" + max); // 78
console.log("最小值" + min); // 3

这个方法有个形象的名字叫“打擂台法”。你先假设第一个人是擂主，后面的人一个个上来比，谁在最大值上更厉害谁就取代擂主。为什么初始值选 numbers[0] 而不是0？因为如果数组里全是负数，你拿0当最大值初始值，永远找不出真正的最大值——0比所有负数都大。初始值直接取数组第一个元素，是最稳妥的做法。

这里循环从 i = 1 开始，是因为下标0已经作为擂主了，没必要自己跟自己比一遍。

4.3 案例三：统计符合条件的元素个数

需求：统计数组中大于等于60分的成绩数量。

javascript复制let scores = [88, 45, 92, 37, 79, 60];
let count = 0;
for (let i = 0; i < scores.length; i++) {
    if (scores[i] >= 60) {
        count++;
    }
}
console.log(count); // 4

统计类问题的核心是“计数器”。计数器初始化为0，每满足一次条件就加1。这个场景太常见了：统计订单数量、统计异常数量、统计符合条件的用户数量……我经常跟朋友说，只要看到“统计”“有多少个”“共几件”这类词，第一反应就应该是定义一个count变量，然后在循环里找地方count++。

注意 count++ 是 count = count + 1 的简写，这类自增运算在计数场景里几乎必用。如果你是零基础，建议先把它写成完整形式，熟练了再用简写。

4.4 案例四：冒泡排序

排序是入门阶段绕不开的坎，而冒泡排序是最直观、最适合入门理解的一种。需求：把数组从小到大排序。

javascript复制let numbers = [5, 3, 8, 1, 2];
for (let i = 0; i < numbers.length - 1; i++) {
    for (let j = 0; j < numbers.length - 1 - i; j++) {
        if (numbers[j] > numbers[j + 1]) {
            let temp = numbers[j];
            numbers[j] = numbers[j + 1];
            numbers[j + 1] = temp;
        }
    }
}
console.log(numbers); // [1, 2, 3, 5, 8]

我建议初学者分三个层次去理解它。

第一层，内层循环的作用：从头到尾两两比较，如果前一个比后一个大，就交换位置。一遍跑完，最大的数像气泡一样冒到了最后一位。

第二层，外层循环的作用：让“冒泡”这个动作重复执行。每执行一遍，就有一个数归位，所以总共需要执行length - 1遍。

第三层，为什么内层循环的结束条件是 numbers.length - 1 - i？因为每一轮结束后，数组最后方的i个位置已经是排好序的，不需要再去碰它们。这个优化虽然不是必须的，但能让你真正理解循环变量在嵌套中是怎么协同的。

交换元素为什么要用临时变量 temp？你试试直接写 numbers[j] = numbers[j + 1]; numbers[j + 1] = numbers[j];，会发现两个值变成了同一个。原因是你先覆盖了左边，右边的旧值已经丢了。temp就像是你要换两个瓶子的液体，必须先找个空瓶倒腾一下。

4.5 案例五：线性查找与数组反转

需求一：在数组里查找某个元素的位置，找不到就返回-1。

javascript复制let fruits = ["苹果", "香蕉", "西瓜", "葡萄"];
let target = "西瓜";
let index = -1;
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === target) {
        index = i;
        break;
    }
}
console.log(index); // 2

这个就是线性查找：从头到尾挨个比对。这里用break是有讲究的，因为“查找”只要找到第一个匹配的就可以收工，继续跑下去没有意义，还可能带来额外开销。把index初始值设为-1，是为了区分“找不到”和“找到了但下标为0”这两种情况，这个技巧在以后写函数返回值时特别有用。

需求二：把数组倒过来。

javascript复制let arr = [1, 2, 3, 4, 5];
let reversed = [];
for (let i = arr.length - 1; i >= 0; i--) {
    reversed.push(arr[i]);
}
console.log(reversed); // [5, 4, 3, 2, 1]

看到循环条件 i >= 0 没？这是咱们前面讲的“倒序遍历”写法。初始化从最后一个下标开始，循环条件是大于等于0，每次i减1。这种逆向遍历的思路在很多算法里都会用到，值得养成习惯。

5. 循环和数组的六个常见翻车点，以及排查思路

这一节我要讲的，是我见过的初学者最容易踩的坑。每一个坑我都会展示“错误代码的样子”和“排查思路”，而不只是给正确答案。

5.1 死循环：循环条件永远为真

javascript复制// 错误示范：忘记在循环体内更新循环变量
let i = 0;
while (i < 10) {
    console.log(i);
    // 少了 i = i + 1;
}

这段代码执行后，浏览器控制台会一直输出0，直到页面卡死。这就是死循环。排查思路很简单：问自己三个问题——循环变量有没有被更新？更新语句有没有被执行到（比如被continue跳过了）？停止条件是否真的有可能满足？

万一真的跑出了死循环，在浏览器控制台里可以直接刷新页面，或者在控制台设置里点掉“停止”按钮。如果你用命令行跑Node.js，按Ctrl+C强制终止即可。不要慌，死循环是必经历的一课。

5.2 数组越界：访问了不存在的下标

javascript复制let arr = [1, 2, 3];
console.log(arr[3]); // undefined，不会报错，但这是隐患

在JavaScript里，越界访问不会让你崩溃，只是给你一个undefined，这正是它的隐蔽之处。你可能会在一个大程序里把这个undefined当成正常的0继续算下去，结果算出各种奇怪的结果。

养成两个习惯：一是写遍历时，条件里用 i < arr.length，不要写成 i <= arr.length；二是访问数组元素之前，在脑子里过一遍当前下标的取值范围。如果是真实的编程场景里，数组越界往往会导致程序崩溃，远没有浏览器这么温柔，所以从这个坑开始就要较真。

5.3 for循环里的条件写成赋值

javascript复制// 错误示范
for (let i = 0; i = 5; i++) {
    console.log(i);
}

i = 5 是赋值，不是判断相等。在不少语言里，这个条件结果是数字5，它被认为是真值，于是这个循环会变成死循环，而且i每次都会被重置成5，永远跳不出去。判断相等要写 i === 5 或者 i == 5。

排查技巧：如果你发现循环运行了好几轮但表现完全不符合预期，第一眼先检查条件里是 = 还是 == 还是 ===。这个错误在所有编程语言里都有，代码检查不仔细很难发现。

5.4 循环体内修改了数组的长度

javascript复制let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
        arr.push(arr[i] * 10);
    }
}

这段代码想要把数组里的偶数变成它的十倍追加到后面。但问题来了：每追加一个元素，数组的长度就变了，for循环的结束条件 i < arr.length 也跟着变，你会陷入“怎么都遍历不完”的困境。

解决办法是：如果要在遍历过程中修改数组长度，最好先把原始长度用变量缓存下来，循环只遍历原始长度那一部分；或者创建一个新数组来收集结果，不要在遍历时动原数组。

javascript复制let arr = [1, 2, 3, 4, 5];
let len = arr.length;
for (let i = 0; i < len; i++) {
    if (arr[i] % 2 === 0) {
        arr.push(arr[i] * 10);
    }
}

5.5 嵌套循环里内外层变量搞混

两个循环嵌套时，初学者经常写着写着，内层用了外层循环的变量i，或者把两个循环的边界条件弄反。冒泡排序是最典型的重灾区，代码里内外两层都用j，你还一改改错地方，结果排序结果错得匪夷所思。

我建议你在入门阶段给外层变量取名i、内层取名j就足够了，但一定要在每一行的注释里写清楚“当前是外层第几轮”“内层应该跑到哪里”。等你能一眼看出什么时候该写j < length - 1 - i，什么时候该写j < length的时候，再偷懒也不迟。

5.6 break只跳出了一层循环，而不是所有循环

javascript复制for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            break;
        }
        console.log(i + "-" + j);
    }
}

这个break只会终止内层循环，外层循环还会继续。如果你希望完全退出所有循环，需要额外设置一个标记变量，或者在满足条件时同时控制外层的循环变量，甚至直接在外层也判断一下：

javascript复制let found = false;
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            found = true;
            break;
        }
    }
    if (found) {
        break;
    }
}

其实你仔细想想，很多时候并不需要break那么多层，更好的做法是把这个查找过程封装成一个函数，找到结果后直接用return返回。这个想法现在不用急着实现，等学到函数自然就理解了。

6. 学完今天的课，你该会什么：自测题与练习方法

6.1 五道自测题，检验你Day 6的真实水平

我特别不建议你用“我看懂了”来判断自己学会了没有。看懂的错觉太常见了，真正有效的方法是动笔写。下面这五道题，希望你每道都能不看答案独立写出来。

1. 用循环求1到100之间所有奇数的和。
2. 给定数组[23, 45, 12, 67, 34, 89, 5]，找出所有偶数的个数并计算它们的总和。
3. 把数组["a", "b", "c", "d"]的内容倒序打印。
4. 打印九九乘法表。
5. 统计一段字符串里字母e出现的次数（提示：字符串也可以用下标访问字符）。

第五题如果你能想到“把字符串当成一个数组去遍历”这个思路，说明你已经理解了下标和遍历的本质。前四题是循环与数组的直接应用，最后一题是两者概念的延伸。

6.2 一个更重要的能力：在纸上推演代码

手写代码的时候，我最常推荐的做法是“纸上演算”。你拿一张纸，画一个表格，左边写上循环变量的每一轮数值，右边写上数组内容的变化。比如冒泡排序，用三个数字[3, 2, 1]走一遍完整流程，看看每一轮之后数组变成了什么样子。

这一步看似费时，实际上是最快的。因为刚开始接触循环的人，大脑里还没有建立起“程序逐行执行”的动态图景。你以为你理解了for循环的三段式结构，但一进到嵌套循环、一碰到数组内容的修改，脑子就转不过来了。这时候一张纸就能帮你把抽象的流程变成具体的画面。

你可以在纸上走完一遍流程后，再回到代码里重新看一遍，常常会有“原来这一行是这个意思”的顿悟感。这种从具体到抽象的循环往复，比看十遍教学视频都管用。

6.3 如果还想往前走一步：嵌套循环与二维数组

今天的进阶方向是嵌套循环和二维数组。二维数组可以理解成“数组的数组”，比如一个班有5排座位，每排坐了4个人，你可以在代码里表示成：

javascript复制let seats = [
    ["A1", "A2", "A3", "A4"],
    ["B1", "B2", "B3", "B4"],
    ["C1", "C2", "C3", "C4"]
];

访问某个位置要用两个下标，比如seats[1][2]是“B3”。要遍历它，就得用双重循环，外层跑行，内层跑列：

javascript复制for (let i = 0; i < seats.length; i++) {
    for (let j = 0; j < seats[i].length; j++) {
        console.log("第" + (i + 1) + "排第" + (j + 1) + "个座位是" + seats[i][j]);
    }
}

二维数组本身并不神秘，你就把它当成一张表格：行、列两个维度，正好对应两个循环变量。它和冒泡排序里的嵌套循环用的是同一套逻辑，所以如果你能把冒泡排序想明白，二维数组的遍历就是顺手的事。反过来，二维数组跑通之后，解决九九乘法表这类题目也会顺手很多。

最后说点个人感受。循环结构是很多人的第一道坎，也是一个分水岭，迈过去之后再看后面的字符串处理、函数、对象，都会顺畅很多。两天前你可能还在纠结变量怎么命名，但到了Day 6，你已经有能力写出一段真正有逻辑的程序了。如果今天学完还有点晕，别急着赶进度，把文中的案例在控制台里一个一个跑起来，跑完再照着默写一遍。错了也没关系，把报错信息读一读，把结果对比一下，这个过程本身就是编程最核心的能力。