JavaScript判断/循环（if / switch / while / do-while / for / forEach()）_js循环判断

JavaScript编程的三大结构

编程的三大结构

• 顺序结构
• 选择结构
• 循环结构

1、顺序结构

• 顺序结构式从上到下执行，JavaScript默认情况下是顺序结构

2、选择结构

（1）if 判断

应用场景

• 主要用于范围判断

1) 单分支案例

① 语法格式：
//如果分数大于等于60，则输出成绩及格

		let score = 90;
		if (条件表达式){
			//满足条件执行;
		}
1
2
3
4

② 示例：

	<script>
		let score = 90;
		if (score >= 60){
			alert(`成绩及格`);
		}
	</script>
1
2
3
4
5
6

③ 运行效果

2) 双分支案例

① 语法格式：
//如果分数大于等于60，则输出成绩及格，否则输出成绩不及格

		let score = 59;
		if (条件表达式) {
			//满足条件执行;
		}
		else {
			//不满足条件执行;
		}
1
2
3
4
5
6
7

② 示例：

	<script>
		let score = 59;
		if (score >= 60) {
			alert(`成绩及格`);
		}
		else {
			alert(`成绩不及格`);
		}
	</script>
1
2
3
4
5
6
7
8
9

③ 运行效果

3) 多分支案例

① 语法格式：
//如果分数>=90 <=100,输出A
//否则 如果分数>=80 <90,输出B
//否则 如果分数>=70 <80,输出C
//否则 如果分数>=60 <70,输出D
//否则输出不及格)

		let score = 80;
		if (条件表达式) {
			//执行操作;
		}
		else if (条件表达式) {
			//执行操作;
		}
		else if (条件表达式) {
			//执行操作;
		}
		else if (条件表达式) {
			//执行操作;
		}
		else {
			//所有条件不满足时，执行操作;
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

② 示例：

	<script>
		let score = 80;
		if (score >= 90 && score <= 100) {
			alert(`成绩等级为：A`);
		}
		else if (score >= 80 && score < 90) {
			alert(`成绩等级为：B`);
		}
		else if (score >= 70 && score < 80) {
			alert(`成绩等级为：C`);
		}
		else if (score >= 60 && score < 70) {
			alert(`成绩等级为：D`);
		}
		else {
			alert(`成绩不及格`);
		}
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

③ 运行效果

（2）switch 判断

Switch描述：

• switch判断，有一个case满足条件后，后面的将不在判断，直接输出结果，直到遇到break；
• default可以放在switch中的任何地方，但是一般放在末尾；

应用场景：

• switch主要用于等值判断，case判断相等时，是全等比较；

1) 案例

① 语法格式：
//判断星期一到星期天，1~7代表星期一到星期天

		let days = parseInt(prompt(`提示内容`));
		switch (条件表达式) {
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			case 匹配条件:
				//执行操作;
				//break;
			default:
				//所有条件不满足时，执行操作;
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

② 示例：

	<script>
		let days = parseInt(prompt(`请输入1~7的数字`));
		switch (days) {
			case 1:
				alert(`今天是星期一`);
				break;
			case 2:
				alert(`今天是星期二`);
				break;
			case 3:
				alert(`今天是星期三`);
				break;
			case 4:
				alert(`今天是星期四`);
				break;
			case 5:
				alert(`今天是星期五`);
				break;
			case 6:
				alert(`今天是星期六`);
				break;
			case 7:
				alert(`今天是星期天`);
				break;
			default:
                alert(`输入有误`);
			}
		</script>		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

③ 运行效果

1）输入

2）输出

3、循环结构

（1）while 循环

① 语法格式：
//特点：先判断，在执行，满足条件执行，不满足条件不执行
//输出1~10的数字

		let a = 1;
		while(循环条件) {
			//循环操作
		}
1
2
3
4

② 示例：

	<script>
		let a = 1;
		while(a <= 10){
			document.write(a + " ");  
			// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
			a++;
		}
	</script>
1
2
3
4
5
6
7
8

③ 运行效果

（2）do-while 循环

① 语法格式：
//特点：先执行，后判断，条件不满足，也至少执行一次
//输出1~10的数字

		let a = 1;
		do {
			//循环操作
		}
		while(循环条件);
1
2
3
4
5

② 示例

	<script>
		let a = 1;
		do {
			document.write(a + " ");
			// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
			a++;
		}
		while(a <= 10);
	</script>
1
2
3
4
5
6
7
8
9

③ 运行效果

（3）for 循环

注意事项（执行顺序）

① 执行初始条件
② 执行判断条件
③ 条件为真时，执行循环操作
④ 初始条件改变
⑤ 重复第②、③、④步操作，直至条件为假，结束循环

① 语法格式：
//特点：先判断，后执行，满足条件执行，不满足条件不执行
//输出1~10的数字

		for(循环条件) {
			//循环操作
		}
1
2
3

② 示例：

	<script>
		for (let i = 1;i <= 10;i++) {
			document.write(i + " ");
			// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
		}
	</script>
1
2
3
4
5
6

③ 运行效果

4 拓展 — forEach() & filter()

（1）forEach()循环

① 语法格式：
//遍历数组

	//声明数组
	let 数组名 = [数组内容];
	
	//for循环写法
	for (i = 0; i < 数组名.length; i++){
		//输出结果
	}
	//forEach写法
	数组名.forEach((参数) => {
		//输出结果
	})
1
2
3
4
5
6
7
8
9
10
11

② 示例：

	<script>
		let arr = ['a','b','c'];

		console.log(`for循环执行结果`);
		for (i = 0; i < arr.length; i++){
			console.log(arr[i]);
		}

		console.log(`forEach循环执行结果`);
		arr.forEach((item) => {
			console.log(item);
		})
		//一个参数可简写：arr.forEach(item => console.log(item));
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

③ 运行效果

（2）filter()过滤

① 语法格式：

	//声明数组
	let 数组1 = [数组内容];
	let 数组2 = [];
	let 数组3 = [];
		
	//for循环
	for (i = 0; i < 数组1.length; i++){
		if (数组1[i] >= 10){
			数组2.push(数组1[i]); 
		}
	}
	console.log(`for循环执行结果：${数组2}`);

	//filter过滤
	数组3 = 数组1.filter((item) => {
		return item >=10
	});
	console.log(`filter过滤执行结果：${数组3}`)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

② 示例：

	<script>
		let arrOne = [2,5,11,16,28,34,78];
		let arrTwo = [];
		let arrThr = [];
		
		//for循环
		for (i = 0; i < arrOne.length; i++){
			if (arrOne[i] >= 10){
				arrTwo.push(arrOne[i]); 
			}
		}
		console.log(`for循环执行结果：${arrTwo}`);

		//filter过滤
		arrThr = arrOne.filter((item) => {
			return item >=10;
		});
		//一个参数可简写：arrThr = arrOne.filter(item => item >= 10);
		console.log(`filter过滤执行结果：${arrThr}`)
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

③ 运行效果

更多学习，请参考官方文档

① do-while： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/do…while
② Switch： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch
③ While：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/while
④ If： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for