JavaScript 中的 for...in 循環

for..in 循環 遍歷 JavaScript 中對象的屬性。它提供了一種非常簡潔的語法來迭代可枚舉（如對象字面量、數組和字符串）和所有其他類型的可迭代屬性。

如何for...in 循環工作

for (const key in object) {
    // do something
}

key 是在每次迭代中分配了不同屬性名稱的變量的名稱。 object 是您正在循環的實際可迭代對象（對象文字、數組、字符串）。循環內的代碼塊對每個屬性執行一次。

您可以使用 key 從對像中獲取屬性的值。

這是一個例子：

const user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    admin: false
};

for (const key in user) {
    console.log(key); // property name
    console.log(user[key]); // property value
}

for...in 循環示例

讓我們再舉一些例子。 for...in 下面的循環遍歷 object literal 的屬性 並記錄屬性名稱及其值的字符串：

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    horse: '🐴',
    elephant: '🐘'
};


for (const key in animals) {
    console.log(`${key} --> ${animals[key]}`);
}

// tiger --> 🐅
// cat --> 🐱
// monkey --> 🐒
// horse --> 🐴
// elephant --> 🐘

你也可以使用 for...in 循環遍歷數組或字符串 通過使用它們的索引值：

const str = 'JavaScript Loops';

for (const index in str) {
    console.log(`${str[index]} is at ${index} index.`);
}

// J is at 0 index.
// a is at 1 index.
// v is at 2 index.
// a is at 3 index.
// ...

for...in 循環和原型

JavaScript 中的對象可以有很多繼承自對象原型的屬性。例如，使用 Array 創建的對象 和 Object 構造函數從 Object.prototype 繼承了許多屬性 和 String.prototype . for...in 循環將迭代對象本身的整體屬性以及對像從其構造函數的原型繼承的屬性。

讓我們舉個例子來理解這種繼承：

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const cat = new Animal('Cat', '🐱');

Animal.prototype.color = 'White';

for (const prop in cat) {
    console.log(`Aminal ${prop} is ${cat[prop]}.`);
}

// Aminal name is Cat.
// Aminal icon is 🐱.
// Aminal color is White.

color 動物是原型的一部分，而不是實際的對象cat ，但無論如何都會返回。如果您只對附加到對象本身的屬性感興趣，而不是它的原型，請使用 hasOwnProperty() 確保鍵是實際對象的屬性的方法：

for (const prop in cat) {
    if (cat.hasOwnProperty(prop)) {
        console.log(`Aminal ${prop} is ${cat[prop]}.`);
    }
}

瀏覽器兼容性

for...in loop 在包括 Internet Explorer 6 及更高版本在內的所有現代瀏覽器中都能完美運行。