教程：JavaScript中的嵌套For循环

每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

介绍

我将首先简要给出一个 JavaScript 中的 for 循环示例。

const arr = [1, 2, 3, 4, 5, 6];for(let i = 0; i < arr.length; i++) {  console.log(arr[i]);}//Returns --->123456

• 在上面的示例中，我们首先声明一个名为 arr 的变量，并为其分配一个包含数字 1 到 6 的数组。

• 接下来，我们创建一个 for 循环，我们初始化一个名为 i 的变量，它充当循环的计数器。

• 接下来，我们使用一个条件来判断循环何时应该停止运行。在我们的例子中，当 i 小于 arr 数组的长度时，我们将继续运行循环。

• 最后，对于更新器，我们说每次循环运行时我们都应该增加 i。

• 在循环体内，我们使用控制台日志打印出 arr 数组的元素，该元素在循环运行时位于 i 的索引处。

这样做的结果是 arr 数组中的每个元素都被打印出来。

有时您可能会发现自己遇到了更复杂的数据结构，例如嵌套数组。让我们先来看看当我们将上面的循环与这种类型的数据结构一起使用时会发生什么。

const arr = [[1, 2], [3, 4], [5, 6]];for(let i = 0; i < arr.length; i++) {  console.log(arr[i]);}//Returns ---> [1, 2][3, 4][5, 6]

在上面的示例中，我们使用相同的 for 循环，但这次 arr 数组包含三个嵌套数组，每个嵌套数组包含两个值。当循环运行时，我们会返回每个嵌套数组。如果我们想访问嵌套数组的各个元素怎么办？这就是嵌套 for 循环变得有用的地方。

嵌套循环

通过使用嵌套循环，我们可以访问嵌套数组中的各个元素。让我们看一个示例，说明这将如何与上面的示例一起使用。

const arr = [[1, 2], [3, 4], [5, 6]];for(let i = 0; i < arr.length; i++) {  for(let j = 0; j < arr[i].length; j++) {    console.log(arr[i][j]);  }}//Returns --->123456

嵌套循环的结果是我们能够列出嵌套数组中的每个单独元素。现在让我们分解这里发生的事情。我们已经知道外循环访问每个嵌套数组。发生这种情况时，内部循环会遍历嵌套数组中的每个元素。所以控制台日志本质上说的是 i 的数组元素，它是包含 1 和 2 的数组，使用 j 遍历这些元素。让我们进一步分解一下。对于循环的第一次迭代，我们得到以下信息：

const arr = [[1, 2], [3, 4], [5, 6]];for(let i = 0; i < arr.length; i++) {  console.log(`I am the outer loop ${arr[i]}`)  for(let j = 0; j < arr[i].length; j++) {    console.log(`I am the inner loop ${arr[i][j]}`)  }}//Returns --->I am the outer loop 1,2I am the inner loop 1I am the inner loop 2

所以外循环返回第一个嵌套数组，其中包含元素 1 和 2。然后内循环依次循环遍历嵌套数组的每个元素。因此我们得到 1，然后我们得到 2。

此过程针对整个嵌套数组数组运行。因此，这些控制台日志的最终输出如下。

const arr = [[1, 2], [3, 4], [5, 6]];for(let i = 0; i < arr.length; i++) {  console.log(`I am the outer loop ${arr[i]}`)  for(let j = 0; j < arr[i].length; j++) {    console.log(`I am the inner loop ${arr[i][j]}`)  }}//Returns --->I am the outer loop 1,2I am the inner loop 1I am the inner loop 2I am the outer loop 3,4I am the inner loop 3I am the inner loop 4I am the outer loop 5,6I am the inner loop 5I am the inner loop 6

字符串数组

如果您有一组单词并且想要遍历每个单独的字母，则此方法同样有用。让我们看一个例子。

const names = ["Abby", "Bobby", "Freddy"];for(let i = 0; i < names.length; i++) {  console.log(names[i]);}//Returns --->AbbyBobbyFreddy

使用 for 循环，我们遍历 names 数组，我们可以访问 names 数组中的每个元素。这很好，但是如果您想访问名称的各个元素，那么嵌套循环是一种非常有用的模式。

const names = ["Abby", "Bobby", "Freddy"];for(let i = 0; i < names.length; i++) {  console.log(`I am the outer loop ${names[i]}`)  for(let j = 0; j < names[i].length; j++) {    console.log(`I am the inner loop ${names[i][j]}`)  }}//Returns --->I am the outer loop AbbyI am the inner loop AI am the inner loop bI am the inner loop bI am the inner loop yI am the outer loop BobbyI am the inner loop BI am the inner loop oI am the inner loop bI am the inner loop bI am the inner loop yI am the outer loop FreddyI am the inner loop rI am the inner loop eI am the inner loop dI am the inner loop dI am the inner loop y

我希望你喜欢这篇文章。请随时发表任何评论、问题或反馈，并关注我以获取更多内容！