javaScript 循环

1.while循环

1、循环

程序中用于解决有规律，重复操作的代码，称循环结构

2、循环的分类

while do-while for

3、while循环语法

let i = 0 // 循环条件初始化(initialize)

while(i<100){ // i<100 循环条件的判断，当i<100为真，则执行循环，当i<100为假，则终止循环

console.log(i) // 循环体，用于解决问题代码

i++

}

4、工作原理

当循环条件表达式为真，则执行循环，否则则终止循环

5、循环的三要素

5-1 循环条件初始化

5-2 循环条件判断

5-3 循环体

6、使用while循环

演示：

<div class="box"></div>
  <script>
    function fn() {
      let str = ''
      let i = 0
      while (i < 100) {
        console.log(i)
        str += "<div>" + i + "</div>"
        i++
      }
      console.log(i)
      str += "<div>" + i + "</div>"
      console.log(str)
      document.getElementsByClassName('box')[0].innerHTML = str
      console.log('程序结束')
    }
    // 调用函数
    fn()
  </script>

2.for循环

2-1 语法

      for(条件初始化①;条件判断②;条件的迭代③){ 循环体④; }

2-2 工作原理

      先执行①，再到②判断条件是否为真，如果为真执行循环体④，否则终止循环

      如果④执行结束后，执行③，再到②，为真执行④，否则终止循环

 2-3 使用

for(let i = 0; i < 100; i++){
        console.log(i+1)
      }

 2-4 for(;;){ log(111) } 123步省略，但分号不能省略，循环是真，死循环

演示：

<div class="box"></div>
  <script>
    function fn() {
      let i = 0
      for (; i < 100; i++) {
        console.log(i);
      }
      console.log(i)
    }

    // 使用for循环计算1-100偶数和，在页面输出?
    function fn1() {
      let sum = 0
      for (let i = 0; i <= 100; i++) {
        if (i % 2 === 0) {
          sum += i
        }
      }
      return sum
    }
    document.getElementsByClassName('box')[0].innerHTML = '1-100之间的偶数和是:' + fn1()

  </script>

3.do-while循环

     3-1 语法

      do{ 循环体 } while(循环条件判断)

     3-2 执行原理

      先执行循环体一次，再判断循环条件，如果真，再次执行循环体，如果假终止do-while循环

      3-3 使用     

 let answer = ''

      let count = 0

      do{

        count++

        console.log('跑完第'+count+'圈！')

        answer = prompt('还跑吗！')

      }while(answer!=='no')

      console.log('您跑了'+count+'圈，共'+count*440+'m')

4.break-continue语句

   4.1、break

    终止正在执行的当前循环，不包括外层循环

function fn1() {
      // 1-100之间的数字进行累加，当数字的总和超过120的时候，i=？
      let i = 1
      let sum = 0
      while (true) {
        sum += i
        console.log(i, sum);
        if (sum > 120) {
          break;
        }
        i++
      }
      console.log(i, sum);
    }
     fn1()

   4.2、continue

    终止本次i循环执行，进行下一次i++循环,continue后面的语句不会再执行

    // 使用continue实现[1,100]可以被3整除数字的和
    function fn2() {
      let sum = 0
      for (let i = 0; i < 100; i++) {
        if (i % 3 !== 0) {
          continue
        }
        console.log(i);
        sum += i
      }
      console.log(sum);
      // for (let i = 0; i < 100; i += 3) {
      //   sum += i
      //   console.log(i);
      // }
      // console.log(sum);
    }
    fn2()