我們在剛入門 JS 時候，說到要跑出陣列的每個值肯定都是這樣子：

var arr = [1,2,3,4,5,6];
for(let i = 0; i < arr.length; i++){
    console.log(arr[i])
}

在這之後，有出了 forEach 作為陣列原型使用 ：

var arr = [1,2,3,4,5,6];
arr.forEach((item)=>console.log(item));

但是，物件要怎麼辦呢？ 我們也可以用 forEach 嗎：

var obj = {a:1,b:2,c:3,d:4};
obj.forEach((item)=>console.log(item));
// TypeError: obj.forEach is not a function

看來是不行，幸好後來 JS 提供了 for-in ：

var obj = {a:1,b:2,c:3,d:4};
for(let item in obj){
	console.log(item);
    console.log(obj[item])
}

可以看到我們 跑出來的都是 key 值，那陣列也能跑嗎？

var arr = ["a","b","c","d","e","f"];
for(let item in arr){
	console.log(item);
    console.log(arr[item]);
}

恩....看起來好像是可以，但是這邊要注意到幾個 for-in 陷阱。

var arr = ["a","b","c","d","e","f"];
arr.sayHi = "HI!!!";
for(let item in arr){
	console.log(item);
    console.log(arr[item]);
}

可以看到說，我們自定義的屬性也會被顯示出來。
而且 for-in 的遍歷順序可能會有瀏覽器上的差異，導致無法以一致的順序遍歷元素，因此 MDN 建議不要用於陣列上：

那有沒有只能顯示陣列值的方法呢？

有的， ES6 推出了 for-of ，可以在「可迭代的物件」( Array,，Map，Set，String，TypedArray，arguments 等 )上作使用。

var arr = ["a","b","c","d","e","f"];
arr.sayHi = "HI!!!";
for(let item of arr){
	console.log(item);
}

var obj = {a:1,b:2,c:3,d:4};
for(let item of obj){
	console.log(item);
}//TypeError: obj is not iterable

所以一般來說沒有辦法在物件上作使用，若真的不得已要用的話可以這樣寫：

var obj = {a:1,b:2,c:3,d:4};
for(let item of Object.keys(obj)){
	console.log(obj[item]);
}

Object.keys(obj) 會把所有物件內的 key 值轉為陣列，這樣我們就能遍歷該物件了。

不過通常來說，for-in 會比較推薦用在物件上，而 for-of 會推薦用在陣列上。

參考資料：
javascript总for of和for in的区别？
MDN-for...in
MDN-for...of
使用Javascript中的換的循環