JavaScript中有多種循環方式，這里介紹兩種循環，分別是for循環和for in循環。并在最后實現一個用for循環完成的列表循環變色的功能。
for 循環 四部曲：

1. 設置初始值 var i = 0;
2. 設置循環執行的條件 i < 5;
3. 執行循環體中的內容 { [循環體] }
4. 執行每一輪循環完成后，都執行 i++ 累加操作。

語法如下：

for (var i = 0; i < 10; i++) {
  // 循環體
}

例如：

for (var i = 0; i < 10; i++) {
    console.log(i); // 分別輸出0，1，2，3，4，5，6，7，8，9
}

break/ continue
在循環體中遇到這兩個關鍵字，循環體中后面的代碼就不再執行了。

for (var i = 0; i < 5; i++) {
        break; // 整個循環結束
        console.log(i); // 不執行了
    }
    for (var i = 0; i < 5; i++) {
        continue; // 每次循環后，后面代碼都不執行
        console.log(i);
    }

break: 在循環體中，出現break，整個循環就直接的結束了,i++最后的累加操作也不再執行了。
continue: 在循環體中，出現continue，當前這一輪的循環就結束了，繼續下一輪循環，后面的累加操作繼續執行。
下面看一道面試題：

    for (var i = 0; i < 10; i++) {
        if (i <= 5) {
            i += 2;
            continue;
        }
        i += 3;
        break;
        console.log(i); // 不輸出
    }
    console.log(i); // 輸出 9

for in循環
for in 循環：用來循環一個對象中的屬性名和屬性值的。
首先先定義一個對象：

    var obj = {
        name: 'derrick',
        age: 20,
        height: '180cm',
        hobby: 'coding',
        birtyday: '1/1'
    }

要遍歷這個對象中的屬性名和屬性值，就需要使用for in循環了。

    for (var key in obj) {
        console.log(key + ', ' + obj[key]);
        // key->屬性名，obj[key]->屬性值
        // 在 for in 中，只能通過 對象名[key]來獲取屬性值，不能使用對象名.key來獲取
    }

注意點
對象中有多少鍵值對，就循環多少次。
順序問題：在for in 循環的時候，首先循環數字的屬性名（按照數字的從小到大獲取），再把剩下的屬性名按照書寫的順序循環。

實例

<script>
    // 奇偶行變色的原理：
    // 操作所有的li，讓按照奇偶行的規律，改變它的class樣式的屬性值，奇數行是c1,偶數行是c2
    // 通過元素的標簽名獲取一組元素
    // document.getElementsByTagName('元素的標簽名');
    // 在整個文檔中（獲取的范圍，上下文），我們通過元素的標簽名(div, li, p...)來獲取一組元素
    // 獲取這個文檔中所有的li，它是一個集合，這個集合叫做類數組（類似于數組），并且類數組是對象數據類型的
    // 索引(屬性名)：就是代表當前是第幾個元素的位置下標，所以是從0開始的，索引為0代表第一個li，索引為1代表第二個li, ... , 索引為n代表第n+1個li
    // length: 獲取集合的長度，或者是當前獲取了多少個li
    // oLis[0] -> 獲取某一個指定的元素oLis[索引]
    // 通過DOM獲取獲取的類數組還可以使用.item(索引)來獲取某一個元素 -> oLis.item(0)

    var oList = document.getElementById('list');
    var oLis = oList.getElementsByTagName('li');
    for (var i = 0; i < oLis.length; i++) {
        // i = 0 第一次循環 獲取第一個li oLis[0]
        // i = 1 第二次循環 獲取第一個li oLis[1]
        var oLi = oLis[i]; // 每一次循環的時候在類數組中把對應的li取出來
        i % 2 === 0 ? oLi.className = 'c1' : oLi.className = 'c2';

        // 因為每一個li都是對象數據類型，那么使用這種思想，可以給每一個li增加一個自定義屬性名，屬性值就是當前li的className的值
        i % 2 === 0 ? oLi.dataClassName = 'c1' : oLi.dataClassName = 'c2';

        // 鼠標移上去
        oLi.onmouseover = function () {
            this.className = 'c3';
        }
        // 鼠標離開
        oLi.onmouseout = function () {
            this.className = this.dataClassName;
        }
    }