JavaScript while 循环

JavaScript while 循环学习笔记1. while 循环基础基本语法while(条件表达式){// 循环体代码// 当条件为 true 时执行}工作原理首先检查条件表达式如果条件为true执行循环体代码执行完循环体后再次检查条件重复步骤 2-3直到条件为false条件为false时退出循环简单示例letcount0;while(count5){console.log(计数${count});count;// 重要更新计数器避免无限循环}// 输出:// 计数0// 计数1// 计数2// 计数3// 计数42. 关键注意事项避免无限循环// ❌ 错误示例无限循环leti0;while(i5){console.log(i);// 忘记更新 i导致无限循环}// ✅ 正确示例letj0;while(j5){console.log(j);j;// 必须更新循环变量}条件为 false 时不执行letx10;while(x5){console.log(这行代码不会执行);}console.log(循环结束);// 直接执行到这里3. while 循环实用场景场景 1数组遍历constfruits[苹果,香蕉,橙子,葡萄];letindex0;while(indexfruits.length){console.log(水果${index1}:${fruits[index]});index;}场景 2用户输入验证letpassword;while(password!123456){passwordprompt(请输入密码:);if(passwordnull){alert(已取消登录);break;}if(password!123456){alert(密码错误请重试);}}if(password123456){alert(登录成功);}场景 3数字累加letsum0;letnumber1;while(number100){sumnumber;number;}console.log(1 到 100 的和${sum});// 输出50504. 循环控制语句break 语句letnum1;while(num10){if(num5){console.log(遇到 5跳出循环);break;}console.log(num);num;}// 输出: 1, 2, 3, 4, 遇到 5跳出循环continue 语句leti0;while(i10){i;if(i%20){continue;// 跳过偶数}console.log(i);// 只输出奇数}// 输出: 1, 3, 5, 7, 95. while vs for 循环选择建议使用 while当循环次数不确定需要基于条件判断时使用 for当循环次数确定或需要计数器时对比示例// for 循环已知次数for(leti0;i5;i){console.log(i);}// while 循环条件判断letcount0;while(count5){console.log(count);count;}// 两者功能相同但 while 更适合不确定次数的场景6. 常见陷阱与最佳实践陷阱 1忘记更新循环变量// ❌ 错误letx0;while(x3){console.log(x);// 忘记 x}// ✅ 正确lety0;while(y3){console.log(y);y;}陷阱 2条件表达式错误// ❌ 错误使用 而不是 或 letz0;while(z5){// 这会将 z 赋值为 5条件永远为 trueconsole.log(z);z;}// ✅ 正确letw0;while(w5){console.log(w);w;}最佳实践始终确保循环会终止更新循环变量使用有意义的变量名提高代码可读性添加注释说明循环的目的和逻辑考虑使用 for 循环当循环次数确定时测试边界条件确保循环在正确条件下开始和结束7. 综合练习练习 1查找质数functionfindPrimes(max){letnum2;while(nummax){letisPrimetrue;letdivisor2;while(divisor*divisornum){if(num%divisor0){isPrimefalse;break;}divisor;}if(isPrime){console.log(num);}num;}}findPrimes(20);// 输出2, 3, 5, 7, 11, 13, 17, 19练习 2猜数字游戏functionguessNumberGame(){consttargetMath.floor(Math.random()*100)1;letguess0;letattempts0;while(guess!target){guessparseInt(prompt(猜一个 1-100 之间的数字:));attempts;if(guessnull){alert(游戏取消);return;}if(guesstarget){alert(太小了);}elseif(guesstarget){alert(太大了);}else{alert(恭喜你用了${attempts}次猜对了数字${target});}}}// guessNumberGame(); // 取消注释以运行游戏8. 总结while 循环特点✅ 适合不确定循环次数的场景✅ 条件判断灵活✅ 代码结构清晰⚠️ 容易忘记更新循环变量导致无限循环⚠️ 需要手动管理循环变量学习要点理解 while 循环的执行流程掌握避免无限循环的方法熟悉 break 和 continue 的使用学会根据场景选择合适的循环结构通过实践掌握常见应用场景下一步学习do-while 循环至少执行一次嵌套循环循环性能优化函数式编程替代方案map, filter, reduce