【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

看完這篇文章是不是想換工作了呢(咦?那就千萬別錯過 2024 職涯博覽會!想換工作的,有機會在博覽會遇見更好的另一半,不想換工作的,有機會在博覽會遇見更好的工作!趕快點擊下面的 banner,拯救你的人生!!!https://s.yourator.co/jimmy

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top