`for...in` 循环中的奇怪行为

在 JavaScript 中，我们可以使用 for...in 循环来遍历一个对象中所有可枚举属性的键名。然而，这个循环有时候会表现出一些奇怪的行为，特别是当我们对数组进行遍历的时候。

数组遍历中的问题

让我们看一下下面的代码：

const arr = [1, 2, 3];
arr.foo = 'bar';

for (let i in arr) {
  console.log(i);
}

如果你运行这段代码，你会发现它输出了以下内容：

0
1
2
foo

这里的问题在于，for...in 循环并不仅仅只遍历数组元素本身，而是会遍历数组对象上的所有可枚举属性，包括我们自己添加的 foo 属性。

因此，如果你只想要遍历数组元素本身，你需要加上一个判断语句来排除掉其他属性：

const arr = [1, 2, 3];
arr.foo = 'bar';

for (let i in arr) {
  if (arr.hasOwnProperty(i)) {
    console.log(i);
  }
}

现在，这段代码只会输出：

0
1
2

因为我们使用了 hasOwnProperty() 方法来检查属性是否是对象本身的属性。

对象遍历中的问题

除了数组之外，在遍历对象时也可能会出现问题。让我们看一下下面的代码：

const obj = { a: 1, b: 2, c: 3 };
Object.prototype.foo = 'bar';

for (let prop in obj) {
  console.log(prop);
}

如果你运行这段代码，你会发现它输出了以下内容：

a
b
c
foo

同样的，for...in 循环并不仅仅只遍历对象本身的属性，而是包括了原型链上的属性。因此，如果你只想要遍历对象自身的属性，你需要加上一个判断语句来排除掉其他属性：

const obj = { a: 1, b: 2, c: 3 };
Object.prototype.foo = 'bar';

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

现在，这段代码只会输出：

a
b
c

总结

在 JavaScript 中，for...in 循环虽然非常便捷，但是需要注意其奇怪的遍历行为。特别是在遍历数组和对象时，我们需要使用 hasOwnProperty() 方法去排除掉原型链上的属性，确保我们只遍历到对象/数组本身的属性。

希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29358