前言

征服JavaScript的第三天，沖沖沖！

一、回圈

1.1 for回圈

• for 重復執行某些代碼 通常跟計數有關系，
• 初始化變數 用var 宣告的一個普通變數 作為計數器使用，
• 條件運算式 決定每一次循壞是否繼續執行（終止的條件），
• 操作運算式 每次回圈最后執行的代碼 用于計數器變數進行更新（遞增或者遞減），

     for(初始化變數; 條件運算式; 操作運算式 ){
         //回圈體
     }

代碼例題：

    //輸出一個人1-100歲
    for (var i = 1; i <= num; i++) {
        console.log('第' + i + '次說李易峰最帥！');
    }

1.2 雙重for回圈

• 回圈嵌套是指在一個回圈陳述句中再定義一個回圈陳述句的語法結構，
• 內層回圈可以看做外層回圈的回圈體陳述句，
• 內層回圈執行的順序也要遵循 for 回圈的執行順序 ，
• 外層回圈執行一次，內層回圈要執行全部次數，

      for (外層初始化變數; 外層條件運算式; 外層操作運算式) {
           //回圈體
         for (內層初始化變數; 內層條件運算式; 內層操作運算式) {
            //回圈體
         }
      }

代碼例題：

      //列印5行5列的星星
      /*
        ★★★★★
        ★★★★★
        ★★★★★
        ★★★★★
        ★★★★★
      */
      var str = '';
      for (var i = 1; i <= 5; i++) { //列印行
           for (var j = 1; j <= 5; j++) { //列印列
               str += '★';
          }
      //如何一行有5個星星了，就另起一行列印 
      str += '\n';
     }
     console.log(str);

1.3 while回圈

執行思路

• 先執行條件運算式，如果結果為 true，則執行回圈體代碼；如果為 false，則退出回圈，執行后面代碼，
• 執行回圈體代碼，
• 回圈體代碼執行完畢后，程式會繼續判斷執行條件運算式，如條件仍為true，則會繼續執行回圈體，直到回圈條件為 false 時，整個回圈程序才會結束，

      // while 回圈語法結構
      while (條件運算式) {
          // 回圈體
      } 

代碼例題：

     //列印人的一生，從1-100歲
     var i = 1;
     while (i <= 100) {
        console.log('這個人今年' + i + '歲了');
        i++;
     }

1.4 do while回圈

• do while 先執行一次回圈體 在判斷條件 如果條件運算式結果為真，則繼續執行回圈體， 否則退出回圈，

     do {
        // 回圈體代碼 - 條件運算式為 true 時重復執行回圈體代碼
     } while(條件運算式);

代碼例題：

     //列印人的一生，從1-100歲
     var i = 1;
     do {
        console.log('這個人' + i + '歲了');
        i++;
     } while (i <= 100);

1.5 continue 關鍵字

• continue 關鍵字用于立即跳出本次回圈，繼續下一次回圈（本次回圈體中 continue 之后的代碼就會少執行一次），
  代碼例題：

     //吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子
     for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('這個包子有蟲子，扔掉');
         continue; // 跳出本次回圈，跳出的是第3次回圈 
      }
      console.log('我正在吃第' + i + '個包子呢');
      }

運行代碼結果：

1.6 break 關鍵字

• break 關鍵字用于立即跳出整個回圈（回圈結束），

代碼例題：

     //吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子
     for (var i = 1; i <= 5; i++) {
     if (i == 3) {
          break; // 直接退出整個for 回圈，跳到整個for下面的陳述句
     }
     console.log('我正在吃第' + i + '個包子呢');
     }

運行代碼結果：

二、陣列

2.1 陣列的概念

• 陣列可以把一組相關的資料一起存放，并提供方便的訪問(獲取）方式，
• 陣列是指一組資料的集合，其中的每個資料被稱作元素，在陣列中可以存放任意型別的元素，陣列是一種將一組資料存盤在單個變數名下的優雅方式，

2.2 創建陣列

• 陣列中可以存放任意型別的資料，例如字串，數字，布林值等，

1.利用 new 創建陣列

      var 陣列名 = new Array() ；
      var arr = new Array();   // 創建一個新的空陣列

2.利用陣列字面量創建陣列

• 陣列的字面量是方括號 [ ]
• 宣告陣列并賦值稱為陣列的初始化

      //1. 使用陣列字面量方式創建空的陣列
      var  陣列名 = []；
     
     //2. 使用陣列字面量方式創建帶初始值的陣列
     var  陣列名 = ['小白','小黑','大黃','瑞奇'];

2.3 獲取陣列中的元素

• 索引 (下標) ：用來訪問陣列元素的序號（陣列下標從 0 開始），
• 如果訪問時陣列沒有和索引值對應的元素，則得到的值是undefined，
  

代碼例題：

      var arr = []; //創建了一個空的陣列
      var arr1 = [1, 2, '李易峰'];
      console.log(arr1[2]);      //運行結果李易峰

2.4 遍歷陣列

• 陣列遍歷
  • 把陣列中的每個元素從頭到尾都訪問一次（類似學生的點名），可以通過 for 回圈索引遍歷陣列中的每一項，
• 陣列的長度
  • 陣列的長度：默認情況下表示陣列中元素的個數
  • 使用“陣列名.length”可以訪問陣列元素的數量（陣列長度），

代碼例題：

//陣列的長度 陣列名.length
    //陣列的元素是元素個數,不要跟索引號混淆
    var arr = ['關羽', '張飛', '馬超', '趙云', '黃忠', '劉備', '姜維'];
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

2.5 陣列中新增元素

代碼示例：

        //1.新增陣列元素  修改length長度
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5; //把長度修改為了5
        console.log(arr[3]);

        //2.新增陣列元素  修改索引號  （原來沒有的）追加陣列元素
        var arr1 = ['red', 'blue', 'green'];
        arr1[3] = 'pink';
        console.log(arr1);

        //3.新增陣列元素  修改索引號 （原來有的）修改陣列元素
        arr1[0] = 'yellow';
        console.log(arr1);

        //4.不要直接給陣列名復制，會覆寫以前所有的資料

總結

又是對JavaScript又愛又恨的一天，明天繼續沖沖沖！