JavaScript for…in 循環

for...in 和 for 循環一樣，也可以用于遍歷數組和對象，但它們的用法和語法上是有所不同的。愛掏網 - it200.com

我們可以使用 for...in 循環來遍歷對象的屬性。愛掏網 - it200.com

下面是一個簡單的例子：

var obj = { a: 1, b: 2, c: 3 };

for (var prop in obj) {
    console.log(`obj.{prop} ={obj[prop]}`);
}
// 輸出：obj.a = 1
//       obj.b = 2
//       obj.c = 3

在這個例子中，我們定義了一個名為obj的對象，并使用for...in循環來遍歷它的屬性。愛掏網 - it200.com我們定義了一個變量prop來代表對象的屬性名稱，并使用這個變量來輸出屬性名及其對應的值。愛掏網 - it200.com

請注意，for...in 循環不僅僅可以遍歷對象的自有屬性，還可以遍歷從原型鏈繼承而來的屬性。愛掏網 - it200.com因此，我們可以在循環體內使用 hasOwnProperty 來檢測一個屬性是否是對象的自有屬性。愛掏網 - it200.com

下面是一個帶有原型的例子：

var Person = function() {
    this.name = 'John Doe';
    this.age = 25;
};

Person.prototype.gender = 'male';

var john = new Person();

for (var prop in john) {
    if (john.hasOwnProperty(prop)) {
        console.log(`john.{prop} ={john[prop]}`);
    }
}
// 輸出：john.name = John Doe
//       john.age = 25

在這個例子中，我們定義了一個名為Person的構造函數，并在它的原型上定義了一個名為gender的屬性。愛掏網 - it200.com

我們創建了一個名為john的對象，它繼承了Person的屬性和原型，包括它的gender屬性。愛掏網 - it200.com

我們使用for...in循環來遍歷john對象的屬性，并通過hasOwnProperty方法來檢測這些屬性是否是對象的自有屬性。愛掏網 - it200.com

請注意，for...in循環中的變量名并沒有什么特殊的含義。愛掏網 - it200.com我們可以將它們命名為任何我們喜歡的變量名。愛掏網 - it200.com

遍歷數組

我們也可以使用for...in循環來遍歷數組。愛掏網 - it200.com但是需要注意的是，for...in循環會遍歷數組中所有可枚舉的屬性，包括數組的原型鏈上的屬性，這可能會導致一些意外的結果。愛掏網 - it200.com

下面是一個例子：

var arr = ['a', 'b', 'c'];

Array.prototype.foo = 'd';

for (var prop in arr) {
    console.log(`arr.{prop} ={arr[prop]}`);
}
// 輸出：arr.0 = a
//       arr.1 = b
//       arr.2 = c
//       arr.foo = d

在這個例子中，我們定義了一個名為arr的數組，并在Array的原型上定義了一個名為foo的屬性。愛掏網 - it200.com然后我們使用for...in循環來遍歷數組arr中的屬性，并輸出它們的值。愛掏網 - it200.com

請注意，for...in循環遍歷的是數組的索引，也就是它的數字屬性。愛掏網 - it200.com如果數組中有非數字的屬性，例如 foo 屬性，它也會被遍歷到。愛掏網 - it200.com

因此，雖然我們可以使用 for...in循環來遍歷數組，但我們仍然需要小心使用它。愛掏網 - it200.com

結論

for...in循環是一個用于遍歷對象屬性的方便方法，但不適合用于遍歷數組。愛掏網 - it200.com同時還要注意它會遍歷對象原型鏈上的屬性，需要正確地使用 hasOwnProperty 方法來判斷屬性是否是對象的自有屬性。愛掏網 - it200.com