一 、for ..in 迴圈

　　使用for..in迴圈時，返回的是所有能夠通過物件訪問的、可列舉的屬性，既包括存在於例項中的屬性，也包括存在於原型中的例項。這裡需要注意的是使用for-in返回的屬性因各個瀏覽器廠商遵循的標準不一致導致物件屬性遍歷的順序有可能不是當初構建時的順序。（例項+原型中的可列舉屬性）

1、遍歷陣列

　　雖然for..in主要用於遍歷物件的屬性，但同樣也可以用來遍歷陣列元素。

2：for..in和for遍歷陣列時下標型別不一樣

var colors = ['red', 'green', 'blue'];

for (var i in colors) {
  
 
typeof i; // string
}

for (var j = 0; j < colors.length; j++) {
  typoef i; // number
}

二、JavaScript forEach() 方法

列出陣列的每個元素：

<button onclick="numbers.forEach(myFunction)">點我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var
 
 numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
</script>

三、for...of  方法

1、for..of為ES6新增的方法，主要來遍歷可迭代的物件（包括Array, Map, Set, arguments等），它主要用來獲取物件的屬性值

• for of支援遍歷陣列、類物件（例如DOM NodeList物件）、字串、Map物件、Set物件；
• for of不支援遍歷普通物件，可通過與Object.keys()搭配使用遍歷；（見示例二）
• for of遍歷後的輸出結果為陣列元素的值；

var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow');

for (var i in colors) {
  console.log(colors[i]); // red green blue yellow
}

for (var j of colors) {
  console.log(j); // red green blue undefined undefined yellow
}

可以看到使用for..of可以輸出包括陣列中不存在的值在內的所有值。

2、其實除了使用for..of直接獲取屬性值外，我們也可以利用Array.prototype.forEach()來達到同樣的目的。

var colors = ['red', 'green', 'blue'];
colors.foo = 'hello';
console.log(Object.keys(colors));//["0", "1", "2", "foo"]
Object.keys(colors).forEach(function(elem, index) {
  console.log(elem);//0 1 2 foo
  console.log(colors[elem]); // red green blue hello
  console.log(colors[index]); // red green blue undefined
});

colors.forEach(function(elem, index) {
  console.log(elem); // red green blue
  console.log(index); // 0 1 2
})

四、Object.keys（） 方法

• 遍歷結果為由物件自身可列舉屬性組成的陣列，陣列中的屬性名排列順序與使用for in迴圈遍歷該物件時返回的順序一致；
• 與for in區別在於不能遍歷出原型鏈上的屬性；

// 遍歷陣列
var colors = ['red', 'green', 'blue'];
colors.length = 10;
colors.push('yellow');
Array.prototype.demo = function () {};

Object.keys(colors); // ["0", "1", "2", "10"]

// 遍歷物件
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.demo = function() {};

var jenemy = new Person('jenemy', 25);

Object.keys(jenemy); // ["name", "age"]

五、總結

一、1、for in迴圈。遍歷例項+原型中可列舉的屬性
　　2、for in不適合遍歷陣列
　　7、for in遍歷陣列的下標型別不一樣 ：for in為String，for為Number
　　8、對不存在項的處理：for in不存在的項不被枚舉出來；for全部枚舉出
　　9、index in array特性可以判斷某個索引是否存在對應元素
二、Object.keys()，遍歷例項可列舉屬性，返回屬性名組成的陣列。
三、for of輸出陣列中包括不存在的值在內的所有值