Jimmy 的架站筆記

嗨~我是 Jimmy!我可能不是你認識的第 1 個 Jimmy,但一定是最帥的那個。


【JavaScript】甚麼時候該用 for...in,甚麼時候該用 for...of

By Jimmy 2020-09-28
發表於 javascript front-end-note
【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

你可能也會喜歡

【JavaScript基礎】:Array Methods — 陣列方法整理

【JavaScript基礎】:Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種,在Javacript中有許多陣列方法(array methods)可做轉換或運算,來整理一下在看到陣列常見和相關的方法。 1. Array and String:陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串,還可以轉換類陣列等等。 語法: > Array.f

Read More