JavaScript for…in 循环

for...in 和 for 循环一样，也可以用于遍历数组和对象，但它们的用法和语法上是有所不同的。

遍历对象

我们可以使用 for...in 循环来遍历对象的属性。

下面是一个简单的例子：

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循环来遍历它的属性。我们定义了一个变量prop来代表对象的属性名称，并使用这个变量来输出属性名及其对应的值。

请注意，for...in 循环不仅仅可以遍历对象的自有属性，还可以遍历从原型链继承而来的属性。因此，我们可以在循环体内使用 hasOwnProperty 来检测一个属性是否是对象的自有属性。

下面是一个带有原型的例子：

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的属性。

我们创建了一个名为john的对象，它继承了Person的属性和原型，包括它的gender属性。

我们使用for...in循环来遍历john对象的属性，并通过hasOwnProperty方法来检测这些属性是否是对象的自有属性。

请注意，for...in循环中的变量名并没有什么特殊的含义。我们可以将它们命名为任何我们喜欢的变量名。

遍历数组

我们也可以使用for...in循环来遍历数组。但是需要注意的是，for...in循环会遍历数组中所有可枚举的属性，包括数组的原型链上的属性，这可能会导致一些意外的结果。

下面是一个例子：

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的属性。然后我们使用for...in循环来遍历数组arr中的属性，并输出它们的值。

请注意，for...in循环遍历的是数组的索引，也就是它的数字属性。如果数组中有非数字的属性，例如 foo 属性，它也会被遍历到。

因此，虽然我们可以使用 for...in循环来遍历数组，但我们仍然需要小心使用它。