for of 跟 for in 差別｜JavaScript 新手解析
更新日期： 2023 年 12 月 19 日
在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
