07 JavaScript流程控制——循环结构

1、循环

1.1循环的目的

• 重复执行某些语句

2、for循环

• 在程序中，一组被重复执行的语句叫循环体，能否继续执行，取决于循环的终止条件。由循环体以及终止条件组成的语句，被称之为循环语句。

2.1 语法结构

for(初始变化量;条件表达式;操作表达式){
//循环体
}

• 初始变化量，就是var声明的一个普通变量，常用于计数。

• 条件表达式，就是终止的条件。

• 操作表达式，每次循环最后执行的代码，经常用于计数器变量的更新（递增或者递减）。

代码体验：重复打印一百句“你好”

for (var i=1;i<=100;i++){
console.log('你好！');
}

2.2 for循环的执行过程

初始变化量只执行一次——条件表达式——循环体——操作表达式——条件表达式...

2.3 断点调试

在控制台（console）的右边sources，点击行数可以设置断点，F11可以进行下一步程序运行。

F11：程序单步执行

watch：监视，通过watch可以监视变量的值的变化，非常常用。

2.4 for循环重复不同的代码

        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1岁啦，他出生了');
            } else if (i == 100) {
                console.log('这个人今年100岁了，他死了');
            } else {
                console.log('这个人今年' + i + '岁了');
            }
        }

2.5 案例：计算1到100的整数和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i; //sum=sum+i;
        }
        console.log(sum);

2.6 案例：求1到100之间所有奇数和所有偶数的和

        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }
        console.log('偶数和：' + even);
        console.log('奇数和：' + odd);

2.7 案例：求班级成绩平均数

用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级平均成绩。

        var num = prompt('请输入班级总人数：');
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= num; i++) {
            var temp = prompt('请输入第' + i + '个学生的成绩：');
            sum = sum + parseFloat(temp);
        }
        average = sum / num;
        console.log('班上平均成绩为' + average);

3、双重for循环

3.1语法结构

for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里外层的条件表达式;里层的操作表达式){
//执行语句
}
}

• 我们可以把里面的循环看作是外层循环的语句。

• 外层循环循环一次，里面的循环执行全部。

3.2 案例：打印五行五列星星

        var str = '';
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= 5; j++) {
                str = str + '❤';
            }
            //一行打印完毕就要另起一行
            str = str + '\n';
        }
        console.log(str);

3.3 案例：打印倒三角

自己写的：

        //打印倒三角案例
        var num = 10;
        var str = '';
        for (i = 1; i <= 10; i++) {
            for (j = 1; j <= num; j++) {
                str += '❤';
            }
            str += '\n';
            num--;
        }
        console.log(str);

老师改进版：

        //打印倒三角案例
        var str = '';
        for (i = 1; i <= 10; i++) {
            for (j = i; j <= 10; j++) {
                str += '❤';
            }
            str += '\n';
        }
        console.log(str);

3.4 打印九九乘法表

        //打印九九乘法表
        var str = '';
        for (var i = 1; i <= 9; i++) { //外层循环控制行数
            for (var j = 1; j <= i; j++) { //里层循环控制个数
                str += (j + '×' + i + '=' + i * j) + '\t'; //\t是tab缩进
            }
            str = str + '\n';
        }
        console.log(str);

4、while循环

4.1 语法结构

while(条件表达式){
     //循环体
}

• while循环里面也有操作表达式，千万别忘记，不然会成死循环，会浪费电脑资源。

        var num = 1;
        while (num <= 100) {
            console.log('你好'); 
            num++;//操作表达式
        }

4.2 案例：你爱我吗

弹出你爱我吗对话框，只要用户输入的不是我爱你就一直询问。

        var str = prompt('你爱我吗？');
        while (str !== '我爱你') {
            str = prompt('你爱我吗？');
        }
        alert('我也爱你啊！')

5、do while循环

5.1 语法结构

do {
    //循环体
} while(条件表达式)

5.2 执行思路

跟while不同的是：do while 先执行一次循环体， 再判断条件。

5.3 案例：

        //计算1到100的和
        var i = 1;
        var sum = 0;
        do {
            sum = sum + i;
            i++;
        } while (i <= 100)
        console.log(sum);

循环小结：

• 我们常用for循环

• while和do while 可以做更复杂的条件判断

• while是先判断后执行，do while是先执行后判断，do while至少执行一次循环体

6、continue break

6.1 continue关键字

continue关键字用于立即跳出本次循环，继续下次循环（本次循环中continue后面的代码就会少执行一次）

例子1：我要吃五个包子，但是第三个包子有虫子，我跳过不吃

        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;//只要遇见continue就退出本次循环，直接跳到i++
            }
            console.log('我正在吃第' + i + '个包子');
        }

例子2：求100以内的除了被7整除之外的整数和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

6.2 break关键字

break关键字会跳出整个循环。

比如前面吃包子的例子，如果吃到第三个包子里面有虫子，那么第四个和第五个包子都不吃了就可以用break关键字。

        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;//退出整个循环
            }
            console.log('我正在吃第' + i + '个包子');
        }

• 总结：continue是退出本次循环，break是退出整个循环。