【JavaScript】for循环、while循环、continue和break

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何错漏或疑问都欢迎在评论区提出。本文介绍JS中for循环、while循环、continue和break

思维导图

第一章 for循环

1.1 循环的目的

循环的目的是可以重复执行某些代码

// 少量的重复可以通过复制代码实现
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('-------------');
// 但如果需要重复的次数很多，使用复制会非常麻烦且代码显得冗余
for (var i = 1; i <= 100; i++) {
    console.log('媳妇我错了'); // 输出100次'媳妇我错了'
}复制

1.2 for循环语法

// 1.for循环重复执行某些代码，通常和计数有关
// 2.语法结构
/* for (初始化变量1; 条件表达式; 操作表达式) {
    // 循环体
} */
// 3.初始化变量,用var声明的一个普通变量,通常作为计数器使用
// 4.条件表达式,判断循环是否执行(终止条件)
// 5.操作表达式,每次循环后执行的代码,用于更新计数器(递增或递减)
// 6.代码示例 输出一百个hello world
for (var i = 1; i <= 100; i++) {
    console.log('hello world');
}复制

执行过程拆解

// 等价于
// 1.初始化变量i(index)，只执行1次。初始化操作不参与循环
var i = 1;
 
// 2.判断是否符合循环条件,是则执行循环体,否则退出循环
if (i <= 100) {
    console.log('hello world');
}
 
// 3.i自增1
i++;
 
// 重复2和3直到不满足循环条件(i<=100)复制

1.3 断点调试

在控制台-源代码可对编写的代码进行断点调试，有助于排查bug/了解代码的执行过程

1. 设置断点(注意设置断点后需要刷新页面代码才会重新运行)
   
2. 逐行执行
   
3. 查看输出
   

1.4 for循环执行相同代码

for (var i = 1; i <= 10; i++) {
    console.log('hello world');
}
 
var num = prompt('请输入循环次数:');
for (var i = 1; i <= num; i++) {
    console.log('hello world');
}
 复制

1.5 for循环执行不同代码(配合if语句)

计数器i在每次循环都会发生变化

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 + '岁了');
    }
}复制

1.6 for循环计数操作

// 求1-100之间的整数累加和
var num = 0
for (var i = 1; i <= 100; i++) {
    num += i;
}
console.log(num);复制

1.7 案例

// 1.求1-100之间所有数的平均值
var num = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
    num += i;
}
average = num / 100;
console.log('1-100之间所有数的平均值为' + average);
 
// 2.求1-100之间所有偶数和奇数的和
var even = 0;
var odd = 0
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 0) {
        even += i;
    }
    if (i % 2 != 0) {
        odd += i;
    }
}
console.log('1-100之间所有偶数为' + even + '\n' + '1-100之间所有奇数为' + odd);
 
// 3.求1-100之间所有能被3整除的数字的和
var num1 = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        num1 += i;
    }
}
console.log('1-100之间所有能被3整除的数字的和为' + num1);复制

1.8 双重for循环

for循环可以进行嵌套

// 1.语法结构
/* for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
 
    }
} */
// 代码示例
for (var i = 1; i <= 3; i++) {
    console.log('--------------');
    console.log('这是外层第' + i + '次循环');
    for (var j = 1; j <= 3; j++) {
        console.log('这是内层第' + j + '次循环');
    }
}复制

示例：打印五行五列星星

var str = '';
for (var i = 1; i <= 5; i++){
    for (var j = 1; j <= 5; j++) {
        str += '★';
    }
    str += '\n'; // 换行
}
console.log(str);复制

效果图

练习： 打印九九乘法表

第二章 while循环

2.1 while循环语法

// 1.语法结构
while (条件表达式) {
    // 循环体
} 
// 2。执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环
// 3.代码示例
var num = 1; //初始化变量
while (num <= 100) { //条件表达式 
    console.log('hello world');
    num++; // 操作表达式
}
// 4.while循环也有计数器 初始化变量 操作表达式(更新计数器,避免死循环)复制

2.2 案例

// while循环案例
// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
    console.log('这个人今年' + i + '岁了');
    i++;
}
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
    sum += j;
    j++
}
console.log(sum);
 
// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
    message = prompt('你爱我吗?');
}
alert('我也爱你啊！');复制

2.3 do while循环语法

与while循环的不同之处在于先执行循环体，再进行条件判断(至少会执行一次循环)

// 1.语法结构
/* do {
    // 循环体
} while (条件表达式) */
// 2.先执行一次循环体,再判断条件表达式.如果条件表达式结果为真,继续执行循环体;否则退出循环体
// 3.代码验证
var i = 1;
do {
    console.log('hello world');
    i++;
} while (i <= 100)
// 4.do while至少执行一次复制

2.4 案例

// 1.打印人的一生,1-100岁
var i = 1;
do {
    console.log('他今年' + i + '岁了');
    i++;
} while(i <= 100)
 
// 2. 计算 1 ~ 100 之间所有整数的和
var j = 1;
var sum = 0;
do {
    sum += j;
    j++;
} while(j <= 100)
console.log(sum);
 
// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
do {
    var answer = prompt('你爱我吗？');
} while(answer != '我爱你')复制

2.5 循环小结

• for、while、do while三种循环在很多情况下可以相互替代使用
• 做条件判断时，常用while、do while
• 用于计数、与数字相关的，三种循环使用方法基本一致，但是更常用for循环
• 注意while和do while的执行顺序
• 实际开发中，for循环使用最多(写法简洁直观)

第三章 continue和break

3.1 continue

continue可以跳出本轮循环，继续下一轮循环

代码示例

// 退出当前循环,继续执行剩余循环
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);复制

3.2 break

break会结束当前循环

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

注意break只会跳出当前循环

// break只跳出内层循环没有跳出外层
for (var i = 1; i <= 3; i++) {
    console.log('--------------');
    console.log('这是外层第' + i + '次循环');
    for (var j = 1; j <= 3; j++) {
        console.log('这是内层第' + j + '次循环');
        if (j = 2) {
            break;
        }
    }
}复制