一、为什么我们需要“循环”？
假设你是个水果店老板，早上进了10箱苹果，需要逐箱检查有没有坏果。这时候你会怎么做？是一本正经地数“第1箱、第2箱……第10箱”，还是找个办法让动作重复起来？
显然，“重复检查”是更高效的选择。在编程里，这种“重复做某件事”的需求，就需要用到循环结构。
JavaScript中有三种常用的循环：for、while、do...while。今天我们重点聊while——它像一个“严格的大管家”，先检查条件，再决定是否执行任务，特别适合“不确定要做多少次，但知道什么时候停止”的场景。
二、while循环：先检查，再做事
1. 最基础的语法结构
while循环的语法很简单，用一句话概括就是：“只要条件满足，就一直做某件事”。代码写法如下：
// 初始化一个变量（用来记录状态）
let appleBox = 1;
// while后面跟条件：当appleBox小于等于10时，执行循环体
while (appleBox <= 10) {
console.log(`正在检查第${appleBox}箱苹果`);
appleBox++; // 每检查完一箱，箱子编号加1
}
运行这段代码，控制台会依次输出：正在检查第1箱苹果正在检查第2箱苹果
……正在检查第10箱苹果
2. 执行流程：像“闯关游戏”
要理解while的工作原理，可以把它的执行过程想象成一个“闯关游戏”：
第一步：检查“入场券”（条件判断）
进入循环前，先看while后面的条件（比如appleBox <= 10）是否成立。如果成立（比如appleBox是1，1≤10为真），就允许进入循环体；如果不成立（比如appleBox变成11，11≤10为假），直接跳过循环，执行后面的代码。第二步：完成任务（执行循环体）
条件成立时，执行大括号{}里的代码（比如打印检查信息、更新箱子编号）。第三步：重复检查（循环的关键）
完成任务后，程序会“回到起点”，再次检查条件。如果条件依然成立（比如appleBox现在是2，2≤10还是真），就再次执行循环体；如此反复，直到条件不成立为止。
三、写好while循环的三个关键
1. 先给变量“定个初始值”（初始化）
循环需要一个“状态标志”来决定是否继续。比如前面的appleBox，如果没有初始化（比如直接写while (appleBox <= 10)），JavaScript会报错——它根本不知道appleBox一开始是多少。
正确做法：在while循环之前，先定义并初始化这个变量（比如let appleBox = 1）。
2. 记得“更新状态”（避免无限循环）
这是新手最容易踩的坑！如果循环体里不更新那个“状态标志”，条件会一直成立，导致循环永远执行下去，电脑可能会卡到“没反应”。
举个反例：
let appleBox = 1;
while (appleBox <= 10) {
console.log(`正在检查第${appleBox}箱苹果`);
// 忘了写 appleBox++！
}
这段代码会一直打印正在检查第1箱苹果，永远不会停止——因为appleBox一直是1，条件永远为真。
3. 条件要“最终会不成立”（逻辑合理）
循环的条件必须是一个“会变化”的判断。比如“当appleBox <= 10时继续”，随着appleBox不断增加，总有一天会变成11，条件就不成立了，循环自然停止。
如果条件永远为真（比如while (true)），除非你在循环体里用break强制退出，否则它会一直运行下去。这种循环一般只用在“需要持续运行的场景”（比如游戏主循环），新手暂时不用急着掌握。
四、while循环的“专属场景”
while循环不是万能的，但它特别适合处理“不知道要做多少次，但知道何时停止”的情况。举几个常见例子：
1. 等待用户输入正确信息
比如做一个登录表单，用户必须输入正确的密码才能继续。这时候可以用while循环“卡住”程序，直到输入正确为止：
let inputPassword = "";
const correctPassword = "123456";
// 只要输入的密码不对，就一直提示输入
while (inputPassword !== correctPassword) {
inputPassword = prompt("请输入密码（正确密码是123456）：");
if (inputPassword !== correctPassword) {
alert("密码错误，请重新输入！");
}
}
alert("登录成功！");
2. 处理动态变化的数据
有些数据的长度或状态会不断变化（比如从服务器实时获取的消息列表），这时候用while循环比for更灵活：
let messages = ["消息1", "消息2", "新消息3"]; // 初始消息列表
let hasNewMessage = true;
// 当还有未读的新消息时，循环处理
while (hasNewMessage) {
const currentMessage = messages.shift(); // 取出第一条消息
console.log(`处理消息：${currentMessage}`);
// 如果遇到“新消息3”，标记为无新消息
if (currentMessage === "新消息3") {
hasNewMessage = false;
}
}
// 输出：处理消息：消息1 → 处理消息：消息2 → 处理消息：新消息3
3. 不确定循环次数的“试错”场景
比如解数学题时，尝试不同的数值直到找到正确答案：
let guess = 0;
const targetNumber = 7;
// 猜数字游戏：直到猜对为止
while (guess !== targetNumber) {
guess = parseInt(prompt("猜一个1-10的数字："));
if (guess > targetNumber) {
alert("猜大了，再小一点！");
} else if (guess < targetNumber) {
alert("猜小了，再大一点！");
}
}
alert(`恭喜！你猜对了，数字是${targetNumber}`);
五、避开这些“坑”，你就能用好while循环
1. 分号导致的“空循环”
如果你不小心在while条件后面加了个分号，会导致循环体被“忽略”：
let i = 0;
while (i < 3); { // 注意这里的分号！
console.log(i); // 永远不会执行
i++;
}
// 等价于：while (i < 3) {}; { ... }
解决方法：检查while条件后面有没有多余的分号，确保循环体用{}正确包裹。
2. 变量作用域的“隐藏问题”
用var声明循环变量时，变量会被“提升”到外层作用域，可能导致意外行为；而let声明的变量仅在循环所在的块（{}内）有效，更安全：
// 用var声明（可能有问题）
var count = 0;
while (count < 3) {
setTimeout(() => {
console.log(count); // 输出3, 3, 3（闭包捕获的是外层的count）
}, 100);
count++;
}
// 用let声明（更安全）
let count = 0;
while (count < 3) {
setTimeout(() => {
console.log(count); // 输出0, 1, 2（每次迭代的count独立）
}, 100);
count++;
}
总结
while循环的核心逻辑很简单：先检查条件，再执行任务，直到条件不满足为止。它像一个“严格的监工”，特别适合处理“不知道要做多少次，但知道何时停止”的场景。
记住三个关键：
- 先初始化循环变量（给状态“打基础”）；
- 循环体里更新状态（避免无限循环）；
- 条件要“最终会不成立”（逻辑合理）。
下次遇到需要“重复做事”的需求时，不妨想想while循环——它可能是你解决问题的好帮手。
评论