JS基础之选择循环结构--if、if..else、if...else...if...else、switch、while、、do...while、for、for-in/of、break和continue_js if else if

1.if语句

if 的语法结构

 if (条件表达式) {
            // 执行语句
        }
1
2
3

执行思路：

• 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
• 如果if 条件表达式结果为假 不执行大括号里面的语句 则执行if 语句后面的代码
• 这里的 条件表达式 可以是任何表达式，并且求值结果不一定是布尔值，ECMAScript会自动调用 Boolean() 函数将这个表达式的值转换为布尔值

 <script>
 if (3 < 5) {
            alert('沙漠骆驼');
        }
 </script>
1
2
3
4
5

注意事项：

• 表达式必须放在小括号内，执行语句必须放在大括号内
• if条件语句最后不用加分号
• 执行语句如果只有一句，那么大括号可以不写，但是推荐所有情况下都加上大括号

2.if…else条件判断

语法结构

//若结果为真则执行语句1，否则执行语句2
	<script>
		if(条件表达式){
                 //执行语句1
             }else {
                //执行语句2
             }
   </script>
1
2
3
4
5
6
7
8

示例

	<script>
 		//练习1
        var n1 = prompt("请输入数字：")
        if (n1 > 20 && n1 < 70) {
            alert(n1);
        } else {
            alert("该数字不在该范围内");
        }

        //练习2
        var a2 = Math.floor(Math.random() * 100);
        var a1 = prompt("请输入你想输入的数字：" + a2);
        if (a1 > a2) {
            alert("你赢了");
        } else {
            alert("很抱歉，你输了");
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意事项

if后面的表达式只要返回一个布尔值即可

3.if…else…if…else条件语句

• 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果

语法规范

	<script>
	 	if (条件表达式1) {
                // 语句1;
                } else if (条件表达式2) {
                    // 语句2;
                } else if (条件表达式3) {
                    // 语句3;
                } else {
                    // 最后的语句;
             }
    </script>
1
2
3
4
5
6
7
8
9
10
11

执行思路

• 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
• 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
• 如果上面的所有条件表达式都不成立，则执行else 里面的语句

注意事项

• 多分支语句还是多选1 最后只能有一个语句执行
• else if 里面的条件理论上是可以任意多个的
• else if 中间有个空格
• else语句不能单独存在，它总是向上匹配离它最近的if语句

示例

 <script>
        //练习1
        var n1 = prompt("请输入你的年龄：");
        if (n1 > 0 && n1 < 10) {
            alert("小屁孩");
        } else if (n1 > 10 && n1 <= 20) {
            alert("恭喜你步入青少年");
        } else if (20 > n1 && n1 <= 30) {
            alert("恭喜你，步入青年");
        } else if (n1 > 30 && n1 <= 40) {
            alert("恭喜你，你已经步入青壮年");
        } else if (n1 > 40 && n1 <= 50) {
            alert("恭喜你，你已经步入壮年");
        } else if (n1 > 50) {
            alert("恭喜你，你已经步入老年");
        }

        //练习2
        var name = prompt("请输入你的姓名：");
        var score = prompt("请输入你的成绩：");
        if (score >= 50 && score <= 65) {
            alert("你要加油了奥！")
        } else if (score >= 65 && score < 80) {
            alert("哎哟，还请继续努力呀");
        } else if (score >= 80 && score < 95) {
            if (score == 90) {
                console.log(name + "优秀");
            } else {
                alert("你很优秀哟，请继续保持哟");
            }
        } else if (score >= 95 && score <= 100) {
            alert("非常优秀，棒棒哒！");
        } else {
            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
29
30
31
32
33
34
35
36

4.switch语句

• switch 语句也是多分支语句 也可以实现多选1
• 语法结构 switch 转换、开关 case 小例子或者选项的意思

 	<script>
        switch (表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
                ...
                default:
                    执行最后的语句;
            }
       </script>
1
2
3
4
5
6
7
8
9
10
11
12
13

执行思路

利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句

示例

	<script>
		//练习1
        var month = prompt("请您输入相应的月份，让我来帮你判断季节吧!");
        switch (month) {
            case "3":
            case "4":
            case "5":
                alert("春季");
                break;


            case "6":
            case "7":
            case "8":
                alert("夏季");
                break;

            case "9":
            case "10":
            case "11":
                alert("秋季");
                break;

            case "12":
            case "1":
            case "2":
                alert("冬季");
                break;

            default:
                alert("抱歉，你输入的不符合要求，请重新输入！");
        }

        //练习2
        var d = new Date().getDay();
        switch (d) {
            case 0:
                x = "星期一";
                break;
            case 1:
                x = "星期二";
                break;
            case 2:
                x = "星期三";
                break;
            case 3:
                x = "星期四";
                break;
            case 4:
                x = "星期五";
                break;
            case 5:
                x = "星期六";
                break;
            case 6:
                x = "星期天";
                break;
        }
    </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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

5.while循环

while 循环语法结构

 <script>
        while (条件表达式) {
            // 循环体
        }
    </script>
1
2
3
4
5

执行思路

• 当条件表达式结果为true 则执行循环体 否则 退出循环
• 如果在循环体中不改变变量的值，那么将陷入死循环

<script>
        //程序将陷入死循环
        var i = 1;
        while (i <= 100) {
            console.log(i);
        }
</script>
1
2
3
4
5
6
7

示例

 	<script>
        //练习1
        var username = prompt("请输入用户名：");
        var pwd = prompt("请输入密码：");
        while (username != "admin" || pwd != "8888") {
            alert("请重新输入用户名或密码！");
            username = prompt("请输入用户名：");
            pwd = prompt("请输入密码：");
        }
        alert("恭喜你，登录成功!");

        //练习2
        var a = 1;
        while (a >= 1 && a <= 50) {
            if (a % 2 != 0) {
                console.log(a);
            } else {

            }
            a++;
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意事项

• 因为while循环是先判断循环条件的，因此while循环的最小执行次数为0
• while循环之所以能够结束是因为每次循环执行的过程中都会改变循环变量
• 执行while循环之前，必须给循环变量赋初值
• 和if条件语句一样，如果while循环体中只有一条语句，那么大括号可以不写
• while循环结构末尾不需加分号

6.do…while循环

语法结构

 <script>
        do {
            // 循环体
        } while (条件表达式);
 </script>
1
2
3
4
5

执行思路

• 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环

示例

  <script>
        //随机两个变量，dx和dy，它们都在[-4,4]之间随机取值，都是不能都为0
        do {
            var dx = parseInt(Math.random() * 9) - 4;
            var dy = parseInt(Math.random() * 9) - 4;
        } while (dx == 0 && dy == 0)
        console.log(dx, dy);

        var total = 0;
        var i = 1;
        do {
            total += i;
            i++;
        } while (i <= 100);
        alert(total);
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7.for 循环

语法结构

 <script>
        for (初始化变量; 条件表达式; 操作表达式) {
            //循环体
        }
 </script>
1
2
3
4
5

• 初始化变量 就是用var声明一个普通变量 通常用于作为计数器使用
• 条件表达式 就是用来决定每一次循环是否继续执行，就是终止的条件
• 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）

示例

 <script>
        //兔子问题 1 1 2 3 5 8 13 21...(斐波纳契数列)
        var n1 = 1;
        var n2 = 1;
        var t = 0;
        for (i = 1; i <= 20; i++) {
            t = n2;
            n2 = n1 + n2;
            n1 = t;
        }
        alert(n2);

        //打印正方形
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= 9; j++) {
                document.write("★");
            }
            document.write("<br>");
        }

        //打印三角形
        for (i = 1; i <= 9; i++) {
            for (j = 1; j <= i; j++) {
                document.write("★");
            }
            document.write("<br>");
        }

        // 弹出输入框输入总的班级人数(num)
        // 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
        // for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
        // 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）
        // 弹出结果
        var num = prompt('请输入班级的总人数:'); // num 总的班级人数
        var sum = 0; // 求和的变量
        var average = 0; // 求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生成绩');
            // 因为从prompt取过来的数据是 字符串型的需要转换为数字型
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);

        //打印倒三角
        var str2 = '';
        for (var i = 1; i <= 10; i++) { //控制行数
            for (var j = i; j <= 10; j++) {
                str2 += '★';
            }
            str2 += '\n';
        }
        console.log(str2);

		var alt = "";
        for (var i = 1; i <= 5; i++) { // 控制行
            var blank = " ";
            for (var j = 1; j < 5 - i; j++) { //打印空白三角形
                blank += " ";
            }
            var start = "*";
            for (var m = 1; m < 2 * i - 1; m++) { //打印五角星
                start += "*";
            }
            alt += blank + start + "\n";
        }
        console.log(alt);
 </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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

循环嵌套

• 循环嵌套指在一个循环的循环体中，再写另外一个循环。三大循环结构之间可以随意嵌套
• 循环嵌套的执行逻辑：外层循环执行一次，内层循环会完整的执行一遍
• 内层循环在执行一遍的过程中，外层循环变量i保持不变
• break只会结束自己所在的这一层循环

for(var i=0;i<5;i++){

console.log("hello world");

for(var l=0;l<10;l++){

console.log("hello javascript");

}

}
1
2
3
4
5
6
7
8
9
10
11

8.拓展–增强for循环

是一种严格的迭代语句，用于枚举对象中的非符号键属性

for-in 语句

 <script>
        for(var 变量名 in 容器){
            循环体;
        }
 </script>
1
2
3
4
5

for (const propertyName in window){
	document.write(propertyName )
}
1
2
3

ECMAScript 中对象的属性是无序的，因此 for-in 语句不能保证返回对象属性的顺序
如果 for-in 循环要迭代的变量是 null 或 undefined ，则不执行循环体

示例

 <script>
        var arr = [1, 2, 3, 4, 5];
        for (var i in arr) {
            console.log(arr[i]);
        }
 </script>
1
2
3
4
5
6

for-of 语句

一种严格的迭代语句，用于遍历可迭代对象的元素

	for(const el of [2,3,4,5,6]){
		document.write(el)
	}
1
2
3

for-of 循环会按照可迭代对象的 next() 方法产生值的顺序迭代元素
如果尝试迭代的变量不支持迭代，则for-of 语句会抛出错误

9.break和continue

• break用于跳出代码块或循环，循环终止；在循环嵌套中，break只会终止它所在的这一个循环。
• continue用于立即终止本轮循环，返回到循环结构的头部，开始下一轮循环，循环不终止