副队长JavaScript教程(30)-循环控制break与continue

点此查看所有教程、项目、源码导航文章目录1. 背景2. break找到目标直接终止循环3. continue跳过本次下一轮继续4. break 和 continue 对比5. 综合实战案例6. 小结1. 背景前面我们已经掌握了while、do while、for三种循环。常规循环都是预先定好循环条件等到条件不成立的时候才停止循环。但真实开发里很多需求不是这样的。举两个很常见的场景场景一我们遍历一批学生成绩只要找到第一个不及格的学生就立刻停止查找不用继续往后看剩下的数据。场景二统计班级所有同学分数打印所有人成绩但是遇到缺考标记为 - 1的同学本次不打印直接看下一位同学。这两种需求单纯依靠循环条件很难优雅实现。JS 提供了两个关键字来干预循环流程break和continue。2. break找到目标直接终止循环需求在 1 ~ 20 的数字里面找出第一个是 9 的倍数的数字找到之后就不用继续循环了。如果不用 break循环会一直跑完 20 次后面的遍历完全是多余的。for(leti1;i20;i){// 判断是否是9的倍数if(i%90){console.log(找到了第一个9的倍数,i);break;}console.log(正在遍历,i);}运行结果正在遍历 1 正在遍历 2 正在遍历 3 正在遍历 4 正在遍历 5 正在遍历 6 正在遍历 7 正在遍历 8 找到了第一个9的倍数 9break的作用立刻终止当前这一层循环循环直接结束后续所有轮次不再执行。重点说明break 只会跳出它所在的那一层循环。多层嵌套循环时内层的 break不会影响外层循环继续执行。嵌套循环示例for(leti1;i3;i){console.log(外层循环 i ,i);for(letj1;j5;j){if(j3){break;}console.log( 内层循环 j ,j);}}3. continue跳过本次下一轮继续需求遍历输出 1 ~ 10 的数字但是不要输出 6其他数字正常打印。这个需求不是停止循环只是单独跳过 6 这一次剩下数字还要继续处理这就是continue的适用场景。for(leti1;i10;i){if(i6){continue;}console.log(i);}运行结果1 2 3 4 5 7 8 9 10continue的作用跳过本次循环中 continue 后面所有代码直接进入下一轮循环判断循环本身不会结束。⚠️ 初学者高频坑点while循环使用 continue 容易死循环for 循环自增写在头部不容易出问题。while 里面如果自增写在 continue 后面自增代码永远跑不到就卡死了。错误写法死循环leti1;while(i10){if(i6){continue;}console.log(i);i;}正确写法leti1;while(i10){if(i6){i;continue;}console.log(i);i;}4. break 和 continue 对比break满足条件直接结束整个循环适合【找到目标就停止】的场景比如搜索、匹配。continue满足条件仅仅跳过当前这一轮循环继续往下跑适合【过滤某些数据】的场景。一句话区分break 是收工不干了continue 是这一条跳过下一条继续。5. 综合实战案例需求模拟商品遍历遍历商品编号 1~30如果商品编号是 17代表找到目标商品直接结束遍历break如果商品编号是 3 的倍数代表商品下架跳过这条不打印信息continuefor(letid1;id30;id){if(id17){console.log(找到目标商品停止遍历);break;}if(id%30){continue;}console.log(正常在售商品id,id);}6. 小结在实际开发中不是所有循环都必须跑完预设次数。搜索类需求找到目标就停止优先使用 break节省性能过滤类需求个别数据不处理、其余正常遍历优先使用 continue。两个关键字都是用来灵活控制循环流程的同时一定要留意 while 循环下 continue 的死循环陷阱。