for 迴圈的延伸 for...in 與 for...of

學起來學起來。

懶人包

• for...in 會輸出 key，通常用在 object（ES5）
• for...of 會輸出 value 只能用在 array（ES6）

兩者的差異

const arr = [1, 2, 3, 4, 5, 6]

// for...in
for(let key in arr) {
  console.log(key) // '0', '1', '2', '3', '4', '5'
}
// for..of
for(let value of arr) {
  console.log(value) // 1, 2, 3, 4, 5, 6
}

for…in 的幾個特點

1. 會輸出在陣列中新增的 key

const arr = [1, 2, 3, 4, 5]

// 對 arr 建立新的 key
arr.myKey = 'hello'

for(let key in arr) {
  console.log(key)  // '0', '1', '2', '3', '4', 'myKey'
}

for(let value of arr) {
  console.log(value) // 1, 2, 3, 4, 5
}

for...of 會按照 arr[0], arr[1]... 這樣的順序去迭代，所以不會迭代到 arr['myKey'] 這個值，也就沒辦法輸出 'hello' 了。

2. 會輸出從原型鏈中繼承的屬性

const arr = [1, 2, 3, 4, 5]

// 在 Array 的 prototype 中新增屬性
Array.prototype.myProperty = 'hello'

for(let key in arr) {
  console.log(key)  // '0', '1', '2', '3', '4', 'hello'
}

for(let value of arr) {
  console.log(value) // 1, 2, 3, 4, 5
}

這裡談的 prototype 是指我們自己額外新增的才算數，不包含原本內建的。

const arr = [1, 2, 3, 4, 5]

// 在 Object 的 prototype 中新增屬性
Object.prototype.myProperty = 'hello'

for(let key in arr) {
  console.log(key)  // '0', '1', '2', '3', '4', 'hello'
}

for(let value of arr) {
  console.log(value) // 1, 2, 3, 4, 5
}

既然是原型鏈，那只要能夠在原型鏈中的 prototype 找到的屬性都能算數。不過範圍跟剛才一樣，僅限於我們另外新增的才算數。

for…of 並不能迭代物件的值

前面有提到 for...of 是按照 arr[0], arr[1]... 這樣的順序來迭代出 value。所以當 for..of 的對象是物件（Object）的話，會拋出一個錯誤跟你說：「這是一個沒辦法迭代的對象」

const me = {
  name: 'Jim',
  age: 20,
  position: 'engineer'
}

// Uncaught TypeError: me is not iterable
for(let value of me) {
  console.log(value)
}

雖然 for..of 本身無法做到，但可以搭配 Object.keys() 來取出物件中的值。

const me = {
  name: 'Jim',
  age: 20,
  position: 'engineer'
}

// Object.keys 會回傳一個包含所有 key 的陣列
for(let value of Object.keys(me)) {
  console.log(me[value])
}

這裡的小巧思就是，for...of 的對象仍然是陣列（Array），但這個陣列包含了所有我們需要的 key 值，利用它就能取出物件中的每個值。