【JavaScript保姆级教程】for循环与for循环遍历数组

前言

JavaScript是一门强大的编程语言，它允许开发者有效地控制程序的流程。在JavaScript中，有多种循环结构可供选择，其中for循环是最常用的之一。本教程将深入探讨for循环的基本概念，提供示例代码，并展示如何使用for循环来遍历数组。同时，我们还将介绍如何在for循环中嵌套使用while循环。无论你是初学者还是有经验的开发者，都会从这篇教程中受益匪浅。

一、for循环

1.1 什么是For循环？

For循环是一种常见的迭代结构，它允许我们重复执行一段代码多次。它通常由三个关键部分组成：初始化、条件和迭代。初始化部分在循环开始时执行一次，条件部分在每次循环迭代前进行检查，如果条件为真，则继续执行循环，否则结束循环，迭代部分在每次循环迭代之后执行。

下面是一个简单的for循环示例，它从1数到5：

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

上述代码中，初始化部分是let i = 1，条件部分是i <= 5，迭代部分是i++。这个循环会输出数字1到5。

1.2 For循环示例

1. 打印偶数

让我们看一个更有趣的示例，使用for循环打印1到10之间的偶数：

for (let i = 2; i <= 10; i += 2) {
  console.log(i);
}

上述代码中，我们初始化i为2，条件是i小于等于10，迭代部分是每次将i增加2。这个循环会输出2、4、6、8、10。

2. 倒序打印

现在，让我们使用for循环倒序打印数字10到1：

for (let i = 10; i >= 1; i--) {
  console.log(i);
}

上述代码中，我们初始化i为10，条件是i大于等于1，迭代部分是每次将i减少1。这个循环会输出10到1的数字。

1.3 For循环遍历数组

For循环不仅可以用于数字的迭代，还可以用于遍历数组中的元素。我们可以使用数组的长度属性（length）来确定循环的次数，然后使用索引来访问数组中的元素。

下面是一个示例，演示如何使用for循环遍历数组：

const fruits = ["apple", "banana", "cherry", "date"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

上述代码中，我们使用循环变量i来访问数组fruits的每个元素。这个循环会依次输出数组中的每个水果。

二、JavaScript中的循环嵌套

循环嵌套是指在一个循环内部包含另一个循环。这种技术通常用于需要在一个循环内执行多个循环的情况，以实现复杂的控制流程或者处理多维数据结构（如二维数组）。在JavaScript中，你可以使用while循环或for循环进行嵌套。

以下是while循环和for循环的嵌套示例，以及它们的介绍和两个示例代码。

1.1 while循环的嵌套

介绍：

while循环的嵌套是在一个while循环内部包含另一个while循环。内部循环的执行次数取决于外部循环的条件是否满足。这允许你实现更复杂的逻辑和控制流程。

示例1：乘法表

下面是一个while循环的嵌套示例，它输出一个简单的乘法表：

let i = 1;
while (i <= 5) {
  let j = 1;
  while (j <= 5) {
    console.log(`${i} * ${j} = ${i * j}`);
    j++;
  }
  i++;
  }

这个嵌套循环将输出1到5的乘法表，显示了所有可能的乘法结果。

示例2：打印星号三角形

这是另一个while循环的嵌套示例，它打印出一个星号组成的三角形：

let row = 1;
while (row <= 5) {
  let stars = '';
  let col = 1;
  while (col <= row) {
    stars += '* ';
    col++;
  }
  console.log(stars);
  row++;
}

这个嵌套循环将输出一个如下所示的星号三角形：

*
* *
* * *
* * * *
* * * * *

2.2 for循环的嵌套

介绍：

for循环的嵌套是在一个for循环内部包含另一个for循环。与while循环类似，内部循环的执行次数取决于外部循环的条件是否满足。这种嵌套可用于解决复杂的问题，例如多维数组的遍历。

示例1：二维数组遍历

下面是一个for循环的嵌套示例，它遍历一个二维数组并输出其元素：

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

这个嵌套循环将遍历并输出二维数组matrix中的所有元素。

示例2：打印九九乘法表

这是一个for循环的嵌套示例，它输出九九乘法表：

for (let i = 1; i <= 9; i++) {
  let row = '';
  for (let j = 1; j <= 9; j++) {
    row += `${i} * ${j} = ${i * j}\t`;
  }
  console.log(row);
}

这个嵌套循环将输出完整的九九乘法表，包括1到9的所有乘法结果。

循环嵌套是一种强大的编程技巧，允许你处理各种复杂的任务和数据结构。但要注意，深度嵌套的循环可能会导致性能问题，因此需要谨慎使用。

2.3 For循环与While循环的嵌套

有时候，我们需要在for循环内部使用while循环，或者在while循环内部使用for循环，以实现更复杂的逻辑。这种嵌套循环的结构允许我们更灵活地控制程序的流程。

下面是一个示例，展示了for循环和while循环的嵌套：

for (let i = 1; i <= 3; i++) {
  console.log(`Round ${i}`);
  let j = 1;
  while (j <= 2) {
    console.log(`  Iteration ${j}`);
    j++;
  }
}

上述代码中，外部的for循环执行3次，内部的while循环执行2次，实现了多层的循环结构。

总结

For循环是JavaScript中的一种强大的迭代工具，它允许我们重复执行一段代码多次，无论是数字的迭代还是数组的遍历，都可以方便地使用for循环来实现。此外，你还学会了如何在for循环中嵌套使用while循环，以实现更复杂的逻辑。

继续练习和实践，你将能够更熟练地运用for循环来解决各种编程问题。希望这篇保姆级教程对你学习JavaScript中的for循环有所帮助！