黑马pink JavaScript笔记（7）-流程控制-循环

1.循环

（1）循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

（2）JS 中的循环

在Js 中，主要有三种类型的循环语句：

• for 循环

• while 循环

• do…while 循环

2.for循环

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

（1）语法结构

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

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

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

执行过程

• 首先执行里面的计数器变量 var i= 1 但是这句话在for里面只执行一次
• 去 i <= 100 来判断是否满足条件，如果满足条件 就去执行 循环体 不满足条件 则退出循环
• 最后去执行i++ i++是单独写的代码 递增 第一轮结束
• 接着去执行i<= 100 如果满足条件 就去执行循环体 不满足条件 退出循环 第二轮

断点调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

断点调试可以帮我们观察程序的运行过程

浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。

F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，

知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

（2） for 循环重复相同的代码

for (var i =1; i <= 10; i++) {
    console.log('浩瀚宇宙');
}

// 可以让用户控制输出次数
var num = prompt('请输入数字：');
for (var i = 1; i <= num; i++) {
    console.log('无尽虚空');
}

（3） for 循环重复不相同的代码

求输出一个人1到100岁

		for (var i = 1; i <= 100 ; i++) {
             console.log('这个人今年'+i+'岁了');
         }

		// for 里面是可以添加其他语句的
        for (var i = 1; i <= 100; i++) {
            if(i == 1) {
                console.log('今年你1岁了，你出生了');
            } else if(i ==100) {
                console.log('今年你100岁了，O了，穿越去了异界！');
            } else {
                console.log('今年你' + i + '岁了');
            }
        }

（4） for 循环重复某些相同操作

for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算

案例： 求1-100之间所有整数的累加和

	<script>
        // ① 需要循环100次，我们需要一个计数器 i 
        // ② 我们需要一个存储结果的变量 sum ，但是初始值一定是 0 
        // ③ 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i;
        var num = 0;//求和的变量
        for (var i = 1; i <= 100; i++) {
            num = num + i;
        }
        console.log(num);
    </script>

求1-100之间所有数的平均值

求1-100之间所有偶数和 奇数的和

求1-100之间所有能被3整除的数字的和

	<script>
        // 1.求1-100之间所有数的平均值
        var sum = 0;//和变量
        var average = 0;//积变量
        for(var i = 1; i <= 100;i++ ) {
            sum = sum + i;
        }
        average = sum / 100;
        console.log(average);
        // 2.求1-100之间所有 偶数和 奇数和
        var even = 0;
        var odd = 0;
        for(var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log('1-100之间所有偶数和' + even);
        console.log('1-100之间所有奇数和' + odd);

        var even1 = 0;
        var odd1 = 0;
        for(var i = 1; i <= 100; i++) {
            i % 2 ==0 ? even1 += i :odd1 += i;
        }
        console.log('1-100之间所有偶数和' + even1);
        console.log('1-100之间所有奇数和' + odd1);
        // 3.求1-100之间所有能被3整除的数字的和
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 ==0) {
                result += i;
            }
        }
        console.log('1-100之间所有能被3整除的数字的和为：' + result);
    </script>

案例： 求学生成绩

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

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

一行打印五个星星

 	<script>
        console.log('★★★★★');

        for (var i = 1; i <= 10; i++) {
            console.log('★');
        }

        var str = '';
        for (var i = 1; i <= 10; i++) {
            str = str + '★';
        }
        console.log(str);

        var num = prompt('请输入打印星星的数量');
        var str1 = '';
        for (var i = 1; i <= num; i++) {
            str1 = str1 + '★';
        }
        console.log(str1);
    </script>

3.双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

（1）双重 for 循环语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
 for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 
 需执行的代码;
 }
}

• 我们把里面的循环看做是外层循环的语句
• 内层循环执行的顺序也要遵循 for 循环的执行顺序
• 外层循环循环一次，里面的循环执行全部

for (var i = 1; i <= 3; i++) {
    console.log('    这是外层循环第'+i+'次');
    for (var j = 1; j <= 3; j++) {
        console.log('这是外层循环第'+j+'次');
    }
}

（2）打印五行五列星星

var str = '';
// 2. 外层循环负责打印五行
for (var i = 1; i <= 5; i++) {
    // 1. 内层循环负责一行打印五个星星
    for (var j = 1; j <= 5; j++) {
        str = str + '★';
    }
// 每次满 5个星星 就 加一次换行
    str = str + '\n';
}
console.log(str);

案例： 打印 n 行 n 列的星星

要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。

var rows = prompt('请输入行数：');
var cols = prompt('请输入列数：');
var str = '';
for (var i = 1; i <= rows; i++) {
    for (var j = 1; j <= cols; j++) {
        str = str + '★';
    }
    str = str + '\n';
}
console.log(str);

案例 ：打印倒三角形

//① 一共有10行，但是每行的星星个数不一样，因此需要用到双重 for 循环
//② 外层的 for 控制行数 i ，循环10次可以打印10行 ③ 内层的 for 控制每行的星星个数 j 
//④ 核心算法： 每一行星星的个数 j = i ; j <= 10; j++
//⑤ 每行打印完毕后，都需要重新换一行
// 打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = i; j <= 10; j++) {
        str = str + '★';
    }
    str += '\n';
}
console.log(str);

案例 ：打印正三角形

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= i; j++) {
        str = str + '★';
    }
    str += '\n';
}
console.log(str);

//控制输入的行列数量 ，打印倒三角形
var rows = prompt('请输入行数');
var cols = prompt('请输入列数');
var str = '';
if (rows == cols) {
   for (var i = 1; i <= rows; i++) {
       for (var j = i; j <= cols; j++) {
           str = str + '★';
       }
       str += '\n';
   }
   console.log(str);
} else {
  alert('请再次输入，行数和列数必须相等！');
}

案例： 打印九九乘法表

👻跟打印正三角形是一样的操作

// 1.一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
// 2.外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行 
// 3.内层的 for 循环控制每行公式 j 
// 4.核心算法：每一行 公式的个数正好和行数一致， j <= i;
// 5.每行打印完毕，都需要重新换一行 ⑥ 把公式用 i 和 j 替换
var str = '';
for (var i = 1; i <= 9; i++) {//外层循环控制行数
    for (var j = 1; j <= i; j++) {//内层循环控制每一行的数目 j <= i
    // str = str +'★';
    str = str + j + '×' + i + '=' + i * j + '\t';
    }
    str += '\n';
} 
console.log(str);

4.while循环

（1）语法结构

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

（2）执行思路

① 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

② 执行循环体代码

③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

• 使用 while 循环时一定要注意，它必须要有退出条件（操作表达式），否则会成为死循环

• while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

var num = 1;
while (num <= 100) {
    console.log('繁华一刹');
    num++;
}

（3）循环案例

// 1. 打印人的一生，从1岁到100岁 
var age = 1;
while (age <= 100) {
    console.log('老夫今年'+age+'岁了');
     age++;
}
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var num = 1;
while (num <= 100) {
    sum = sum +num;
    num++;
}
console.log('1 ~ 100 之间所有整数的和=' + sum);
// 3.弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
// 进阶版
var message = prompt('你爱我吗？');
while (message !== '我爱你' && message !== '爱' && message !== '爱你') {
     message = prompt('你爱我吗？');
}
alert('Me too!');

5.do while循环

（1）语法结构

do {
 // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

（2）执行思路

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

var i = 1;
do {
   console.log('盗天魔尊');
   i++;
} while (i <=100)

（3）循环案例

// 1.打印人的一生，从1岁到100岁
var age = 1;
do {
   console.log('老夫今年' + age + '岁了');
   age++;
} while (age <= 100)
// 2.计算 1 ~ 100 之间所有整数的和
var sum = 0;
var num = 1;
do {
   sum += num;
   num++;
} while (num <= 100)
console.log('1 ~ 100 之间所有整数的和=' + sum);
// 3.弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
do {
   var message = prompt('你爱我吗？');
} while (message !== '我爱你')
alert('登录成功！');

循环小结

• JS 中循环有 for 、while 、 do while

• 三个循环很多情况下都可以相互替代使用

• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for

• while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些

• while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行

• while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行

• 实际工作中，我们更常用for 循环语句，它写法更简洁直观， 所以这个要重点学习

6.continue和break

（1）continue 关键字

退出本次（当前次的循环） 继续执行剩余次数的循环

吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

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

// 求1~100之间，除了能被7整除之外的整数和
var sum = 0;
for (var i =1; i <=100; i++) {
    if (i % 7 ==0) {
       continue;
    }
    sum += i;
}
console.log(sum);

（2）break 关键字

break 关键字用于立即跳出整个循环（循环结束）。

吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

// 吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了
for (var i = 1; i<= 5; i++) {
    if (i == 3) {
      console.log('呕，吃到虫子了');
      break;
     }
      console.log('我正在吃' + i + '个包子');
}