9-循环语句

九.循环语句

一.循环: 做重复的事情,在次数上出错, 枯燥乏味

• 让我们快速实现代码的重复多次的执行. 循环

 for 循环
         能精确控制次数的循环

模型:
         for(A; B; C){ 这两个分号不能多也不能少
           D
         }

 四个部分是什么含义?
   *
   *        B: 循环的结束条件
   *           需要有一个布尔类型:
   *            true  循环没有结束
   *            false 循环结束了
   *
   *        D: 需要被循环的代码
   *
   *        A: 循环的初始化(只执行一次)
   *
   *        C: 循环单次之后的状态改变 (单次循环最后做的事情)

现在有 A B C D 块代码区域

执行顺序如下：

• A -> (B -> D -> C) … B

固定次数循环的标准写法

 let length = 5 // 循环5次
  // 为什么要从0开始: JS 都是这样定义的,

  // 数组里面 第一个元素 arr[0] arr[1]

  for(let i = 0;i < length;i++){
    // console.log("Mint、er 666")
    console.log(i) // 一定是从0开始 直到 length-1为止
  }

• 输出数组里面的每一项

 let arr = [1, 2, 3, 4, 5, 6]
  // console.log(arr[5]) arr.length 数组的长度, 数组自带的属性

  for (let i = 0; i < arr.length;i++){
    console.log(arr[i])
  }

 let arr = [
      "A商品",
      "C商品",
      "D商品",
    ]
  //需要在 ul标签里面添加 li标签 li标签里面是 数组里面的每一项的内容

  /**
   * innerHTML 解析标签的
   * innerText 不解析标签
   */
  // 添加的元素 D C A

  let ul = document.querySelector(".list")

  for(let i = 0;i < arr.length;i++){ // 循环次数
    // j 代表什么
    let j = arr.length - i - 1
    let li = "<li>" + arr[i] + "</li>"
    ul.innerHTML =  li + ul.innerHTML  // 在ul的标签里面结尾 添加一个li对应的字符串
    console.log(ul.innerHTML)
  }

• 注意

 /**
   * 一定要搞明白这个 i 是什么??
   * arr.length - i - 1
   */

  /**
   * 高端讨打的 for循环
   
     B: 循环的结束条件
        需要有一个布尔类型:
          	true  循环没有结束
            false 循环结束了
   	 D: 需要被循环的代码
   
   *  D 和 B 是必不可少的
   *    B是结束条件, 如果没有结束条件, 就会死循环
   */

• 循环嵌套:

  循环里面写循环

  i j k 外层循环一次, 里面循环 完 一遍

  总循环次数是 乘积

 for (let i = 0;i < 5;i++){
    for(let j = 0;j < 7;j++){
      let count = i * 7 + j
      // i, j 用i 和 j 写一个表达式, 打印出 0 - 34
      console.log(count)
    }
  }

• while 循环

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

while语句的语法结构如下：

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

执行思路：

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

注意：

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
• while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

/*let i=0;
    for ( ;i<5; ){
      console.log(i);
      i++;
    }*/

    let i=0;
    while ( i<5 ){
      console.log(i);
      i++;
    }

• do…while循环

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

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

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路：

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

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

 /*
    * while  先判断，再决定要不要执行循环体，再判断 ...
    *
    * do while 先执行一次循环体，再判断 ...
    *
    * */

    /*let i = 5;
    while (i<4){
      console.log(1);
      i++;
    }*/

    let i = 5;
    do {
      console.log(1);
      i++;
    } while (i<4);


    /*for (let i = 5 ; i<4 ; i++){
      console.log(1);
    }*/