for of 跟 for in 差別|JavaScript 新手解析

更新日期: 2024 年 9 月 14 日

在JavaScript中,for…in 迴圈和 for…of 迴圈分別用於不同的情況:

for…of 迴圈

這個迴圈主要用於遍歷可迭代的物件,如陣列、字符串、Map、Set等。

補充:「遍歷」的意思

「遍歷」可以被理解為「查看每一個」或者「一個接一個地檢查」。

所以,當你用這個迴圈時,它會幫你一項一項地查看這些東西。

它直接獲得成員的值,而不是「索引」(index)或鍵(Key)。

const array = [1, 2, 3];

for (const value of array) {
  console.log(value);
}
// 輸出:
// 1
// 2
// 3

for…in 迴圈

這個迴圈主要用於遍歷物件的屬性。當你使用 for…in 迴圈時,它會遍歷物件的所有可枚舉屬性(包括繼承的屬性)。

補充:繼承屬性

如果你不懂繼承屬性的意思,可以藉由以下例子去理解:

想像你有一輛車(這裡車就是一個物件)。這輛車有一些自己的特點,比如品牌、顏色、型號等(這些就是車的自有屬性)。

同時,這輛車也是某一系列車型的一部分,而這個系列的所有車都有一些共同的特點,比如引擎類型、底盤設計等(這些就是車從它的系列或者說「父類別」那裡繼承的屬性)。

現在,如果你使用 for…in 迴圈去遍歷這輛車的屬性,迴圈會展示出車的所有特點,包括它自己的特點(自有屬性)以及它從所屬車型系列那裡繼承的共同特點(繼承屬性)。

更完整的內容,可以參考這一篇文章:什麼是原型(Prototype)?|JavaScript 初學者筆記(3)

這對於查看或操作物件的鍵(key)很有用。

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(key + " = " + object[key]);
}
// 輸出:
// a = 1
// b = 2
// c = 3

Similar Posts