循环目的
在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。
JS中的循环
在JS中，主要有三种类型的循环语句：
• for循环
• while循环
• do…while循环

1. for循环

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

1.1 语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关系。
1. 初始化变量就是用var声明的一个普通变量，通常用于作为计数器使用。
2. 条件表达式就是用来决定每一次循环是否继续执行就是终止的条件
3. 操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新(递增或者递减)

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

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

1.2 for循环的执行过程

首先执行里面的计数器变量 var i = 1; 但是这句话在for里面只执行一次 index
2. 去i<= 100 来判断是否满足条件如果满足条件就去执行循环体不满足条件退出循环
3. 最后去执行i++ i++ 是单独写的代码递增第一轮结束
4. 接着去执行 i<= 100 如果满足条件就去执行循环体不满足退出循环
1.3 断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12—>sources—>找到需要调试的文件—>在程序的某一行设置断点
Watch:监视，通过watch可以监视变量里的值的变化，非常的常用。
F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化
1.4 for循环执行相同代码
```
// for循环可以执行相同的代码
for (var i = 1; i <= 10; i++) {
 console.log("哈喽");
}
// 我们可以让用户控制输出的次数
var num = prompt('请您输入次数');
for (var i = 1; i <= num; i++) {
 console.log('哈喽');
}
```
1.5 for循环重复不相同的代码
for循环还可以重复不同的代码，这主要是因为是用来计数器，计数器在每次循环过程中都会变化。 ```javascript // for循环可以重复执行不同的代码因为我们有计数器变量i的存在 i每次循环值都会变化 // 我们想要输出1个人 1~100 // for (var i = 1; i <= 100; i++) { // console.log(‘这个人今年’ + i + ‘岁了’); // }

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

<a name="SrCJl"></a>
## 1.6 for循环重复某些相同操作
for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算数运算。
<a name="eFBex"></a>
### 案例一：求1-100之间所有整数的累加和
**案例分析：**<br />1.需要循环100次，我们需要一个计数器i<br />2.我们需要一个存储结果的变量sum，但是初始值一定是0<br />3.核心算法：1 + 2 + 3 + 4 ... ，sum = sum + i;
```javascript
var sum = 0;
for (i = 1; i <= 100; i++) {
    // sum = sum + i;
    sum += i;
}
console.log(sum);

案例二：求1-100之间所有数的平均值

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

案例三：求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); // 2550 
console.log('1-100之间所有的偶数和是' + odd); // 2500

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

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

案例五：求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出改班级总的成绩以及平均成绩。
案例分析
1. 弹出输入框输入总的班级人数(num)
2. 依次输入学生的成绩(保存起来score)，此时我们需要用到for循环，弹出的次数跟班级总人数有关系条件表达式 i <= num
3. 进行业务处理：计算成绩。先求总成绩(sum)，之后求平均成绩(average)
4. 弹出结果

var num = prompt("请输入班级人数");
var sum = 0;
var avg = 0;
for (var i = 1; i <= num; i++) {
    var score = prompt('请您输入第' + i + '个学生成绩');
    // 因为从prompt取过来的数据是字符串型的需要转换为数字型
    sum = sum + parseFloat(score);
}
avg = sum / num;
alert('班级总的成绩是：' + sum);
alert('班级平均分是：' + avg);

案例六：一行打印五个星星

// 采取追加字符串的方式，这样可以打印到控制台上。
var str = '';
for (var i = 1; i <= 5; i++) {
    str = str + '☆';
}
console.log(str);

1.7 双重for循环概述

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。
语法结构：

for(外层的初始化变量；外层的条件表达式；外层的操作表达式){
  for(里层的初始化变量；里层的条件表达式；里层的操作表达式){
    // 执行语句;
  }
}
// 可以把里面的循环看做是外层循环的语句
// 外层循环循环一次，里面的循环执行全部

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

var str = '';
// 外层循环负责打印五行
for (var i = 1; i <= 5; i++) {
    // 里层循环负责打印五个星星
    for (var j = 1; j <= 5; j++) {
        str = str + '☆';
    }
    // 如果一行打印完毕五个星星就要另起一行 加\n
    str = str + '\n';
}
console.log(str);

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

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

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

案例三：打印倒三角

案例分析：
1. 一共有10行，但是每行的星星个数不一样，因此需要用到双重for循环
2. 外层的for控制行数i，循环10次可以打印10行
3. 内层的for控制每行的星星个数j

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = i; j <= 10; j++) {
        str = 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 = str + '\n';
}
console.log(str);

案例五：打印九九乘法表

var str = '';
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str += j + 'x' + i + '=' + i * j + '\t';
    }
    str = str + '\n';
}
console.log(str);

2. while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

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

执行思路：
1. 先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码
2. 执行循环体代码
3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

案例一：打印人的一生，从1岁到100岁

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

案例二：计算1~100之间所有整数的和

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

案例三：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直询问。

var message = prompt('你爱我吗？');
while (message !== '我爱你') {
    message = prompt('你爱我吗？');
}
alert('我也爱你鸭!');

3. do while循环

do…while语句其实是while语句的一个变体。该循环会先执行依次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
语法结构：

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

执行思路：
1. 先执行一次循环体代码
2. 再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面代码
注意：
先执行循环体，再判断
do…while循环语句至少会执行一次循环体代码

案例一：打印人的一生

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

案例二：计算1~100之间所有整数的和

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

案例三：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直询问。

do {
    var message = prompt('你爱我吗？')
} while (message !== '我爱你');
alert('我也爱你鸭!');

4. continue关键字

continue关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
例如：吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子。

for (var i = 1; i <= 5; i++){
    if(i == 3) {
        continue;
    }
    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); // 4315

5. break关键字

break关键字用于立即跳出整个循环(循环结束)
例如，吃5个包子，吃到第3个发现里面有虫子，其余的不吃了

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

6. 作业

求100以内7的倍数的总和

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

接收用户输入的用户名和密码，若用户名为”admin”，密码为”123456”，则提示用户登录成功！否则让用户一直输入

var username = prompt('请输入用户名:');
var password = prompt('请输入密码:');
while (username != 'admin' || password != '123456') {
 alert('请重新输入');
 username = prompt('请输入用户名:');
 password = prompt('请输入密码:');
}
alert('登录成功');

求整数1~100的累加值，但要求跳过所有个数为3的数[用continue实现]

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

项目：简易ATM

• 里面现存有100块钱
• 如果存钱，就用输入钱数加上先存的钱数，之后弹出显示余额提示框
• 如果取钱，就减去取的钱数，之后弹出显示余额提示框
• 如果显示余额，就输出余额
• 如果退出，弹出退出信息提示框

var operate = prompt('请输入您要的操作：' + '\n' + '1. 存钱' + '\n' + '2. 取钱' + '\n' + '3. 显示余额' + ' \n' + '4. 退出');
var balance = 100;
if (operate == '1') {
 var save = prompt('请输入钱数：');
 balance = parseFloat(save) + parseFloat(balance);
 alert('你的余额为:' + balance);
} else if (operate == '2') {
 var withdraw = prompt('请输入要取的钱数: ');
 alert('您的余额为:' + (balance - withdraw));
} else if (operate == '3') {
 alert('你的余额为:' + balance);
} else if (operate == '4') {
 var quit = alert('请你确认退出');
} else {
 alert('请重新输入');
}

黑马程序员JavaScript笔记

08.循环

1. for循环

1.1 语法结构

1.2 for循环的执行过程

1.3 断点调试

1.4 for循环执行相同代码

1.5 for循环重复不相同的代码

案例二：求1-100之间所有数的平均值

案例三：求1-100之间所有偶数和奇数的和

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

案例五：求学生成绩

案例六：一行打印五个星星

1.7 双重for循环概述

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

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

案例三：打印倒三角

案例四：打印正三角

案例五：打印九九乘法表

2. while循环

案例一：打印人的一生，从1岁到100岁

案例二：计算1~100之间所有整数的和

案例三：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直询问。

3. do while循环

案例一：打印人的一生

案例二：计算1~100之间所有整数的和

案例三：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直询问。

4. continue关键字

案例：求1~100之间除了能被7整除之外的整数和

5. break关键字

6. 作业