前言

Javascript 中遍歷陣列及物件的方式有很多，for、forEach、map、every、some ...等等，這篇來說明最基本的 for ... in 和 for ... of。

for in vs for of

1. for in遍歷的是key；for of遍歷的是value。
2. for of主要是針對可迭代的對象（包括 Array、Map、Set、String、TypedArray、arguments 等等）
3. for in 會遍歷自定義屬性，for of 不會遍歷自定義屬性。

for in

陣列的狀況：

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

for(let index in arr){
    console.log(index);
}
// 0,1,2,3,4

物件的狀況：

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}

for(let index in obj){
    console.log(index);
}
// name email

若想要用for in 取value，也是可以，要用arr[index]：

陣列的狀況：

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

for(let index in arr){
    console.log(arr[index]);
}
//a,b,c,d,{'e':'e_value','f':'f_value'}

物件的狀況：

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}

for(let index in obj){
    console.log(obj[index]);
}
// amy eat@gmail.com

for in 會遍歷自定義屬性

陣列的狀況：

arr.name='myArray'; //自定義屬性
for(let index in arr){
    console.log(index);
}
// 0,1,2,3,4,name

物件的狀況：

let obj = {
  name: 'amy',
  email: 'eat@gmail.com',
}
obj.address = 'somewhere'
for(let index in obj){
    console.log(obj[index]);
}
//amy  eat@gmail.com  somewhere

for of 取value，不會遍歷自定義屬性

陣列的狀況：

let arr = ['a','b','c','d',{'e':'e_value','f':'f_value'}];

arr.name='myArray'; //自定義屬性

for(let value of arr){
    console.log(value);
}
//a b c d { e: 'e_value', f: 'f_value' }
//不顯示myArray

物件的狀況：物件非迭代的對象，因此不成立。