for in循环遍历和for循环的区别

看到for in可以遍历某个对象的所有属性这一块，更是摸不着头脑。JS中用来遍历的方法不是已经有for循环了吗？为什么又多出一个for in来呢？
还是用示例来看下这两者到底有什么区别吧。

<ul id="ul">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
</ul>

用两种方法给这个无序列表做一个循环。

var ul=document.getElementById('ul');
var list=ul.getElementsByTagName('li');
for(var i=0;i<list.length;i++){
    console.log(list[i].innerHTML);
}

首先我们用常用的for循环来做遍历，我们可以看到控制台输出的结果如下：

这个正是我们需要的结果，没毛病。
再看下用for in遍历的结果：

for(i in list){
console.log(list[i].innerHTML)
}

上面的结果没有什么区别，但是下面这三个undefined是什么情况？不管我怎么调试，都没有找到这三个undefined指的是什么。
但是当我试着在for in循环里 console.log(i)的时候，控制台上输出的结果变成了下面这个：

原来所谓的三个undefined值是指length，item，namedItem。
我查了资料才知道for in循环是会遍历对象的所有可枚举属性，并且原型上的属性也会被访问到，只要这个属性是存在并且可枚举的，他就会给你全部打印出来。
接下来我们再来定义一个数组，如下：

var languages=new Array();
languages[1]='JS'
languages[3]='C#'
languages[5]='JAVA'
for(i in languages){
    console.log(languages[i])
}

我们先用for in来遍历，结果如下：

这个…好像没啥毛病，再用for循环来遍历一次：

这个时候喜闻乐见的undefined又跑出来了，不过其实这个结果才是我们所需要的，因为我们在定义数组的时候，可不只是定义了三个值，

languages[1]='JS'
languages[3]='C#'
languages[5]='JAVA'

实际上还有0,2,4三个值是没有定义的，所以for循环输出的结果才是正确的，他会强制性的通过i++的操作去获得所以0~5的值并输出；
而for in因为会遍历可枚举属性这个特点，只会输出我们给定的值，而undefined是不存在的，所以并没有给出来。
所以说对于遍历数组，最好是用for循环。但是这样的话，问题又来了，for in循环还有什么用处？
其实正如我们前面说的，for in是用来遍历对象的，而且是非数组对象（因为数组本身也是对象），而且常用于遍历JSON数据。

总结如下：

for 循环适用于遍历数组，for in 适用于遍历对象和JSON数据