JavaScript基础：条件语句与循环结构详解-优快云博客

判断段条件/语句

- - 一、JS的判断条件语句 :package:

一、JS的判断条件语句 📦

1.if判断条件语句

①格式一：if语句 思想：只关注条件成立后的操作

if(判断条件){

语句块;—>条件成立后要做的事情

}

②格式二：if…else…语句 思想：不管条件成立与否，都有对应的操作

if(判断条件){

语句块1; —>条件成立后要做的事情

}else{

语句块2; —>条件不成立要做的事情

}

补充：prompt()：提供一个输入框，将用户输入的数据，传递给变量来接收

③格式三: if…else…if… 语句思想: 针对多条件的判定操作;

if(判断条件1){

语句块1; 1成立

}else if(判断条件2){

语句块2; 1不成立,2成立

}else if(判断条件3){

语句块3; 1,2不成立,3成立

}else if(判断条件4){

语句块4; 1,2,3不成立,4成立

}else{

语句块n; 所有条件都不成立

}

var segment=prompt("请输入分数0~2000");
if(segment>=1000 && segment<=2000){
	alert("最强王者!");
}else if(segment>=800 && segment<1000){
	alert("最强宗师");
}else if(segment>=600 && segment<800){
	alert("超凡大师");
}else if(segment>=0 && segment<600){
	alert("璀璨钻石");
}else{
	alert("黑铁，该打排位啦！");
}

2.switch分支语句 🍉

格式一：

switch(表达式){

case 值1:语句块1;break;

case 值2:语句块2;break;

case 值3:语句块3;break;

…

default:语句块n;

}

例:

var month=prompt("请输入一个月份: ");
switch(month){
	case "1":alert("spring");break;
	case "2":alert("spring");break;
	case "3":alert("spring");break;
	case "4":alert("summer");break;
	case "5":alert("summer");break;
	case "6":alert("summer");break;
	case "7":alert("autumn");break;
	case "8":alert("autumn");break;
	case "9":alert("autumn");break;
	case "10":alert("winter");break;
	case "11":alert("winter");break;
	case "12":alert("winter");break;
	default:alert("输入越界");
}

==思想:==拿上switch后面表达式的结果值，分别和case后面的值做匹配，匹配成功就会执行对应的语句块，否则就执行最后的default语句块。

==注意:==如果case后面没有break，那么匹配成功后，语句块会一直向下执行，直到遇见break才会终止，如果没有break，就会执行完default终止。

3.for循环语句

==思想:==只要循环条件/判断条件成立，就会一直执行代码块/语句块

3.1for语句

for(定义循环变量;循环条件;循环变量的计算操作){

循环体

}

循环语句四要素:四个重要的组成部分:

循环变量: 用来接收循环执行过程中一直会发生改变的数据；

循环条件:决定循环语句是继续执行,还是进行终止;

循环体: 条件成立后,一直要做的事情;

循环变量计算操作: 控制循环变量中数据的改变;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
            for(var i=1;i<10;i++){
	            console.log("我在跑第"+i+"圈!");
            }
        </script>
	</body>
</html>

补充: 输出语句

alert(“输出内容”); 以弹窗的形式进行输出;

console.log(“输出的内容”); 把内容输出在控制台;

document.write(“输出的内容”); 把内容输出在当前页面中;

3.2while语句

var 定义循环变量;

while(循环条件){

循环体;

循环变量的操作;

}

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		</head>
	<body>
		<script language="javascript">
			var i=1;
			while(i<=100){
				document.write(i+"\n");
				i++;
			}
		</script>
	</body>
</html>

结果如下:

点击查看结果

3.3do…while语句

定义循环变量

do{

循环体

循环变量的计算的操作;

}while(循环条件)；

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
			r=1
			do{
				document.write(r+"\n")
				r++;
			}
			while(r<100);
			
		</script>
	</body>
</html>

区别:

1>在while语句中先看的是循环条件，如果循环条件上来就不成立，那么循环体可能一次都不会执行；

2>在do…while语句中先看的是循环体，所以就会保证循环体至少会执行一次的;

3>break：无条件强制终止;

4>continue：该关键词后面的语句块是不会被执行的，跳转到循环条件位置，进行新一轮的判断操作;

5>死循环：循环条件永远成立，程序执行根本停不下来

😾 🖌

for语句：输出1-100之间能够被3整除的数字的总个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>被3整除的数字</title>
	</head>
	<body>
		<script language="javascript">
			i=0
			for(w=1;w<=100;w++){
				if (w%3==0){
					i++;
				}
			}
			document.write(i);
		</script>
	</body>
</html>

while语句：输出1-100之间的累加和 1+2+3+4+…+100

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
			var f=1;s=0;
			while(f<=100){
				s+=f;
				f++;
			}
			document.write(s);
		</script>
	</body>
</html>

do…while语句：输出1-100之间的偶数和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
			var s=0;
			var r=1;
			do{
				if(r%2==0){
					s+=r;
				}
				r++;
			}
			while(r<=100);
			document.write(s+"\n");
		</script>
	</body>
</html>