组团学
学习方向
登录/注册

ECMAScript流程控制

阅读 (460)

一、if语句

  • 格式

    if (表达式){
    语句
}

  • 逻辑

    当程序运行到if语句时，首先计算“表达式”的值，如果“表达式”的值为真，则执行“语句”。如果“表达式”的值为假，则结束if语句继续向下执行

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if语句</title>
</head>
<body>
	<script type="text/javascript">
		if (1){
			console.log("sunck is a good man");
		}
	</script>
</body>
</html>

二、if-else语句

  • 格式

    if (表达式){
    语句1
} else{
    语句2
}

  • 逻辑

    当程序运行到if-else语句时，首先计算“表达式”的值。如果“表达式”的值为真，则执行“语句1”，执行完“语句1”结束整个if-else语句继续向下执行。如果“表达式”的值为假，则执行“语句2”，执行完“语句2”结束整个if-else语句继续向下执行

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if-else语句</title>
</head>
<body>
	<script type="text/javascript">
		if (1){
			console.log("真");
		} else{
			console.log("假");
		}
	</script>
</body>
</html>

三、if-else-if语句

  • 格式

    if (表达式1){
    语句1
} 
else if (表达式2){
    语句2
} 
else if (表达式3){
    语句3
} 
……
else if (表达式n){
    语句n
} 
else{
    语句e
}

  • 注意

    最后的else部分可有可无

  • 逻辑

    当程序运行到if-else-if语句时，首先计算“表达式1”的值，如果“表达式1”的值为真则执行“语句1”，执行完“语句1”则结束整个if-else-if语句继续向下执行。如果“表达式1”的值为假则计算“表达式2”的值，如果“表达式2”的值为真则执行“语句2”，执行完“语句2”则结束整个if-else-if语句继续向下执行。如果“表达式2”的值为假则计算“表达式3”的值，如此直到某个表达式的值为假才停止，如果没有表达式为真且有else语句则执行“语句e”，否则结束整个if-else-if语句继续向下执行

  • 代码

    从控制台输入一个数字，如果是1则输出星期一，2则输出星期二，依次类推

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if-else-if语句</title>
</head>
<body>
	<script type="text/javascript">
		num = parseInt(prompt());
		if (num == 1){
			console.log("星期一");
		} 
		else if (num == 2){
			console.log("星期二");
		}
		else if (num == 3){
			console.log("星期三");
		}
		else if (num == 4){
			console.log("星期四");
		}
		else if (num == 5){
			console.log("星期五");
		}
		else if (num == 6){
			console.log("星期六");
		}
		else if (num == 7){
			console.log("星期日");
		}
		else {
			console.log("输入有误!");
		}
	</script>
</body>
</html>

  • 精髓

    每一个else都是对它上面所有表达式的否定

    从控制台输入一个年龄
小于等于0 输入有误
0~3       婴儿
4~8       童年
9~18      少年
19~29     青年
30~39     壮年
40~49     中年
50~150    老年
150以上   老妖怪

    普通人刚学习编程写法

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if-else-if语句精髓(普通人写法)</title>
</head>
<body>
	<script type="text/javascript">
		var age = parseInt(prompt("请输入年龄："));

		if (age <= 0) {
			console.log("输入有误");
		} else if (0 < age && age <= 3){
			console.log("婴儿");
		} else if (4 <= age && age <= 8){
			console.log("童年");
		} else if (9 <= age && age <= 18){
			console.log("少年");
		} else if (19 <= age && age <= 29){
			console.log("青年");
		} else if (30 <= age && age <= 39){
			console.log("壮年");
		} else if (40 <= age && age <= 49){
			console.log("中年");
		} else if (50 <= age && age <= 150){
			console.log("老年");
		} else{
			console.log("妖怪");
		}

	</script>
</body>
</html>

    体验精髓

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if-else-if语句精髓体验</title>
</head>
<body>
	<script type="text/javascript">
		var age = parseInt(prompt("请输入年龄："));

		if (age <= 0) {
			console.log("输入有误");
		} else if (age <= 3){
			console.log("婴儿");
		} else if (age <= 8){
			console.log("童年");
		} else if (age <= 18){
			console.log("少年");
		} else if (age <= 29){
			console.log("青年");
		} else if (age <= 39){
			console.log("壮年");
		} else if (age <= 49){
			console.log("中年");
		} else if (age <= 150){
			console.log("老年");
		} else{
			console.log("妖怪");
		}

	</script>
</body>
</html>

四、switch语句

  • 格式

    switch (表达式)
{
    case 表达式1:
        语句1
    case 表达式2:
        语句2
    ……
    case 表达式n:
        语句n
    default:
        语句d
}

  • 注意

    最后的default可有可无

  • 逻辑

    当程序执行到switch语句时，首先计算表达式的值，表达式的值能匹配到哪个case后的表达式那么就跳到那个case处继续向下执行。没有匹配的case表达式，且最后有个default，那么会执行语句d

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>switch语句</title>
</head>
<body>
	<script type="text/javascript">		
		var num = 2;
		switch (num) 
		{
			case 1:
				console.log("****1");
			case 2:
				console.log("****2");
			case 3:
				console.log("****3");
			case undefined:
				console.log("****4");
			case Infinity:
				console.log("****5");
			case NaN: //NaN疯狂起来连自己都不认识
				console.log("****6");										
			default:
				console.log("****d");
		}
	</script>
</body>
</html>

  • 想实现只执行对应case语句这样的需求，需要使用break语句

    break语句：专门用来跳出switch语句和循环语句

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>switch语句</title>
</head>
<body>
	<script type="text/javascript">		
		var num = 2;
		switch (num) 
		{
			case 1:
				console.log("****1");
				break;
			case 2:
				console.log("****2");
				break;
			case 3:
				console.log("****3");
				break;
			case undefined:
				console.log("****4");
				break;
			case Infinity:
				console.log("****5");
				break;
			case NaN: //NaN疯狂起来连自己都不认识
				console.log("****6");	
				break;										
			default:
				console.log("****d");
		}
	</script>
</body>
</html>

五、为什么要使用循环？

循环做某件事情

console.log("sunck is a good man")
console.log("sunck is a good man")
console.log("sunck is a good man")
console.log("sunck is a good man")
console.log("sunck is a good man")

六、while语句

  • 格式

    while (表达式){
    语句
}

  • 逻辑

    当程序执行到while语句时，首先计算“表达式”的值。如果"表达式"的值为假则结束整个while语句继续向下执行，如果“表达式”的值为真则执行“语句”，执行完“语句”再次计算“表达式”的值。如果表达式的值为假则结束整个while语句继续向下执行，如果“表达式”的值为真则执行“语句”，执行完“语句”再次计算“表达式”的值。如此循环往复直到“表达式”的值为假才停止循环

  • 实现多次打印

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>while语句-实现多次打印</title>
</head>
<body>
	<script type="text/javascript">		
		var index = 0;
		while (index < 5){
			console.log("sunck is a good man", index+1)
			index++
		}
	</script>
</body>
</html>

  • 计算1+2+3+……+100的和

    5的和
4的和+5
3的和+4+5
2的和+3+4+5
1的和+2+3=4+5
1+2+3+4+5

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>while语句-实现1到100的和</title>
</head>
<body>
	<script type="text/javascript">		
		var index = 1;
		var sum = 0;
		while (index <= 100){
			sum += index
			index++
		}
		console.log("sum = %d", sum)
	</script>
</body>
</html>

七、do-while语句

  • 格式

    do
{
    语句
} while(表达式)

  • 逻辑

    当程序执行到do-while语句时，首先执行一次“语句”，执行完语句再去计算表达式的值。如果表达式的值为假，则跳过整个do-while语句继续向下执行。如果表达式的值为真，则执行“语句”。执行完语句，再计算表达式的值。如此循环往复，直到表达式的值为假才停止

  • do-while语句与while语句的区别

    do-while语句中的语句至少会被执行一次

  • 计算1+2+3+……+100的和

    5的和
4的和+5
3的和+4+5
2的和+3+4+5
1的和+2+3=4+5
1+2+3+4+5

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>do-while语句-实现1到100的和</title>
</head>
<body>
	<script type="text/javascript">		
		var index = 1;
		var sum = 0;
		do
		{
			sum += index;
			index++;
		} while(index <= 100)
		
		console.log("sum = %d", sum)
	</script>
</body>
</html>

八、for语句

  • 格式

    for (语句1; 表达式; 语句3){
    语句2
}

  • 逻辑

    当程序执行到for语句时，首先执行语句1(仅仅会执行一次)。执行完语句1，计算表达式的值。如果表达式的值为假，则跳过整个for语句。如果表达式的值为真，则执行语句2。执行完语句2再去执行语句3，执行完语句3再去计算表达式的值。如此循环往复，直到表达式的值为假才停止

  • 计算1+2+3+……+100的和

    5的和
4的和+5
3的和+4+5
2的和+3+4+5
1的和+2+3=4+5
1+2+3+4+5

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>while语句-实现1到100的和</title>
</head>
<body>
	<script type="text/javascript">		
		var sum = 0;
		for (var index = 1; index <= 100; index++){
			sum += index
		}
		console.log("sum = %d", sum)
	</script>
</body>
</html>

九、死循环

概念：条件永远为真的循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>死循环</title>
</head>
<body>
	<script type="text/javascript">		
		while (1){
        console.log("sunck is a good man")
    }

    do 
    {
        console.log("sunck is a nice man")
    } while(1)
      
    for (;;){
        console.log("sunck is a cool man")
    }
	</script>
</body>
</html>

十、break语句

作用：用于退出switch和循环
注意：只能跳出距离最近的switch和循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>break语句</title>
</head>
<body>
	<script type="text/javascript">
		var num1 = 1;
		while (num1 <= 10) {
			if (num1 === 5) {
				break;
			}
			console.log("num1 = " + num1);
			num1++;
		}

		console.log("--------------------------")
		var num2 = 1;
		do {
			if (num2 === 7) {
				break;
			}
			console.log("num2 = " + num2);
			num2++;
		} while (num2 <= 10);

		console.log("--------------------------")
		for (var num3 = 1; num3 <= 10; num3++) {
			if (num3 === 7) {
				break;
			}
			console.log("num3 = " + num3);
		}
	</script>
</body>
</html>

十一、continue语句

作用：跳过本次循环后面的剩余语句，然后继续下一次循环
注意：只能跳过距离最近的循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>continue语句</title>
</head>
<body>
	<script type="text/javascript">
		var num1 = 1;
		while (num1 <= 10) {
			if (num1 === 5) {
				num1++;
				continue;
			}

			console.log("num1 = " + num1);
			num1++;
		}
		console.log("--------------------------")
		var num2 = 1;
		do {
			if (num2 === 7) {
				num2++;
				continue;
			}
			console.log("num2 = " + num2);
			num2++;
		} while (num2 <= 10);
		console.log("--------------------------")
		for (var num3 = 1; num3 <= 10; num3++) {
			if (num3 === 7) {
				continue;
			}
			console.log("num3 = " + num3);
		}
	</script>
</body>
</html>

十二、for-in语句

作用：往往被用来遍历某个数组或对象中的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for-in语句</title>
</head>
<body>
	<script type="text/javascript">
		var arr = ['a','b','c','d'];
		for (var i in arr) {
			console.log("index:" + i + "    value:" + arr[i]);
		}
	</script>
</body>
</html>
需要 登录 才可以提问哦
头像
：
回复