js循环及案例

---

前言

一、循环

1.循环的目的

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

2.代码展示

// 循环的目的：
console.log('在细雨中呼喊');
console.log('在细雨中呼喊');
console.log('在细雨中呼喊');
console.log('在细雨中呼喊');
console.log('在细雨中呼喊');
console.log('-----------------------');
for (var i = 1; i <= 100; i++) {
    console.log('在细雨中呼喊');
}

3.JS中的循环

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

• for循环
• while循环
• do…while循环

二、for循环

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

1.语法结构

for循环主要用于把某些代码循环若干次，通常跟计数由关系。其语法结构如下：

// 1.for重复执行某些代码，通常跟计数有关系
// 2.for语法结构
for(初始变量;条件表达式;操作表达式){
    //循环体
}
// 3.初始化变量，就是用var声明一个普通变量，通常用于作为计数器使用
// 4.条件表达式，就是用来决定每一次循环是否继续执行，就是终止的条件
// 5.操作表达式，是每次循环最后执行的代码，经常用于计数器变量进行更新（递增或递减）
// 6.代码体验
for (var i = 1; i <= 100; i++) {
    console.log('你好吗');
}

2.断点调试

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

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

浏览器中按F12→sources→找到需要调试的文件→在程序的某一行设置断点
watch：监视，通过watch可以僵尸变量的值的变化，非常的常用。
F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。不要觉得麻烦！一定要多练

3.for循环重复相同的代码

// for循环可以执行相同的代码
for (var i = 1; 1 <= 10; i++) {
    console.log('余华：在细雨中呼喊');
}
// 可以让用户控制输出的次数
var num = prompt('请您输入次数：');
for (var i = 1; 1 <= num; i++) {
    console.log('余华：在细雨中呼喊');
}

4.for循环重复不相同的代码

for循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

// for循环可以重复执行不同的代码，因为由计数器变量i的存在，i每次循环值都会变化
// 想要输出一个人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 + '岁了');
    }
}

5.for循环重复某些相同操作

for循环因为右拉计数器的存在，还可以重复的执行某些操作，比如一些算术运算。

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

①案例分析

1. 需要循环有、100次，需要一个计数器
2. 需要一个存储结果的变量sum，但是初始值一定是0
3. 核心算法：1+2+3+……，sum=sum+i；

②代码展示

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

6.案例1：求1~100平均值、偶数和、奇数和等

// 1.求1~100之间所有数的平均值，需要一个sum和的变量，还需要一个平均值average变量
var sum = 0;
var average = 0;
for (var i = 0; i <= 100; i++) {
    sum += i;
}
average = sum / 100;
console.log(average); //50.5
// 2.求1~100之间所有偶数和奇数的和
var even = 0;
var odd = 0;
for (var i = 0; i <= 100; i++) {
    if (i % 2 == 0) {
        even += i;
    } else {
        odd += i;
    }
}
console.log(even); //2550
console.log(odd); //2500
// 3.求1~100之间所有能被3整除的数字的和
var result = 0;
for (var i = 0; i <= 100; i++) {
    if (i % 3 == 0) {
        result += i;
    }
}
console.log(result);//1683

7.案例2：求学生成绩

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

(1)案例分析

1. 弹出输入框输入总的把你人数（num）
2. 依次输入学生的成绩（保存起来score），此时我们需要用到for循环，弹出的次数跟班级总人数有关系，条件表达式i<=num
3. 进行业务处理：计算成绩。先求总成绩（sum），之后求平均成绩（average）
4. 弹出结果

(2)代码展示

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

8.一行打印五个星星

采取追加字符串的方式，这样可以打印到控制台上。

//一行打印五个星星
// console.log('⭐⭐⭐⭐⭐');
/*    for (var i = 1; i <= 5; i++) {
        console.log('⭐');
    } */

/* var str = '';
for (var i = 1; i <= 5; i++) {
    str = str + '⭐';
}
console.log(str); */

var num = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++) {
    str += '⭐'
}
console.log(str);

三、双重for循环

1.双重for循环概述

很多情况下，单层for循环并不能满足我们的需求，比如要打印一个5行5列的图形、打印一个倒执教三角形等，此时就可以通过循环嵌套来实现。

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

2.语法结构

// 1.双重for循环 语句结构
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
    for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
        //执行语句
    }
}
//2.可以把里面的循环看做是外层循环的语句
//3.外层循环循环一次，里面的循环执行全部
// 4.代码验证
for (var i = 1; i <= 3; i++) {
    console.log('这是外层循环第' + i + '次');
    for (var j = 1; j <= 3; j++) {
        console.log('这是里层循环的第' + j + '次');
    }
}

3.打印五行五列星星

(1)案例分析

1. 内层循环负责一行打印五个星星
2. 外层循环打印五行

(2)代码展示

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

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

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

// 打印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 += '\n';
}
console.log(str);

5.案例：打印倒三角形

// 打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) { //外层循环控制行数
    for (var j = i; j <= 10; j++) { //里层循环打印的个数不一样j=i
        str += '⭐';
    }
    str += '\n';
}
console.log(str);

6.案例：打印九九乘法表

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

7.for循环小结

1. for循环可以重复执行某些相同代码
2. for循环可以执行不同的代码，因为有计数器
3. for循环可以重复执行某些操作，比如算术运算符假发操作
4. 随着需求增加，双重for循环可以做更多、更好看的效果
5. 双重for循环，外层循环一次，内层for循环全部执行
6. for循环时循环条件和数字直接相关的循环
7. 分析代码要比写代码更重要
8. 一些核心算法想不到，但是要学会，分析它执行过程
9. 举一反三

四、while循环

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

while语句的语法结构如下：

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

执行思路：

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

//1. while循环语法结构 while当……时候
/*    while (条件表达式) {
        //循环体
    } */
// 2.执行思路 当条件表达式结果为true，则执行循环体，否则，退出循环体
// 3.代码验证
var num = 1;
while (num <= 100) {
    console.log('你好啊');
    num++;
}
// 4.里面应该也有计数器，初始化变量
// 5.里面应该也有操作表达式，完成计数器的更新，防止死循环

1.案例1：打印人的一生

1. 打印人的一生，从1岁到100岁。

// while循环案例
// 1.打印人的一生，从1到100岁
var i = 1;
while (i <= 100) {
    console.log('这个人今年' + i + '岁了');
    i++;
}

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

// 2.计算1~100之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
    sum += j;
    j++;
}
console.log(sum);

3.案例3：你爱我吗

// 3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
// 3.1弹出输入框，要求用户输入
// 3.2判断条件比较复杂，使用while循环
// 3.3while循环语句中的条件表达式只要输入的不是我爱你，就一直循环
var message = prompt('你爱我吗');
while (message != '我爱你') {
    message = prompt('你爱我吗');
}
alert('我也爱你啊');

五、do while循环

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

do…while语句的语法结构如下：

// 1.do while循环 语法结构
do {
    //循环体代码，条件表达式为真时重复执行循环体代码
} while (条件表达式);

执行思路：

1. 先执行一次循环体代码
2. 在执行条件表达式，如果结果为真，则继续执行循环体代码，如果为假，则退出循环，继续执行后面代码

注意：先执行循环体，再判断，会发现do while循环语句至少会执行一次循环体代码

// 2.执行思路，跟while不同的地方在于do while先执行一次循环体，再判断条件，如果表达式结果为真，则继续执行循环体，否则退出循环
// 3.代码验证
var i = 1;
do {
    console.log('how are you?');
    i++;
} while (i <= 100);
// 4.do while循环体至少执行一次

1.案例1：打印人的一生

// do while循环案例
// 1.打印人的一生
var i = 1;
do {
    console.log('这个人今年' + i + '岁了');
    i++;
} while (i <= 100);

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

// 2.计算1~100之间所有整数的和
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100);
console.log(sum);

3.案例3：你爱我吗

// 3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
do {
    var message = prompt('你爱我吗');
} while (message !== '我爱你');
alert('我也爱你啊');

4.小结

1. JS中循环有for、while、do while
2. 三个循环很多情况下都可以相互替代使用
3. 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们跟喜欢使用for
4. while和do while可以做更复杂的判断，比for循环灵活一些
5. while和do while执行顺序不一样，while先判断后执行，do while先执行一次，再判断执行
6. while和do while执行次数不一样，do while至少会执行一次循环体，而while可能一次也不执行
7. 实际工作中，更常用for循环语句，它写法更简洁直观

六、continue break

1.continue关键字

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

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

// continue关键字 退出本次循环（当前次的循环）继续执行剩余次数循环
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue; //只要遇见continue就退出本次循环，直接跳到i++
    }
    console.log('我正在吃第' + i + '个包子');
}

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

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

3.break关键字

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

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

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

七、标识符命名规范

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名词一般用动词

八、操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; //直接退出整个for循环，跳到整个for循环下面的语句
    }
    console.log('我正在吃第' + i + '个包子');
}    

九、单行注释规范

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 单行注释前面注意有个空格
    }
    console.log('我正在吃第' + i + '个包子');
}

十、其他规范