JavaScript中for循环的完整指南：for...in、for与forEach详解

循环机制允许我们遍历数组或对象中的元素，并执行打印、修改或其他操作。JavaScript提供了多种循环类型，其中for循环专门用于迭代集合（如数组）中的数据。

为什么在JavaScript代码中要使用for循环

与许多其他编程语言类似，JavaScript中我们利用循环来读取或访问集合内的元素。这里的集合通常指数组或对象。每次循环处理集合中的一个元素时，这一过程被称为迭代。

访问集合元素主要有两种方式：第一种是通过键（即数组的索引或对象的属性名）来访问；第二种则是直接访问元素本身，无需显式使用键。

for…in 循环的定义

JavaScript中的for循环用于遍历集合的键。通过获取这些键，我们可以访问集合中对应的具体元素。

需要迭代的集合可以是数组、对象，甚至是字符串。

for…in 循环的语法

for循环具备如下语法结构：

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

在上述代码块中，value代表正在迭代的集合，可以是对象、数组或字符串等。key则是value中每个元素的键，在每次迭代中会自动更新为列表中的下一个键。

请注意，key变量必须使用let或const进行声明。

在JavaScript中使用for循环与对象

当在JavaScript中使用for...in循环迭代对象时，迭代的键或属性（由上述代码片段中的key变量表示）对应的是对象自身的属性。

由于对象可能通过原型链继承属性，该链条包含了对象的默认方法及属性以及我们可能定义的原型，因此在使用时应配合hasOwnProperty方法进行过滤。

遍历可迭代对象的for循环示例

在以下示例中，我们遍历变量obj并记录每个属性及其对应的值：

const obj = {
  "a": "JavaScript",
  1: "PHP",
  "b": "Python",
  2: "Java"
};
for (let key in obj) {
  console.log(key + ": " + obj[key] )
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"

需要注意的是，键的迭代顺序是升序的（即先按数字顺序排列数字键，再按字母顺序排列字符串键）。然而，输出的顺序与初始化对象时创建项的索引顺序并不一致。

在JavaScript中使用for…in循环与数组

当使用for...in循环迭代数组时，此时的key代表元素的索引。然而，索引的迭代顺序可能是随机的。

因此，如果上述for...in循环语法结构中的value变量是一个包含五个元素的数组，不能保证key一定是从0到4。某些索引可能会在其他索引之前出现。关于这种情况的具体解释将在本文后续部分说明。

for…in 循环数组示例

在以下示例中，我们遍历变量arr：

const arr = ["JavaScript", "PHP", "Python", "Java"];
for (let key in arr) {
  console.log(key + ": " + arr[key])
}
// Output:
// "0: JavaScript"
// "1: PHP"
// "2: Python"
// "3: Java"

在循环内部，我们输出了每个数组元素的索引和值。

在字符串中使用for…in循环

你可以使用JavaScript的for...in循环来遍历字符串。然而，这种做法并不推荐，因为这样遍历的是字符的索引，而非字符本身。

for...in 循环字符串示例

在以下示例中，我们遍历变量str：

const str = "Hello!";
for (let key in str) {
  console.log(key + ": " + str.charAt(key));
}
//Output
// "0: H"
// "1: e"
// "2: l"
// "3: l"
// "4: o"
// "5: !"

在循环过程中，我们输出了每个字符的键（或索引）以及该索引处的字符。

接下来，我们分析适合使用JavaScript for...in循环的具体场景。

使用JavaScript for…in循环迭代对象 由于for...in循环仅迭代对象的可枚举属性——即对象自身的属性，而不包括如toString等属于对象原型的属性，因此使用for...in循环来迭代对象是一个很好的选择。它提供了一种简单的方法来遍历对象属性，从而获取其值。

使用 for…in 循环进行调试

另一个适合使用JavaScript for...in循环的场景是调试。例如，你可能希望将对象的属性及其值打印到控制台或HTML元素中。在这种情况下，for...in循环是一个理想的选择。

当使用for...in循环调试对象及其值时，务必记住迭代是无序的，这意味着循环遍历项目的顺序可能是随机的。因此，访问到的属性顺序可能不符合预期。

使用for...in循环遍历对象

在JavaScript中使用for...in循环遍历对象时，被迭代的键或属性（在上述代码段中表示为key变量）是对象自身的属性。

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

可迭代对象的for循环示例

在以下示例中，我们遍历变量obj并记录每个属性和值：

请注意，迭代的键的顺序是按数字顺序开始的，然后按字母顺序进行排序。但是，此输出顺序与初始化对象时创建的索引顺序不同。

在数组中使用for...in循环

在JavaScript中使用for...in循环迭代数组时，此处的键将是元素的索引。但是，这些索引可能以任意顺序迭代。

因此，如果for...in循环语法结构中的value变量是包含五个项目的数组，则key不保证是0到4。某些索引可能在其他索引之前。稍后在本文中将解释此类情况。

在数组中使用for...in循环的示例 在以下示例中，我们遍历变量arr：

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

使用for...in循环遍历字符串

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

for...in 循环字符串示例 在以下示例中，我们遍历变量str：

在循环中，我们呈现每个字符的键或索引，以及该索引处的字符。

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

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

由于for...in循环仅迭代对象的可枚举属性，这些属性是对象自己的属性而不是像toString那样的属性，因此使用for...in循环迭代对象是很好的选择。for...in循环提供了一种简单的方式来遍历对象的属性，最终得到其值。

使用for...in循环调试

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

在使用for...in循环调试对象及其值时，您应始终记住，迭代不是有序的，这意味着循环迭代的项目顺序可能是随机

在那些for...in循环不是最佳选择的情况下，应该使用什么替代方案呢？让我们来看一看。

在数组中使用for循环

使用for循环永远不会出错！JavaScript的for循环是循环数组元素的最基本工具之一。for循环允许您在迭代数组时完全控制索引。

这意味着在使用for循环时，您可以向前或向后移动，更改数组中的项，添加项等，同时仍然维护数组的顺序。

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

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

JavaScript中的forEach方法适用于数组和对象。它是数组原型上的一个方法，允许我们在回调函数中迭代数组的元素和它们的索引。

回调函数是传递给另一个方法或函数的函数，作为该方法或函数执行的一部分而被执行。对于JavaScript中的forEach，这意味着回调函数将为每个迭代执行，将当前迭代项作为参数接收。

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

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]));

另外，如果您不需要访问属性，您也可以使用Object.values()来使用forEach直接循环遍历属性的值：

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

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

到此这篇关于详解如何在JavaScript中使用for循环的文章就介绍到这了,更多相关JavaScript使用for循环内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！