JavaScript中for循环，while循环，do......while循环。

最新推荐文章于 2025-06-10 21:29:35 发布

原创最新推荐文章于 2025-06-10 21:29:35 发布 · 789 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript中for循环，while循环，do......wh

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中的三种循环结构：for循环、while循环和do...while循环。for循环包括初始化、条件判断和迭代三个步骤；while循环在条件为真时执行循环体；do...while循环会先执行一次循环体，再进行条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.for循环

for循环语法结构：
for(循环条件初始化;循环条件判断;循环迭代){
循环体;
}
执行规则：
第一步：循环条件的初始化 var i=0; 只在最开始执行一次
第二步：循环条件判断 i<5;
若判断条件结果为真：则执行循环体
若不成立：结束循环;
第三步：循环迭代 i++
第四步：回到第二步

案例(1)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//求20-100之内三的倍数之和
		var sum=0;
		for(var i=100;i>20;i--){
			if(i%3==0) {
				sum+=i;
				document.write(i);列出20-100之内所有3的倍数
				document.write('<br>');
			}
		}
		document.write('最后结果为：'+sum);
			</script>
</body>
</html>

案例(2)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	//求15以内奇数的和
		var sum=0;
		for(var i=0;i<15;i++){
			if (i%2!==0) {
				sum+=i;
				document.write(i);列出15之内所有奇数
		 		document.write('<br>');
			}
		}
		document.write('最后结果为：'+sum);
	</script>
</body>
</html>

二.while循环

while循环
语法：
while(判断条件){
循环体;
}
执行规则：
当判断条件为真时，则执行循环体;
反之不执行；


案例(1)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	//求10以内奇数的和
		var i=0;
		var sum=0;
		while(i<10){
			if(i%2!==0){
                sum+=i;
				console.log(i);列出10之内所有不能被2整除的数
			}
			i++;
		}console.log(sum);总和
	</script>
</body>
</html>

案例(2)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	var i=0;
		while(i<5){
			
			document.write(i);列出所有小于5的数
			document.write('<br>');
			i++;
		}
    </script>
</body>
</html>

三.do…while循环

do…while
语法：
do{
循环体;
}while(判断条件);
执行规则：
先执行循环体，
若判断条件为真，则执行循环体

案例(1)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	var i=0;
		do{
			console.log(i);列出小于3的数
			i++;
		}while(i<3);
    </script>
</body>
</html>

案例（2）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	var i=0;
		do{
			console.log('i='+i);
			i++;
		}while(i<3);
	
    </script>
</body>
</html>