JavaScript基础-循环结构:for, while, do-while

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 【6月更文挑战第11天】本文介绍了JavaScript中的三种主要循环结构:`for`、`while`和`do-while`,并探讨了它们的使用、常见问题及易错点。文章强调了无限循环、逻辑错误和不当使用`do-while`的避免方法。通过代码示例展示了遍历数组、猜数字游戏和用户输入验证的应用场景,提醒开发者重视循环的正确使用和逻辑规划,以提升代码质量。

循环结构是编程中不可或缺的一部分,它使得代码能够重复执行特定任务直到满足某个条件为止。在JavaScript中,主要的循环结构有forwhiledo-while。本文将深入探讨这三种循环的使用方法、常见问题及易错点,并通过实例代码展示如何有效避免这些陷阱。
image.png

一、循环结构概览

1. for循环

适用于已知循环次数的情况,结构为for(初始化; 条件; 更新)

2. while循环

当给定条件为真时重复执行代码块,结构为while(条件) { 循环体 }

3. do-while循环

与while相似,但先执行一次循环体再检查条件,结构为do { 循环体 } while(条件)

二、常见问题与易错点

易错点1:无限循环

  • 问题:忘记更新循环变量或设置错误的退出条件,导致循环永远无法结束。
  • 避免方法:确保循环变量在每次迭代后都有所改变,并仔细检查循环条件逻辑。

易错点2:逻辑错误导致的早期退出或不退出

  • 问题:条件判断逻辑错误,可能导致循环提前结束或不应结束时结束。
  • 避免方法:清晰定义循环的终止条件,并通过注释或代码审查确保逻辑正确。

易错点3:不当使用do-while

  • 问题:在不需要至少执行一次循环体的情况下使用do-while
  • 避免方法:根据实际需求选择最合适的循环结构,通常初始化条件明确时首选forwhile

三、代码示例与实践

for循环示例:遍历数组

let numbers = [1, 2, 3, 4, 5];
for(let i = 0; i < numbers.length; i++) {
   
   
    console.log(numbers[i]);
}

while循环示例:猜数字游戏

let secret = 42;
let guess;
while(guess !== secret) {
   
   
    guess = parseInt(prompt("请输入你的猜测:"));
    if(guess > secret) {
   
   
        console.log("太高了!");
    } else if(guess < secret) {
   
   
        console.log("太低了!");
    }
}
console.log("恭喜你,猜对了!");

do-while循环示例:用户输入验证

let input;
do {
   
   
    input = prompt("请输入你的名字:");
} while(!input);
console.log("你好," + input + "!");

四、结语

循环结构是编程中的基础且强大的工具,掌握它们能够极大地提高代码的灵活性和效率。然而,不当的使用也会引入难以发现的错误。通过理解每种循环的特点、识别常见的易错点,并通过实践不断巩固,你可以编写出更加健壮、高效的代码。记住,清晰的逻辑规划和适时的代码审查是避免循环错误的有效手段。希望本文能够帮助你在JavaScript的循环之旅上更进一步。

相关文章
|
1月前
|
JavaScript 前端开发 安全
JavaScript中的循环控制:while、do-while与for详解
【4月更文挑战第7天】本文探讨JavaScript的三种主要循环结构:while、do-while和for。while循环在满足条件时执行代码块,注意避免无限循环;do-while循环至少执行一次,适合先执行后判断的场景;for循环结合初始化、条件和迭代,适合遍历。理解每种循环的特点和适用场景,结合编程技巧,如使用break和continue,选择合适的循环方式,能提升代码效率和可读性。记得关注循环性能和避免不必要的计算。
31 0
|
1月前
|
JavaScript 前端开发
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环
|
JavaScript 前端开发
JavaScript语言基础之while语句
while语句是JavaScript中的一种循环语句,用于根据条件重复执行一段代码块。本文将介绍while语句的语法、用法和一些实际应用场景。
101 0
|
JavaScript 前端开发
JavaScript语言基础之do-while语句
do-while语句是JavaScript中的一种循环语句,与while循环类似,但它保证循环体至少执行一次。本文将介绍do-while语句的语法、用法和一些实际应用场景。
124 0
|
前端开发
前端知识案例23-javascript基础语法-do-while循环
前端知识案例23-javascript基础语法-do-while循环
28 0
前端知识案例23-javascript基础语法-do-while循环
|
JavaScript 前端开发
【JavaScript】10_while循环和do-while与for循环
# 5、while循环 ## 循环语句 - 通过循环语句可以使指定的代码反复执行 - JS中一共有三种循环语句 while语句 do-while语句 for语句 - while语句 - 语法: while(条件表达式){ 语句... } - 执行流程: while语句在执行时,会先对条件表达式进行判断, 如果结果为true,则执行循环体,执行完毕,继续判断 如果为true,则再次执行循环体,执行完毕,继续判断,如此重复 知道条件表达式结果为false时,循环结束 ​
98 0
|
JavaScript 前端开发
JavaScript的流程控制之for循环语句和while循环语句(二)
JavaScript的流程控制(二) 上一篇博客说到了JavaScript流程控制的if条件语句和switch选择语句,现在我们来说一下JavaScript流程控制中的循环语句。JavaScript中循环语句主要包含for循环和while循环两类。 for循环 for循环又分为for循环,for…in循环,for…of循环,其中for…of循环是es6中新增的,咱们后面讲es6时再讲,这次主要讲for循环和for…in循环。 1.for循环 循环可以将代码块执行指定的次数。 // 语法: // for(语句1;语句2;语句3){ // 语句4; /
|
算法 JavaScript 前端开发
精讲 JavaScript 循环:while 和 for
精讲 JavaScript 循环:while 和 for
67 0
精讲 JavaScript 循环:while 和 for
|
JavaScript 前端开发
JavaScript 进阶第二章(循环结构 )
JavaScript 进阶第二章(循环结构 )
89 0
|
JavaScript 前端开发
JavaScript入门第十章(循环结构)
JavaScript入门第十章(循环结构)
83 0