JavaScript循环

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;
        }
    }