●循环控制，控制程序重复执行若干次相同或似的逻辑，理解并正确使用循环控制，需要搞清楚循环的3个要素：起始值、变化量、终止条件。

　　○起始值循环的起点，可以是【任意数据类型值】

　　○变化量是指【改变起始值的方式】

　　○终止条件【布尔类型值】，它是循环停止的边界

　　while 循环

　　●while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了

　　●语法 ：

　　○while (条件) { 满足条件就执行 }

　　●因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

// 1. 初始值（初始化条件）
var num = 0;
// 2. 终止条件
while (num < 10) {
    // 3. 要执行的代码
    console.log('当前的 num 的值是 ' + num)
    // 4. 变化量
    num = num + 1
}

 　　案例1: 输出1 ~~100之间的所有偶数

// 起始条件
var n = 1
    // 终止条件
while (n <= 100) {
    // 逻辑代码
    if (n % 2 === 0) {
        console.log(n);
    }
    // 变化量
    n++
}

 　　案例2: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的和

// 声明一个变量用于接收和
var sum = 0
// 初始值
var num = 1
    // 终止条件
while (num <= 100) {
    if (num % 3 === 0) {
        sum += num
    }
    // 变化量
    num++
}
console.log(sum);

 　　案例3: 求三次自幂数(水仙花数)

　　●自幂数是指一个三位数，它的每个位上的数字的三次幂之和等于它本身

　　●例如 : 153

　　○三个位上分别是 1 和 5 和 3

　　○三次幂只和就是 1的三次方 + 5的三次方 + 3的三次方

　　○结果是 153 和原始数字一样

　　○153 就是一个三次自幂数

// 求三次自幂数
// 初始值
var m = 100
// 终止条件
while (m <= 999) {
    // 获取百位数
    var a = parseInt(m / 100)
    // 获取10位数
    var b = parseInt(m % 100 / 10)
    // 获取个位数
    var c = m % 10
    // 求个十百三位数的3次幂的和
    var res = a ** 3 + b ** 3 + c ** 3
    if (res === m) {
        console.log(m + '是三次自幂数');
    }
    // 变化量
    m++
}

 　　do while 循环

　　●是一个和 while 循环类似的循环

　　●while 会先进行条件判断，满足就执行，不满足直接就不执行了

　　●但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

　　●语法：

　　○do { 要执行的代码 } while (条件)

// 定义一个变量
var n = 1
// 设定我们的循环条件,n要小于等于3
while (n <= 3) {
    console.log('我执行了' + n + '次');
    // 这里我们要让我们的变量向着我们设定的值前进
    n = n + 1

 　　●do while 和 while 循环的区别

/* 
while 循环和do while循环的区别
    => 通过对比我们发现,do while循环不管条件是不是满足都会执行一次
    => while 循环在条件不满足的情况下一次都不执行
    => 因为while是先判断条件后执行代码,如果条件不满足就一次也不执行了
    => 也就说 在条件都满足的情况下 while循环和do while循环是一样的
    => 在条件不满足的情况的下do while循环要比while循环多执行一次
        -> 因为do while循环是先执行后判断
        -> while 循环是先判断后执行
*/
// do while 循环
// 定义一个其实变量
var n = 10
do {
    console.log('我执行了一次');
    n++
} while (n <= 3)
// while循环
while (n <= 3) {
    console.log('我执行了一次');
    n++
}

 　　案例1: 求 1 ~ 100 以内所有整数的和

// 定义我们的初始值
var num = 1
// 我们要求和,需要需要定义一个变量接收我们最后的结果
var sum = 0
do {
    // 计算我们的结果
    sum += num
    // 让我们的初始值执行++操作
    num++
} while (num <= 100) // 设定我们的结束条件
// 打印一下我们的结果
console.log(sum);

 　　for 循环

　　●和 while 和 do while 循环都不太一样的一种循环结构

　　●道理是和其他两种一样的，都是循环执行代码的

　　●语法：

　　○for (初始值; 结束条件; 变化量) { 要执行的代码 }

　　○for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始值，终止条件，变化量，写在了一起
for (var i = 1; i <= 10; i++) {
    // 这里写的是要执行的代码
    console.log(i)
}
// 控制台会依次输出 1 ~ 10

 　　案例1: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的 和
// 声明一个变量用于接收和
var sum = 0
// i = 1  初始值
// i <= 100 终止条件
// i++  变化量
for (var i = 1; i <= 100; i++) {
    if (i % 3 === 0) {
        sum += i
    }
}

 　　循环控制语句

　　break 终止循环

　　●在循环没有进行完毕的时候，因为我设置的条件已满足，提前终止整个循环，不会再有下一次循环

　　●比如：

　　○我要吃五个包子

　　○吃到三个的时候

　　○不能在吃了

　　○我就停止吃包子这个事情

　　●要终止循环，就可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) {
    // 每循环一次，吃一个包子
    console.log('我吃了一个包子')
    // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
    // 循环就不会继续向下执行了，也就没有 4 和 5 了
    if (i === 3) {
        break
    }
}

 　　continue 结束本次循环

　　●在循环中，把循环的本次跳过去，继续执行后续的循环，也就是结束本次循环，直接进入下次循环

　　●比如：

　　○吃五个包子

　　○到第三个的时候

　　○第三个掉地下了，不吃了

　　○跳过第三个

　　○继续吃第四个和第五个

　　●跳过循环的本次，就可以使用 continue 关键字

for (var i = 1; i <= 5; i++) {
    // 当 i 的值为 3 的时候，执行 {} 里面的代码
    // {} 里面有 continue，那么本次循环后面的代码就都不执行了
    // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
    if (i === 3) {
        console.log('这个是第三女朋友')
        continue
    }
    console.log('我的女朋友')
}

 　　案例1: 求最大公约数

// 最大公约数
// 找最大的xxx数字, 从大向小循环最好
var res = 1
// 声明两个变量
var min = 12
var max = 24

// 开始循环, 从大向小循环
for (var i = min; i >= 1; i--) {
    // 判断是否是公约数
    if (min % i === 0 && max % i === 0) {
        // 把i的值赋值给 res 
        res = i
        // 只要找到一个公约数, 就肯定是最大公约数。可以直接结束循环了
        break
    }
}
// 循环结束
console.log(min + ' 和 ' + max + ' 的最大公约数是 : ' + res)

 　　循环嵌套

　　●利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

　　●实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

for (var i = 1; i <= 3; i++) {
    // 在一个循环内, 再次书写一个循环
    for (var j = 1; j <= 3; j++) {
        console.log('i 是 ' + i + ' , j 是 ' + j)
    }
}

 　　○外层的循环每执行1次，内部循环执行 3 次，然后外层重复下一次循环...

　　○注意：外层循环和内层循环不能使用同一个变量

　　案例1: 在页面上使用 (☆) 出现一个正方形

// 分析：
// 出现一个☆  
// document.write('☆')
// 要出现9个，是不是要执行同样的代码9次，是不是可以用到循环
// for (var i = 0; i <= 9; i++) {
//     document.write('☆ ')
// }

// 控制行数
for (var j = 1; j <= 9; j++) {
    // 控制列数
    for (var i = 1; i <= 9; i++) {
        document.write('☆ ')
    }
    // 为了出现正方形需要换行
    document.write('</br>')
}

 　　案例2: 在页面上使用 (☆) 出现一个三角形

// 控制行数
for (var j = 1; j <= 9; j++) {
    // 控制列数
    for (var i = 1; i <= j; i++) {
        document.write('☆ ')
    }
    // 为了出现正方形需要换行
    document.write('</br>')
}

上一篇

快速了解JavaScript函数基础

下一篇

快速了解JavaScript——条件分支语句