极客笔记JavaScript中的for…in循环：遍历对象
1. 引言
JavaScript是一种功能强大的编程语言，也是Web开发中广泛使用的一种语言。在JavaScript中，我们经常需要对对象进行遍历操作，以获取对象中的属性和值。为了实现这一目的，JavaScript提供了for…in循环，可以方便地遍历一个对象的所有可枚举属性。
2. for…in循环的语法
for…in循环的基本语法如下：
for (property in object) {
// 执行循环体代码
}
其中，property是一个变量，用于在每次迭代中存储对象的属性名（或者索引值），object是要遍历的对象。
3. for…in循环的应用场景
for…in循环主要用于遍历对象的属性，特别适用于遍历对象的键值对。通过for…in循环，我们可以逐个访问对象的属性，执行相应的操作。常见的应用场景包括但不限于：
- 遍历对象的属性并输出
- 遍历对象的属性并进行筛选、计算等操作
- 遍历数组的索引并进行操作
4. for…in循环遍历对象的属性
下面，我们将深入探讨如何使用for…in循环遍历对象的属性，并给出示例代码及运行结果。
假设有一个名为person的对象：
let person = {
name: 'Tom',
age: 25,
gender: 'male'
};
现在，我们希望遍历该对象的属性，并将每个属性名和属性值输出到控制台。可以使用for…in循环来实现：
for (let property in person) {
console.log(`{property}:{person[property]}`);
}
运行结果如下：
name: Tom
age: 25
gender: male
上述代码中的property是一个变量，用于存储对象person的属性名。在每次循环迭代中，我们使用person[property]来获取该属性的值，并通过console.log()将属性名和属性值输出到控制台。
该示例中的输出是按属性在源代码中定义的顺序输出的，但在实际应用中，对象的属性遍历顺序是不确定的，因为JavaScript对象是无序的。
5. for…in循环遍历对象的原型属性
除了遍历对象本身的属性，for…in循环也可以遍历对象的原型属性。
Object.prototype.foo = 'bar';
let person = {
name: 'Tom',
age: 25,
gender: 'male'
};
for (let property in person) {
console.log(`{property}:{person[property]}`);
}
运行结果如下：
name: Tom
age: 25
gender: male
foo: bar
上述代码中，我们在Object.prototype上定义了一个属性foo。然后使用for…in循环遍历了person对象的属性，包括person的原型属性foo。
需要注意的是，通过for…in循环遍历对象时，会遍历对象本身的可枚举属性以及与之相关的原型链上的可枚举属性。为了避免遍历到原型属性，可以使用hasOwnProperty()方法进行过滤。
6. 使用hasOwnProperty()方法过滤原型属性
hasOwnProperty()方法是JavaScript中的一个内建方法，用于判断一个对象是否包含指定的属性。利用hasOwnProperty()方法，可以过滤掉对象的原型属性。
Object.prototype.foo = 'bar';
let person = {
name: 'Tom',
age: 25,
gender: 'male'
};
for (let property in person) {
if (person.hasOwnProperty(property)) {
console.log(`{property}:{person[property]}`);
}
}
运行结果如下：
name: Tom
age: 25
gender: male
由于我们使用hasOwnProperty()方法进行了属性的过滤，所以只输出了person对象本身的属性，而没有遍历到原型属性foo。
7. for…in循环遍历数组的索引
尽管for…in循环主要用于遍历对象的属性，但它也可以用于遍历数组的索引。
let fruits = ['apple', 'banana', 'orange'];
for (let index in fruits) {
console.log(index);
}
运行结果如下：
0
1
2
上述代码中，我们使用for…in循环遍历了数组fruits的索引。在每次迭代中，变量index都会被赋值为数组的索引值，然后打印输出到控制台。
需要注意的是，for…in循环遍历数组索引时，返回的索引是字符串类型而非数字类型。所以在实际应用中，我们可能需要将索引值转换为数字类型。
8. 总结
JavaScript中的for…in循环是一种方便遍历对象属性的方法。通过for…in循环，我们可以逐个访问对象的属性，并执行相应的操作。需要注意的是在遍历对象时，会遍历对象本身的可枚举属性以及与之相关的原型链上的可枚举属性，可以使用hasOwnProperty()方法进行过滤。此外，for…in循环也可以用于遍历数组的索引。