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數據