在JavaScript中使用for循环的方法详解

循环允许我们循环遍历数组或对象中的项，并执行打印、修改或执行其他类型的任务或操作等操作。有不同种类的循环，而 JavaScript 中的 for 循环允许我们迭代通过集合（如数组）进行遍历。

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

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

有两种访问集合中项的方法。第一种方法是通过集合中的键，这是数组中的索引或对象中的属性。第二种方法是通过项本身，而不需要键。

for…in 循环的定义

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

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

for…in 循环的语法

for 循环具有以下语法或结构：

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

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

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

在 JavaScript 中使用 for 循环与对象

当使用 for...in 循环在 JavaScript 中迭代对象时，迭代的键或属性（在上面的代码片段中由 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 循环在 JavaScript 中迭代数组时，此时的 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 循环提供了一种简单的方法来迭代一个对象的属性，最终访问其值。

使用 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循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！