For...in循环键 - Javascript

在Javascript中，for...in循环用于迭代对象的属性或数组的索引。本文将介绍如何使用for...in循环，遍历对象或数组中的数据。

1. 遍历对象的属性

使用for...in循环可以遍历对象的属性。以下是使用for...in循环遍历对象的示例代码：

const obj = { name: 'John', age: 30, location: 'USA' };

for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

输出如下：

name: John
age: 30
location: USA

在上面的代码中，key就是遍历对象时得到的属性名，obj[key]表示该属性对应的值。

2. 遍历数组的索引

使用for...in循环也可以遍历数组的索引。以下是使用for...in循环遍历数组索引的示例代码：

const arr = [10, 20, 30, 40, 50];

for (const index in arr) {
  console.log(`${index}: ${arr[index]}`);
}

输出如下：

0: 10
1: 20
2: 30
3: 40
4: 50

在上面的代码中，index就是遍历数组时得到的索引，arr[index]表示该索引对应的值。

3. 遍历对象的可枚举属性

使用for...in循环只能遍历对象的可枚举属性。以下是使用for...in循环遍历对象可枚举属性的示例代码：

const obj = {};
Object.defineProperties(obj, {
  name: { value: 'John', enumerable: true },
  age: { value: 30, enumerable: false },
  location: { value: 'USA', enumerable: true },
});

for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

输出如下：

name: John
location: USA

在上面的代码中，Object.defineProperties方法用来定义对象的属性。其中，enumerable属性用来表示该属性是否可枚举。通过遍历obj对象的属性，可以发现只有name和location属性被输出，因为它们都是可枚举的。

4. 遍历对象的原型链属性

使用for...in循环可以遍历对象的原型链属性。以下是使用for...in循环遍历对象原型链属性的示例代码：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.location = 'USA';

const john = new Person('John', 30);

for (const key in john) {
  console.log(`${key}: ${john[key]}`);
}

输出如下：

name: John
age: 30
location: USA

在上面的代码中，Person是一个构造函数，john是一个实例对象。由于location属性被定义在了Person的原型对象上，所以使用for...in遍历john对象时，location属性也被输出了。

5. 总结

for...in循环可以用来遍历对象的属性和数组的索引。需要注意的是，for...in循环只能遍历对象的可枚举属性，而且会遍历对象的原型链属性。在使用时，需要仔细考虑对象的属性结构和属性类型，以避免出现意外的结果。