JavaScript for…in 循环

摘要：在本教程中，您将学习如何使用 JavaScript for...in 循环来迭代对象的枚举属性。

JavaScript for…in 循环简介

for...in 循环遍历由字符串作为键的 枚举属性，这些属性属于 对象。请注意，属性可以由字符串或 符号 作为键。

当属性的内部 enumerable 标志设置为 true 时，该属性就是可枚举的。

当属性通过简单的赋值或属性初始化器创建时，enumerable 标志默认为 true

object.propertyName = value;

或者

let obj = {
    propertyName: value,
    ...
};
Code language: JavaScript (javascript)

以下显示了 for...in 循环的语法

for(const propertyName in object) {
    // ...
}
Code language: JavaScript (javascript)

for...in 允许您访问对象的每个属性和值，而无需知道属性的具体名称。例如

var person = {
    firstName: 'John',
    lastName: 'Doe',
    ssn: '299-24-2351'
};

for(var prop in person) {
    console.log(prop + ':' + person[prop]);
}
Code language: JavaScript (javascript)

输出

firstName:John
lastName:Doe
ssn:299-24-2351
Code language: CSS (css)

在这个例子中，我们使用 for...in 循环迭代 person 对象的属性。我们使用以下语法访问每个属性的值

object[property];
Code language: CSS (css)

for...in 循环和继承

当您循环遍历从另一个对象继承的属性时，for...in 语句会向上遍历原型链并枚举继承的属性。请看以下示例

var decoration = {
    color: 'red'
};

var circle = Object.create(decoration);
circle.radius = 10;


for(const prop in circle) {
    console.log(prop);
}
Code language: JavaScript (javascript)

输出

radius
color

circle 对象有自己的原型，它引用 decoration 对象。因此，for...in 循环显示 circle 对象及其原型的属性。

如果您想枚举对象的 自身属性，可以使用 hasOwnProperty() 方法

for(const prop in circle) {
    if(circle.hasOwnProperty(prop)) {
        console.log(prop);
    }
}
Code language: JavaScript (javascript)

输出

radius

for…in 循环和数组

最好不要使用 for...in 来迭代 数组，尤其是在数组元素的顺序很重要的情况下。

以下示例完美运行

const items = [10 , 20, 30];
let total = 0;

for(const item in items) {
    total += items[item];
}
console.log(total); Code language: JavaScript (javascript)

但是，有些人可能会在他们的库中为内置的 Array 类型设置一个属性，如下所示

Array.prototype.foo = 100;Code language: JavaScript (javascript)

因此，for...in 将无法正常工作。例如

// somewhere else
Array.prototype.foo = 100;

const items = [10, 20, 30];
let total = 0;

for (var prop in items) {
  console.log({ prop, value: items[prop] });
  total += items[prop];
}
console.log(total);Code language: JavaScript (javascript)

输出

{ prop: '0', value: 10 }
{ prop: '1', value: 20 }
{ prop: '2', value: 30 }
{ prop: 'foo', value: 100 }
160Code language: CSS (css)

另一个例子

var arr = [];
// set the third element to 3, other elements are `undefined`
arr[2] = 3; 

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}Code language: JavaScript (javascript)

输出显示数组的三个元素，这是正确的

undefined
undefined
3Code language: JavaScript (javascript)

但是，for...in 循环忽略了前两个元素

for (const key in arr) {
    console.log(arr[key]);
}
Code language: JavaScript (javascript)

输出

3

输出只显示第三个元素，而不是前两个元素。

总结

• for...in 循环迭代对象的 枚举属性。它还会向上遍历 原型 链并枚举继承的属性。
• 避免使用 for...in 循环来迭代数组的元素，尤其是在索引顺序很重要的情况下。