在本教程中，您将学习如何使用 JavaScrip tfor...in 循环迭代对象的可枚举属性。
JavaScript for...in 循环简介
遍历以对象字符串为键的可枚举属性。请注意，属性可以由字符串或符号作为键。
for...in 循环可通过对象的键，迭代对象的属性。对象的键可以是字符串或者是一个符号。
当一个属性是通过简单的赋值或者使用属性初始化器创建时，属性的数据属性 enumerable 默认是 true。
object.propertyName = value;或者
let obj = {
propertyName: value,
...
};下面展示 for...in 循环的语法：
for(const propertyName in object) {
// ...
}for...in 循环允许您在不知道属性的名称的情况访问对象的每个属性和值。例如：
var person = {
firstName: 'John',
lastName: 'Doe',
ssn: '299-24-2351'
};
for(var prop in person) {
console.log(prop + ':' + person[prop]);
}输出：
firstName:John
lastName:Doe
ssn:299-24-2351在这个例子，我们使用 for...in 循环迭代 person 对象的属性。我们使用以下语法访问每个属性的值：
object[property]; for...in 循环与继承
当您遍历已继承其它对象的属性时，for...in 语句在原型链中上升并枚举继承的属性。比如以下示例：
var decoration = {
color: 'red'
};
var circle = Object.create(decoration);
circle.radius = 10;
for(const prop in circle) {
console.log(prop);
}输出：
radius
colorcircle 对象原型引用 decoration 对象。因此，for...in 循环打印 circle 对象及其原型的属性。
如果只想枚举对象自身的属性，可以使用 hasOwnProperty() 方法：
for(const prop in circle) {
if(circle.hasOwnProperty(prop)) {
console.log(prop);
}
}输出：
radiusfor...in 循环与数组
最好不要使用 for...in 循环遍历数组，尤其是当数组元素的顺序很重要时。以下示例很好地运行：
const items = [10 , 20, 30];
let total = 0;
for(const item in items) {
total += items[item];
}
console.log(total); 但是，有人可能会在他们的库中设置内置 Array 类型的属性，如下所示：
Array.prototype.foo = 100;因此，for...in 将无法正常工作。例如：
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);输出：
{ prop: '0', value: 10 }
{ prop: '1', value: 20 }
{ prop: '2', value: 30 }
{ prop: 'foo', value: 100 }
160或者另一个例子：
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]);
}输出显示数组的三个元素，这是正确的：
undefined
undefined
3但是， for...in 循环忽略了前两个元素：
for (const key in arr) {
console.log(arr[key]);
}输出：
3输出仅显示第三个元素，不显示前两个元素。