js 中的循环结构循环语句 while 循环中文: 当...时, 换句话说: 当条件满足的时候执行代码, 一旦条件不满

循环语句

 /**
         *      在开发中, 难免要书写一些重复性的代码, 所以此时要么纯手写
         * 
         *      但是纯手写会有一些问题
         *          1. 重复代码过多, 可能一个文件中, 全都是一行代码一摸一样的代码
         *          2. 代码太多, 不利于阅读与后续维护
         * 
         *      所以一般我们都会选择循环语句去帮我们完成需求
         *          1. 能够很大程度的帮我们减少代码量
        */

while 循环

中文: 当...时, 换句话说: 当条件满足的时候执行代码, 一旦条件不满足就不执行了

语法: while (条件) {满足条件的时候执行的代码}
一个完整循环的必要的内容:

     1. 初始化
     2. 条件判断
     3. 要执行的代码
     4. 自身的改变 (其实就是初始化的改变)

 // 1. 初始化
  var num = 0 // 推荐写0, 但不是必须写0, 也可以是其他值
  // 2. 条件判断
  while (num < 5) {
      // 3. 要执行的代码
      console.log('num 当前的值: ', num)

      // 4. 自身的改变 (修改的初始化的变量)
      num++
  }

小案例解析

// 2. 条件判断
  // while (num < 5) {
  //     // 3. 要执行的代码
  //     console.log('num 当前的值: ', num)
  //     // console.log('num 当前的值: ' + num)
  //     // 4. 自身的改变 (修改的初始化的变量)
  //     // num = num + 1
  //     // num += 1
  //     num++
  // }


  /**
   *  第一次代码开始执行
   *      1. var num = 0
   *      2. 条件判断: num < 5    因为 num === 0 所以满足条件, 代码开始执行
   *      3. 要执行的代码: console
   *      4. num++        所以后续的 num 的值 是 1
   * 
   *  第二次代码开始执行
   *      1. 条件判断: num < 5    因为 num === 1 所以满足条件, 代码开始执行
   *      2. 要执行的代码: console
   *      3. num++        后续为 2
   * 
   *  第三次
   *      1. num < 5          num === 2 所以满足条件, 代码开始执行
   *      2. console
   *      3. num++        后续为 3
   * 
   *  第四次
   *      1. num < 5          num === 3 满足条件执行代码
   *      2. console
   *      3. num++        后续为 4
   * 
   *  第五次
   *      1. num < 5          num === 4 满足条件执行代码
   *      2. console
   *      3. num++        后续为 5
   * 
   *  第六次
   *      1. num < 5          num === 5   此时不满足条件, 所以不执行代码, 循环到此结束
  */

小练习

计算从 1 加到 100 的结果
1 + 2 + 3 + 4 + ... + 98 + 99 + 100

/**
         *  逻辑:
         *      需要先拿到 1~100 的数字
         *          利用循环语句去完成
         *      在利用一个变量去存储 1~100 相加的和
        */
       // 0. 创建一个变量存储 1~100 相加的和
        // var sum = 0
        // // 1. 初始化
        // var num = 1
        // // 2. 条件判断
        // while (num <= 100) {
        //     // 3. 循环要执行的代码
        //     // sum = num    // 错误写法, 这样做每次拿到的是当前循环的值, 并没有累加
        //     // sum = sum + num
        //     sum += num
        //     // 4. 改变自身
        //     num++
        // }
        // console.log(sum)

        // 1. 能不能再改变自身的时候用 --
        // 2. 计算 1~100 内 所有 3的倍数的 和
        var sum = 0
        var num = 100
        while (num > 0) {
            // console.log(num)
            if (num % 3 === 0) {
                sum += num
            }
            num--
        }
        console.log(sum)

do...while 循环

语法: do {要执行的代码} while (条件)
- while 循环在执行的时候, 会先判断条件是否成立, 然后再决定是否执行代码
- do...while 循环在执行的时候, 首次会直接执行代码, 不管条件是否成立
  - 如果条件失败, 后续的不再执行
  - 如果条件成功, 那么继续执行循环

小案例解析

var num = 5
        do {
            console.log(num)    // 5, 6, 7, 8, 9
            num++
        } while (num < 10)
        /**
         *  执行流程:
         *      第一次执行:
         *          1. var num = 5
         *          2. do...while 循环, 会先执行代码在判断条件, 所以 console.log(num)   -> 5
         *          3. num++    后续 num === 6
         *          4. 符合 num < 10 所以继续循环
         *      第二次执行:
         *          1. console.log(num)    ->  6
         *          2. num++    后续 num === 7
         *          3. 符合 num < 10 所以继续循环
         *      第三次执行:
         *          1. console.log(num)    ->  7
         *          2. num++    后续 num === 8
         *          3. 符合 num < 10 所以继续循环
         *      第四次执行:
         *          1. console.log(num)    ->  8
         *          2. num++    后续 num === 9
         *          3. 符合 num < 10 所以继续循环
         *      第五次执行:
         *          1. console.log(num)    ->  9
         *          2. num++    后续 num === 10
         *          3. 不符合 num < 10 的条件, 所以结束循环
        */

案例

     2. 打开页面的时候, 给用户弹出一个输入框, 让用户输入密码
           我们约定密码为 12345
      
           如果输入错误, 再次弹出一个新的输入框, 让用户输入密码
           如果输入正确, 再控制台打印 "密码正确"

/*
         *  1. prompt('让用户输入密码')
         *  2. do...while 循环
*/
var str
        do {
            str = prompt('让用户输入密码')
        } while (str !== '12345')
        console.log('密码正确')

for 循环

语法: for (1. 初始化; 2. 条件; 3. 改变自身) {条件满足时, 要循环执行的代码}
扩展和 while 与 do...while 都属于循环语句中的一种但是写法上和另外两个循环的语法, 不太一样

案例解析

 for (var i = 0; i < 5; i++) {
            console.log('我是 for 循环')
        }

    /*
         *  第一次执行
         *      i === 0     i < 5 -> true   符合条件执行代码
         *          1. console
         *      i++     后续 i === 1
         *  第二次执行
         *      1 === 1     i < 5 -> true   符合
         *          1. console
         *      i++     后续 i === 2
    */

小练习

// 1. 计算 1~100 内所有数字的和
// 2. 计算 1~100 内所有偶数的和


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

流程控制语句【重点】

主要就是两个关键字
1. break
  - 在循环中没有进行完毕的时候, 因为我设置的某一个条件满足了然后执行 break 关键字, 循环直接提前终止
    举例：今天早上我出门吃早餐的时候, 买了五个包子, 吃了三个包子, 现在吃饱了所以后续的包子我就不吃了
    2.continue
  - 在循环执行的过程中, 设置的某一个条件触发了, 执行 continue 关键字, 跳过本轮循环举例：今天早上我出门吃早餐的时候, 买了五个包子, 吃了三个包子, 现在准备吃第四个的时候这个包子掉地上了, 所以这个包子我不要了, 但是后边的包子, 我正常吃

        // break
        // for (var i = 1; i <= 5; i++) {
        //     console.log('我吃了 1 个包子')
        //     if (i === 3) {
        //         console.log('我现在吃完了第三个包子, 我已经吃饱了, 后续的我就不吃了')
        //         break
        //     }
        // }


        // continue
        for (var i = 1; i <= 5; i++) {
            if (i === 4) {
                console.log('这是第四包子, 他掉地上了, 我就不吃了')
                continue
            }
            console.log('我吃了 1 个包子')
        }

循环嵌套

  简单来说, 就是循环内 再写一个循环

  注意: 循环嵌套的时候, 初始化的变量不要相同

举例：

for (var i = 0; i < 3; i++) {
            for (var k = 0; k < 3; k++) {
                console.log(k)
            }
        }

案例

向页面写入一个方阵由 * 组成 99 88

document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('<br>')

        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('<br>')

        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('<br>')

        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('*')
        document.write('<br>')

向页面写入一个 9 * 9 的方阵

for (var k = 1; k < 10; k++) {
            // 外层循环, 控制有多少行
            for (var i = 1; i < 10; i++) {
                // 内层循环, 控制一行有多少个 *     内存循环控制有多少列
                document.write('*')
            }
            document.write('<br>')
        }

// 步骤解析:
 // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

        // // 这一个循环, 就是向页面写入一行
        // for (var i = 1; i < 10; i++) {
        //     document.write('*')
        // }
        // document.write('<br>')

模拟99乘法表

   for (var k = 1; k < 10; k++) {
            // 外层循环, 控制有多少行
            for (var i = 1; i <= k; i++) {
                // 内层循环, 控制一行有多少个 *     内存循环控制有多少列
                document.write('*')
            }
            document.write('<br>')
        }

//    步骤解析：
/**
         *  第一次 外层循环开始
         *      k === 1;    k < 10  满足条件, 执行内部代码
         *          内部代码开始执行
         *              1. for 循环
         *                      i === 1     i <= k  ->  1 <= 1  符合条件开始执行
         *                      document.write('*')
         *                      i++     后续 i === 2
         *                   内循环第二次
         *                      i === 2     i <= k  ->  2 <= 1  不符合条件, 内层循环结束
         *              2. document.write('<br>')
         *  k++
         * 
         *  第二次 外层循环开始
         *      k === 2;    k < 10  满足条件, 执行内部代码
         *          内部代码开始执行
         *              1. for 循环
         *                  i === 1     i <= k  ->  1 <= 2  符合条件开始执行内部代码
         *                      document.write('*')
         *                      i++     后续 i === 2
         *                  i === 2     i <= k  ->  2 <= 2  符合条件开始执行内部代码
         *                      document.write('*')
         *                      i++     后续 i === 3
         *                  i === 3     i <= k  ->  3 <= 2  不符合条件, 循环结束
         *              2. document.write('<br>')
         *  k++
        */

小练习三位数的水仙花数
- 如果相加正好等于这个三位数, 那么说明这个三位数就是水仙花数
- 举例:
  - 156
    - 1 * 1 * 1 + 5 * 5 * 5 + 6 * 6 * 6 === 156
    - 1 ** 3+5 ** 3+6 ** 3 == 156
    - 1 ** 3 表示1 的三次方


// 1. 找到所有的 三位数
// 2. 判断是否为水仙花数
//      2.1 先拿到数字的各个位置上的值
//      2.2 计算各个位置上的数字的 三次方的和
//      2.3 判断是否等于自身

// 1. 找到所有的三位数
        for (var i = 100; i < 1000; i++) {
            // 2. 判断是否为水仙花数

            /**
             *  2.1 先拿到数字的各个位置上的值
             * 
             *      假设 i 当前的值 156
             * 
             *      parseInt(i / 10) % 10
             *    = parseInt(156 / 10) % 10
             *    = parseInt(15.6) % 10
             *    = 15 % 10
             *    = 5
            */
            var geW = i % 10
            var shiW = parseInt(i / 10) % 10
            var baiW = parseInt(i / 100)

            // 2.2 计算各个位置上的数字的 三次方的和
            var sum = geW ** 3 + shiW ** 3 + baiW ** 3

            // 2.3 判断是否等于自身
            if (sum === i) {
                console.log(i, '是水仙花数')
            }
        }