循环允许我们循环遍历数组或对象中的项目，并执行诸如打印、修改或执行其他类型的任务或操作之类的操作。JavaScript 中有不同种类的循环，其中之一是 for…in 循环。

在本文中，我们将了解 for…in JavaScript 提供的循环。我们将看看 for…in 循环在 JavaScript 中是如何使用的、它的语法、它如何工作的示例、何时使用它、何时不使用它，以及我们可以使用哪些其他类型的循环来代替。

为什么使用循环

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

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

for…in 循环的定义

JavaScript for…in 循环遍历或迭代集合的键。使用这些键，您可以访问它在集合中代表的项目。

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

for…in 循环的语法

该 for…in 环具有下面的语法或结构：

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

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

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

对对象使用 for…in 循环

for…in 在 JavaScript 中使用循环迭代对象时，迭代的键或属性——在上面的代码片段中，由 key 变量表示——是对象自己的属性。

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

for…in 循环对象示例

在下面的示例中，我们循环遍历以下变量 obj ：

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

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

请注意，键的迭代顺序是升序的（即按数字顺序从数字开始，然后按字母顺序排列字母）。但是，此输出顺序与初始化对象时创建的项目的索引顺序不同。

对数组使用 for…in 循环

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

因此，如果我们上面显示 value 的 for…in 循环语法结构中的变量是一个包含五个项目的数组，则 key 不能保证为 0 到 4。一些索引可能在其他索引之前。本文稍后将详细说明何时可能发生这种情况。

For…in 循环数组示例

在下面的示例中，我们循环遍历以下变量 arr ：

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

在循环中，我们渲染每个数组元素的索引和值。

对字符串使用 for…in 循环

您可以使用 JavaScript for…in 循环遍历字符串。但是，不建议这样做，因为您将遍历字符的索引而不是字符本身。

for…in 循环字符串示例

在下面的示例中，我们循环遍历以下变量 str ：

 const str = "Hello, World!";
  

在循环内部，我们渲染每个字符的键或索引，以及该索引处的字符。

何时使用 for…in 循环

让我们看看 JavaScript for…in 循环最适合的情况。

使用 JavaScript for…in 循环迭代对象

因为 for…in 循环只迭代对象的可枚举属性——它们是对象自己的属性而不是像 toString 对象原型的一部分的属性——使用 for…in 循环来迭代对象是很好的。甲 for…in 环提供了一种简单的方法来遍历一个对象的属性和它的最终值。

使用 for…in 循环进行调试

JavaScript for…in 循环的另一个很好的用例是调试。例如，您可能希望将对象的属性及其值打印到控制台或 HTML 元素。在这种情况下， for…in 循环是一个不错的选择。

使用 for…in 循环调试对象及其值时，应始终牢记迭代不是有序的，这意味着循环迭代的项目顺序可以是随机的。因此，访问的属性的顺序可能与预期不同。

何时不使用 JavaScript for…in Loop

现在让我们看看 for…in 循环不是最佳选择的情况。

数组的有序迭代

由于使用 for…in 循环时无法保证迭代中的索引顺序，如果需要维护顺序，建议不要迭代数组。

如果您希望支持像 IE 这样的浏览器，这尤其重要，IE 会按照项目的创建顺序而不是索引的顺序进行迭代。这与当前现代浏览器的工作方式不同，后者根据索引按升序迭代数组。

因此，例如，如果您有一个包含四个项目的数组，并且您将一个项目插入到第三个位置，那么在现代浏览器中， for…in 循环仍会按从 0 到 4 的顺序迭代该数组。在 IE 中，当使用 for…in 循环时，它会进行迭代最初在数组中的四个项目，然后到达在第三个位置添加的项目。

在迭代时进行更改

对属性的任何添加、删除或修改都不能保证有序迭代。 for…in 应避免在循环中更改属性。这主要是由于其无序的性质。

因此，如果您在迭代中到达之前删除一个项目，则在整个循环中根本不会访问该项目。

同样，如果您对属性进行更改，也不能保证不会再次访问该项目。因此，如果一个属性被更改，它可能会在循环中被访问两次而不是一次。

此外，如果在迭代期间添加了一个属性，则在迭代期间可能会访问它，也可能根本不会访问它。

由于这些情况，最好避免对 for…in 循环中的对象进行任何更改、删除或添加。

这是在 for…in 循环中添加元素的示例。在第一个循环中添加之后，我们可以看到第一个循环的结果，然后是第二个循环的结果。

正如你在上面的例子中看到的，添加的元素没有被迭代。

替代循环类型

因此，在 for…in 循环不是最佳选择的情况下，您应该使用什么来代替？让我们来看看。

对数组使用 for 循环

使用 for 循环永远不会错！JavaScript for 循环是循环数组元素的最基本工具之一。该 for 循环允许您为您遍历数组采取指数的完全控制。

这意味着在使用 for 循环时，您可以前后移动、更改数组中的项目、添加项目等，同时仍保持数组的顺序。

以下语句创建一个循环，该循环遍历数组并将其值打印到控制台。

 for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
  

数组和对象的 forEach 方法

JavaScript 中的forEach是数组原型上的一个方法，它允许我们在 回调函数 中迭代数组的元素及其索引。

回调函数 是您传递给另一个方法或函数以作为该方法或函数执行的一部分来执行的函数。当涉及到 forEach 在JavaScript中，这意味着该回调函数将针对每次迭代接收在迭代作为一个参数的当前项被执行。

例如，以下语句迭代变量 arr 并使用 forEach 以下命令在控制台中打印其值：

 arr.forEach((value) => console.log(value));
  

您还可以访问数组的索引：

 arr.forEach((value, index) => console.log(value, index));
  

JavaScript forEach 循环也可用于通过使用Object.keys()来迭代对象，将要迭代的对象传递给它，它返回对象自身属性的数组：

 Object.keys(obj).forEach((key) => console.log(obj[key]));
  

或者， forEach 如果您不需要使用Object.values()访问属性，则可以直接循环属性的值：

 Object.values(obj).forEach((value) => console.log(value));
  

请注意， Object.values() 以与 相同的顺序返回项目 for…in 。

结论

通过使用 JavaScript for…in 循环，我们可以遍历对象的键或属性。它在迭代对象属性或调试时很有用，但在迭代数组或对对象进行更改时应避免使用。我希望你发现上面的例子和解释很有用。