12-JavaScript基礎-for迴圈

for迴圈基本概念

• JavaScript中的for語句使用最為靈活,不僅可以用於迴圈次數已經確定的情況,而且可以用於迴圈次數不確定而只給出迴圈結束條件的情況,它完全可以代替while語句。

• 格式:

for(①初始化表示式；②迴圈條件表示式；④迴圈後操作表示式)
{
    ③執行語句；
}

• for迴圈執行流程
  • for迴圈開始時，會先執行初始化表示式，而且在整個迴圈過程中只執行一次初始化表示式
  • 接著判斷迴圈條件表示式是否為真，如果條件為真，就會執行迴圈體中的語句
  • 迴圈體執行完畢後，接下來會執行迴圈後的操作表示式
  • 執行完迴圈後操作表示式, 然後再次判斷迴圈條件表示式是否為真，如果條件為真，就會執行迴圈體中的語句
  • 重複上述過程，直到條件不成立就結束for迴圈

    for(var i = 0; i < 10; i++){
        alert(i); // 輸出0-9
    }
    

• for迴圈和while迴圈如何選擇?
  • 一般情況下while和for可以互換, 但是如果迴圈執行完畢之後就不需要使用用於控制迴圈的增量, 那麼用for更好

for迴圈注意點

• for迴圈中初始化表示式,迴圈條件表示式,迴圈後操作表示式都可以不寫
  • 迴圈條件表示式預設為真
  • for(; ? 語句相當於while(1), 都是死迴圈
• 其它注意點和while一樣

---

迴圈巢狀

• 迴圈語句的迴圈體中存在其他的迴圈語句就是迴圈巢狀

  • 注意: 一般迴圈巢狀不超過三層
  • 外迴圈執行的次數 * 內迴圈執行的次數就是總共執行的次數

• 格式:

  • while/while巢狀
  • while/do-while巢狀
  • while/for巢狀
  • for/for巢狀(最常用)
  • for/while巢狀
  • for/do-while巢狀
  • do-while/do-while巢狀
  • do-while/while巢狀
  • do-while/for巢狀

---

迴圈巢狀練習

• 列印好友列表

   好友列表1
          好友1
          好友2
          好友3
   好友列表2
          好友1
          好友2
          好友3

    for (var i = 1; i <= 2; i++) {
        console.log("好友列表"+ i);
        for (var j = 1; j <= 3; j++) {
            console.log("    好友"+ j);
        }
    }

---

• for迴圈巢狀實現:矩形繪製

需求: 在介面上繪製如下圖形
****
****
****

   //  外迴圈控制行數
   for (var i = 0; i < 3; i++) {
//        內迴圈控制列數
       for (var j = 0; j < 4; j++)
       {
           window.document.write("*");
       }
       window.document.write("<br/>");
   }

---

• for迴圈巢狀實現:三角形繪製
  • 尖尖朝上，改變內迴圈的條件表示式，讓內迴圈的條件表示式隨著外迴圈的i值變化

需求: 在介面上繪製如下圖形
*
**
***
****
*****

    for(var i = 0; i< 5; i++){
        for(var j = 0; j <= i; j++){
            window.document.write("*	");
        }
        window.document.write("<br/>");
    }

---

• for迴圈巢狀實現:三角形繪製
  • 尖尖朝下，改變內迴圈的初始化表示式，讓內迴圈的初始化表示式隨著外迴圈的i值變化

需求: 在介面上繪製如下圖形
*****
****
***
**
*

    for(var i = 0; i< 5; i++){
        for(var j = i; j < 5; j++){
            window.document.write("*	");
        }
        window.document.write("<br/>");
    }

---

• for迴圈巢狀實現:列印特殊三角形

1
12
123

  /*
  1.觀察發現有很多行很多列--》迴圈巢狀
  2.尖尖朝上，讓內迴圈條件表示式隨著外迴圈i改變
  3.發現每次輸出的值其實就是 j + 1 的值
  */
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j <= i; j++) {
            window.document.write(j+1+"");
        }
        window.document.write("<br/>");
    }

1
22
333

  /*
  1.觀察發現有很多行很多列--》迴圈巢狀
  2.尖尖朝上，讓內迴圈條件表示式隨著外迴圈i改變
  3.發現每次輸出的值其實就是i的值
  */
    for (var i = 1; i <= 3; i++) {
        for (var j = 1; j <= i; j++) {
            window.document.write(i + "");
        }
        window.document.write("<br/>");
    }

---

• for迴圈巢狀實現:列印正三角形

-----*
----***
---*****
--*******
-*********
***********

  /*
  1.觀察發現有很多行很多列--》迴圈巢狀
  2.仔細觀察其實需要列印2個三角形, 一個尖尖朝上,一個尖尖朝下
  切記先一個一個列印, 然後再合併,否則步子邁大了會扯到蛋
  */
    for (var i = 0; i <= 5; i++) {
        for (var j = 0; j < 5 - i; j++) {
            window.document.write("-");
        }
        for (var m = 0; m < 2*i+1; m++) {
            window.document.write("*");
        }
        window.document.write("<br/>");
    }

---

• for迴圈巢狀實現:列印99乘法表

1 * 1 = 1
1 * 2 = 2     2 * 2 = 4
1 * 3 = 3     2 * 3 = 6     3 * 3 = 9

<style>

        span{
            display: inline-block;
            border: 1px solid #000;
            padding: 10px;
        }
</style>
<script>
    /*
      1.觀察發現有很多行很多列--》迴圈巢狀
      2.尖尖朝上，讓內迴圈條件表示式隨著外迴圈i改變
      3.輸出的結果等於 內迴圈的變數 * 外迴圈的變數
    */
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
        }
        window.document.write("<br/>");
    }
</script>

---

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