JavaScript while 循环

JavaScript while 循环学习笔记

1. while 循环基础

基本语法

while(条件表达式){// 循环体代码// 当条件为 true 时执行}

工作原理

1. 首先检查条件表达式
2. 如果条件为true，执行循环体代码
3. 执行完循环体后，再次检查条件
4. 重复步骤 2-3，直到条件为false
5. 条件为false时，退出循环

简单示例

letcount=0;while(count<5){console.log(`计数：${count}`);count++;// 重要：更新计数器，避免无限循环}// 输出:// 计数：0// 计数：1// 计数：2// 计数：3// 计数：4

2. 关键注意事项

避免无限循环

// ❌ 错误示例：无限循环leti=0;while(i<5){console.log(i);// 忘记更新 i，导致无限循环}// ✅ 正确示例letj=0;while(j<5){console.log(j);j++;// 必须更新循环变量}

条件为 false 时不执行

letx=10;while(x<5){console.log("这行代码不会执行");}console.log("循环结束");// 直接执行到这里

3. while 循环实用场景

场景 1：数组遍历

constfruits=["苹果","香蕉","橙子","葡萄"];letindex=0;while(index<fruits.length){console.log(`水果${index+1}:${fruits[index]}`);index++;}

场景 2：用户输入验证

letpassword="";while(password!=="123456"){password=prompt("请输入密码:");if(password===null){alert("已取消登录");break;}if(password!=="123456"){alert("密码错误，请重试");}}if(password==="123456"){alert("登录成功！");}

场景 3：数字累加

letsum=0;letnumber=1;while(number<=100){sum+=number;number++;}console.log(`1 到 100 的和：${sum}`);// 输出：5050

4. 循环控制语句

break 语句

letnum=1;while(num<=10){if(num===5){console.log("遇到 5，跳出循环");break;}console.log(num);num++;}// 输出: 1, 2, 3, 4, "遇到 5，跳出循环"

continue 语句

leti=0;while(i<10){i++;if(i%2===0){continue;// 跳过偶数}console.log(i);// 只输出奇数}// 输出: 1, 3, 5, 7, 9

5. while vs for 循环

选择建议

• 使用 while：当循环次数不确定，需要基于条件判断时
• 使用 for：当循环次数确定，或需要计数器时

对比示例

// for 循环（已知次数）for(leti=0;i<5;i++){console.log(i);}// while 循环（条件判断）letcount=0;while(count<5){console.log(count);count++;}// 两者功能相同，但 while 更适合不确定次数的场景

6. 常见陷阱与最佳实践

陷阱 1：忘记更新循环变量

// ❌ 错误letx=0;while(x<3){console.log(x);// 忘记 x++}// ✅ 正确lety=0;while(y<3){console.log(y);y++;}

陷阱 2：条件表达式错误

// ❌ 错误：使用 = 而不是 == 或 ===letz=0;while(z=5){// 这会将 z 赋值为 5，条件永远为 trueconsole.log(z);z++;}// ✅ 正确letw=0;while(w<5){console.log(w);w++;}

最佳实践

1. 始终确保循环会终止：更新循环变量
2. 使用有意义的变量名：提高代码可读性
3. 添加注释：说明循环的目的和逻辑
4. 考虑使用 for 循环：当循环次数确定时
5. 测试边界条件：确保循环在正确条件下开始和结束

7. 综合练习

练习 1：查找质数

functionfindPrimes(max){letnum=2;while(num<=max){letisPrime=true;letdivisor=2;while(divisor*divisor<=num){if(num%divisor===0){isPrime=false;break;}divisor++;}if(isPrime){console.log(num);}num++;}}findPrimes(20);// 输出：2, 3, 5, 7, 11, 13, 17, 19

练习 2：猜数字游戏

functionguessNumberGame(){consttarget=Math.floor(Math.random()*100)+1;letguess=0;letattempts=0;while(guess!==target){guess=parseInt(prompt("猜一个 1-100 之间的数字:"));attempts++;if(guess===null){alert("游戏取消");return;}if(guess<target){alert("太小了！");}elseif(guess>target){alert("太大了！");}else{alert(`恭喜！你用了${attempts}次猜对了数字${target}！`);}}}// guessNumberGame(); // 取消注释以运行游戏

8. 总结

while 循环特点

• ✅ 适合不确定循环次数的场景
• ✅ 条件判断灵活
• ✅ 代码结构清晰
• ⚠️ 容易忘记更新循环变量导致无限循环
• ⚠️ 需要手动管理循环变量

学习要点

1. 理解 while 循环的执行流程
2. 掌握避免无限循环的方法
3. 熟悉 break 和 continue 的使用
4. 学会根据场景选择合适的循环结构
5. 通过实践掌握常见应用场景

下一步学习

• do-while 循环（至少执行一次）
• 嵌套循环
• 循环性能优化
• 函数式编程替代方案（map, filter, reduce）