循環基本概念

• 循環結構是程序中一種很重要的結構。其特點是,在給定條件成立時,反復執行某程序段, 直到條件不成立為止。

  • 給定的條件稱為循環條件,反復執行的程序段稱為循環體
  • 循環結構簡單來說就是:一次又一次的執行相同的代碼塊

• 現實生活中的循壞

  
  

• JavaScript中的循壞

  • while語句;
  • do-while語句;
  • for語句;

while循環基本概念

• 格式:

while ( 條件表達式 ) {
     語句1;
     語句2;
     ....
 }

• while語句執行流程:

  • 判斷條件表達式是否為真, 如果為真執行后面大括號中的內容
  • 執行完畢再次判斷條件表達式是否還為真,如果為真執行后面大括號中的內容
  • 重復上述過程,直到條件不成立就結束while循環

    var num = 0;
    while (num < 10){
      alert(num); // 彈出0-9
      num++;
    }
    

• 構成循環結構的幾個條件

  • 循環控制條件(條件表達式)
    • 循環退出的主要依據,來控制循環到底什么時候退出
  • 循環體(while后面的大括號{})
    • 循環的過程中重復執行的代碼段
  • 循環結束語句(遞增,遞減,break等)
    • 能夠讓循環條件為假的依據,否則退出循環

• while循環特點:

  • 如果while中的條件一開始就不成立,那么循環體中的語句永遠不會被執行

    var num = 10;
    while (num < 10){
        alert(num); // 什么都不彈
        num++;
    }
    

while循壞注意點

• 死循環
  • 條件表達式永遠為真, 循壞永遠無法結束,我們稱之為死循環

    while (true){
        alert("nj666");
    }

• 任何值都有真假性
  • 對于非Boolean類型的值, 會先轉換為Boolean類型再判斷

    while (1){ // 先把1轉換為Boolean, 然后再判斷真假
        alert("nj666");
    }

• while 后如果只有一條語句它可以省略大括號
  • 如果省略大括號, while只會管制緊跟其后的那條語句

while (0)
   alert("會執行我么?"); // 不會執行
alert("nj 666");

• 分號問題
  • 分號(;)也是一條語句, 代表空語句

  while (0);
  {
      alert("123"); // 會被執行, 因為while管制的是分號(;)
  }

• 最簡單的死循環
  • 企業開發中慎用死循環, 會導致程序阻塞

  while (1);

while循壞練習

• 提示用戶輸入一個正整數n， 計算1 + 2 + 3 + ...n的和
  • 企業開發從易到難, 先實現1加到5, 再實現1加到n

分析: 每次都是用上一次的和 加上一個遞增的數
注意看, 每次加號之后的數是遞增的2、3、4、5
            1 + 2 + 3 + 4 + 5 = 15
    ( 0 + 1)1 + 2
         (1 + 2)3 + 3
          1 + 2 + 3) 6 + 4
          (1 + 2 + 3 + 4) 10 + 5

    //    1.定義變量保存上一次的和
    var sum = 0;
    //    2.定義變量保存遞增的數
    var number = 1;
    while (number <= 5) {
        console.log("sum = "+ sum +" + number = "+ number);
        sum = sum + number;
        number++;
    }
    console.log("sum = " + sum);

• 累加思想
  • 通過循環的形式進行累加操作,定義變量記錄每次變化后的結果

• 獲取1～100之間 7的倍數的個數并打印，并統計個數

    var count = 1;
    var num = 0;
    while (count <= 100) {

        if (count % 7 == 0) {

            console.log("count = " + count);
            num++;//計數器
        }
        count++;
    }

    console.log("number = "+ num);

• 計數器思想:
  • 通過循環的形式進行計數操作, 通過變量記錄每次變化的值
  • 企業開發中, 當遇到要求統計什么什么 中 有多少個什么的時候,立刻想到計數器思想

break關鍵字

• 作用:

  • 跳出Switch語句

    var num = 1;
    switch(num){
        case 1:
            console.log("壹");// 輸出壹
            break; // 跳出switch語句, 后面代碼不會執行
        case 2:
            console.log("貳"); 
            break;
        default:
            console.log("非法數字");
            break;
    }
    

  • 跳出循環語句

    var num = 0;
    while(true){ 
        console.log(num);
        if(3 == num){
            break; // 當num等于3時跳出循環
        }
        num++
    }
    

• 注意點:

  • break關鍵字只能用于循環語句和switch語句, 在其它地方沒有意義

    break;  // 瀏覽器會報錯
    alert("我會輸出么?");
    

    if(true){
        break; // 瀏覽器會報錯
        alert("我會輸出么?");
    }
    

  • 在多層循環中,一個break語句只向外跳一層

    while (1){
        while (2){
            console.log("我是while2"); // 會被輸出多次
            break; // 跳出while2,但是不會跳出while1
        }
        console.log("我是while1");
    }
    

  • break后面的語句永遠不會被執行

    while (1){
        break;
        alert("會彈出來么?"); // 不會彈出
    }
    

continue關鍵字

• 作用:

  • 跳過當前循環體中剩余的語句而繼續下一次

    var num = 0;
    while (num < 10){
        num++;
        if(num % 2 == 0){
            continue;
        }
        console.log(num); // 1, 3, 5, 7, 9
    }
  

• 注意點:

  • 只能用于循環結構, 在其它地方沒有意義
  • continue后面的語句永遠不會被執行

    while (1){
        continue;
        alert("會彈出來么?"); // 不會彈出
    }
    

dowhile循環基本概念

• 格式

 do {
     語句1;
     語句2;
     ....
 } while ( 條件 );

• do-while語句執行流程:

  • 首先會執行一次循環體中的語句
  • 接著判斷while中的條件表達式是否為真，如果為真再次執行循環體中的語句
  • 重復上述過程，直到條件不成立就結束while循環

    var num = 20;
    do{
        console.log(num); // 輸出一次10
    }while (num < 10);
  

• while循環特點:

  • 不管while中的條件是否成立，循環體中的語句至少會被執行一遍

• 應用場景

  • 口令校驗

學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038