了解JavaScript中的for...in循环循环允许我们循环浏览数组或对象中的项目，并做一些事情，如打印它们，修改它

循环允许我们循环浏览数组或对象中的项目，并做一些事情，如打印它们，修改它们，或执行其他类型的任务或动作。在JavaScript中有不同种类的循环，其中之一是for...in循环。

在这篇文章中，我们将学习JavaScript提供的for...in 循环。我们将看看for...in 循环在JavaScript中是如何使用的，它的语法，它如何工作的例子，何时使用它，何时不使用它，以及我们可以使用哪些其他类型的循环来代替它。

为什么使用循环

在JavaScript中，就像在其他编程语言中一样，我们使用循环来读取或访问一个集合的项目。这个集合可以是一个数组或一个对象。每一次通过集合中的项目都被称为一次迭代。

有两种方法可以访问集合中的一个项目。第一种方式是通过它在集合中的键，也就是数组中的索引或对象中的属性。第二种方式是通过项目本身，而不需要键。

A loop iterates property values and array values

JavaScriptfor...in 循环遍历或迭代一个集合的键。使用这些键，你就可以访问它在集合中代表的项目。

项目的集合可以是数组、对象，甚至是字符串。

for...in 循环的语法或结构如下。

for (let key in value) {
  //do something here
}

在这个代码块中，value 是我们要迭代的项目的集合。它可以是一个对象、数组、字符串，等等。key 将是value 中每个项目的键，在每次迭代中改变为列表的下一个键。

注意，我们使用let 或const 来声明key 。

For in loop iterating object properties

当在JavaScript中使用for...in 循环来迭代一个对象时，迭代的键或属性--在上面的片段中，由key 变量表示--是该对象自己的属性。

由于对象可能通过原型链继承项目，其中包括Objects的默认方法和属性，以及我们可能定义的Object原型，因此我们应该使用hasOwnProperty。

在下面的例子中，我们在下面的变量obj 上循环。

const obj = {
  1: "JavaScript",
  3: "PHP",
  2: "Python",
  4: "Java"
};

在循环中，我们在一个<div> 元素中渲染属性和值。

请看CodePen上SitePoint (@SitePoint) 的Pen
循环对象。

请注意，对于键来说，迭代的顺序是升序的（也就是说，从数字开始，按数字顺序，然后按字母顺序）。然而，这个输出的顺序与初始化对象时创建的项目的索引顺序不同。

在JavaScript中使用for...in 循环来迭代数组时，key 在这种情况下将是元素的索引。然而，这些索引可能会以随机的顺序被迭代。

因此，如果我们上面展示的for...in 循环语法结构中的value 变量是一个有5个项目的数组，key 将不保证是0到4。一些指数可能会在其他指数之前。关于何时可能发生这种情况的细节将在本文后面解释。

在下面的例子中，我们正在循环处理以下变量arr 。

const arr = ["Javascript", "PHP", "Python", "Java"];