JavaScript中有多种循环方式，这里介绍两种循环，分别是for循环和for in循环。并在最后实现一个用for循环完成的列表循环变色的功能。
for 循环 四部曲：
- 设置初始值 var i = 0;
- 设置循环执行的条件 i < 5;
- 执行循环体中的内容 { [循环体] }
- 执行每一轮循环完成后，都执行 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;
}
}
