【JavaScript】甚麼時候該用 for…in，甚麼時候該用 for…of

for…in 是個常在 Object 中使用的方法，但前一陣子發現原來還有 for…of，怕搞混這兩個所以來整理一下差別。

1. for…in

根據 MDN 的解釋，for…in 用來跌代 Object 中 enumerable 的屬性，然而不只會跌代所宣告 Object 中 enumerable 的屬性，還會遞迴該 Object 的 prototype 中 enumerable 的屬性。

Object.prototype.objCustom = function() {}
Array.prototype.arrCustom = function() {}

const iterable = [3, 5, 7]
iterable.foo = 'hello'

for (const i in iterable) {
  console.log(i)
}
// 0, 1, 2, "foo", "arrCustom", "objCustom"

那麼甚麼是 enumerable 呢？enumerable 屬於 6 個 Property Descriptor 其中一個，用來定義是否將該屬性被 for…in 跌代。如果一個屬性的 enumerable 為 false，下面三個操作不會取到該屬性：for…in、Object.keys、JSON.stringify。

在 Object 中，property 的 enumerable 預設為 true，可以透過 defineProperty 方法將其改為 false。

const obj = {
    name: "Jimmy"
}
Object.defineProperty(obj, 'name', { enumerable: false })
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor)
/* {
    value: 'Jimmy',
    writable: true,
    enumerable: false,
    configurable: true
  } */

2. for…of

根據 MDN 的解釋，for…of 用來跌代 iterable object 中的 value。

const iterable = [3, 5, 7]
for (const i of iterable) {
  console.log(i) 
}
// 3, 5, 7

3. 使用時機

3.1 for…in 用在 Object 中

for…in 用在 Object 中可以同時取出 Object 中的 key 和 value。

const obj = {
    name: "Jimmy",
    age: 25,
    weight: "75 kg"
}
for (const key in obj ) {
    console.log(key)
    console.log(obj[key])
}
// name, Jimmy, age, 25, weight, 75 kg

3.2 for…of 用在 Object 中

for…of 用在 Object 中也可以同時取出 key 和 value，和 for…in 不一樣的地方是，必須搭配 Object.keys 方法使用，否則會出錯。

const obj = {
    name: "Jimmy",
    age: 25,
    weight: "75 kg"
}
for (const key of Object.keys(obj)) {
    console.log(key)
    console.log(obj[key])
}
// name, Jimmy, age, 25, weight, 75 kg
for (const key of obj) {
    console.log(key)
}
// error!

3.3 for…in 用在 Array 中

for…in 用在 Array 中可以同時取出 Array 中的 key 和 value。( Array 的 key 是 index。)

const arr = ["Jimmy", 25, "75 kg"]
for (const key in arr ) {
    console.log(key)
    console.log(arr[key])
}
// 0, Jimmy, 1, 25, 2, 75 kg

3.4 for…of 用在 Array 中

for…of 用在 Array 中只能取出 Array 的 value。

const arr = ["Jimmy", 25, "75 kg"]
for (const key of arr) {
    console.log(key)
}
// Jimmy, 25, 75 kg

如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！