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

简介: 【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);
}


870f7376f3b244fc908d238ccc44b63c.png

上述代码中,初始化部分是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);
}


d79c202daaa14fd393cea1d16eeecd8b.png

上述代码中,我们初始化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);
}


865c6be60028415baf384c4885c47af7.png

上述代码中,我们初始化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]);
}


8ad73a53c29a45bb9e98b48ba6eec4ae.png

上述代码中,我们使用循环变量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++;
  }


d7bfa11aa7294efdbbcf37587bb3dfa5.png

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


示例2:打印星号三角形

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

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


b63a12d86f0c4cb790163dad1a891000.png

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

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



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


9e0b60419e2c404e9927bae9e4d8d7ec.png

这个嵌套循环将遍历并输出二维数组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);
}


ec2839dbeb31433aa4c2aa9acd6e7e88.png

这个嵌套循环将输出完整的九九乘法表,包括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++;
  }
}


9267d4ed986c45abb0518c7a37dee795.png

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


总结


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


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

相关文章
|
2月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
43 6
JS循环for、for...of、for...in
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
50 2
JavaScript基础知识-流程控制之while循环
|
3月前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
1月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
31 0
|
3月前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
144 0
|
13天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
25 2
|
1月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
32 4
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
54 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
2月前
|
JavaScript 前端开发 索引