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

news2025/2/23 11:10:05

文章目录

  • 前言
  • 一、for循环
    • 1.1 什么是For循环?
    • 1.2 For循环示例
      • 1. 打印偶数
      • 2. 倒序打印
    • 1.3 For循环遍历数组
  • 二、JavaScript中的循环嵌套
    • 1.1 while循环的嵌套
      • 示例1:乘法表
    • 示例2:打印星号三角形
    • 2.2 for循环的嵌套
      • 示例1:二维数组遍历
      • 示例2:打印九九乘法表
    • 2.3 For循环与While循环的嵌套
  • 总结


前言

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循环有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1161286.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pwd - 显示当前工作目录的路径

pwd命令来自英文词组“print working directory”的缩写&#xff0c;其功能是用于显示当前工作目录的路径&#xff0c;即显示所在位置的绝对路径。 在实际工作中&#xff0c;我们经常会在不同目录之间进行切换&#xff0c;为了防止“迷路”&#xff0c;可以使用pwd命令快速查看…

linux二进制文件分析三大工具详解(ldd、readelf、nm)

介绍 测试代码源码、源码如下&#xff1a; #include <openssl/evp.h> #include <openssl/sm2.h> #include <openssl/rand.h> #include <iostream> #include <string>EVP_PKEY* generate_sm2_key_pair() {EVP_PKEY_CTX *ctx;EVP_PKEY *pkey nu…

Openssl数据安全传输平台019:外联接口类的封装以及动态库的制作 - Bug未解决,感觉不是代码的问题

文章目录 1 外联接口1.1 接口类的封装1.2 共享内存与配置文件 2 json格式配置文件的定义2.1 共享内存中存储的节点结构2.2 服务器端配置文件2.3 客户端配置文件2.4 改进配置文件 3 共享内存类修改4 将接口打包成库(静态/动态)4.1 相关的指令4.1.1 静态库4.1.2 动态库 4.2 外联接…

CONTAINING_RECORD宏

CONTAINING_RECORD宏的使用 已知类或结构体成员变量的地址&#xff0c;可以取得类或结构体对象的地址。 代码 #include <windows.h> #include <iostream>class MyClass { public:MyClass(){}virtual ~MyClass(){}public:int m_Value1;int m_Value2;int m_Value3; …

「图像 merge」无中生有制造数据

在进行一个新项目的时候&#xff0c;往往缺少一些真实数据&#xff0c;导致没办法进行模型训练&#xff0c;这时候就需要算法工程师自行制作一些数据了&#xff0c;比如这篇文章分享的 bag 目标检测&#xff0c;在检测区域没有真实的 bag数据 此时&#xff0c;就可以采用图像拼…

CHS零壹视频恢复程序换机加载扫描结果的方法

有些特殊情况下我们需要把当前机器上扫描的结果在另外一台机器上加载&#xff0c;这样可以避免多次扫描浪费时间。目前CHS零壹视频恢复程序监控版、专业版、高级版已经支持换机加载&#xff0c;下面这个教程演示了如何换机加载。 STEP1&#xff1a;选择扫描对象点击扫描->根…

4.3 抽象类和接口

思维导图: 4.3 抽象类和接口的笔记 4.3.1 抽象类 定义&#xff1a;当一个类需要定义成员方法描述其行为特征&#xff0c;但这些方法的实现方式无法确定时&#xff0c;Java提供了抽象类来满足这种需求。 特点&#xff1a; 抽象方法是使用abstract关键字修饰的方法&#xff0c;无…

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…

【C++】无重复数字全排列(三种方法)和有重复数字全排列

文章目录 一、无重复数字排列1.1 题目描述1.2 用dfs方法1.2.1 思路分析1.2.2 代码编写 1.3 用交换法1.4 STL秒解1.4.1 所用函数1.4.2 代码编写 二、有重复数字排列2.1 思路分析2.2 代码编写 一、无重复数字排列 1.1 题目描述 把 1 ∼ n 1∼n 1∼n 这 n n n 个整数排成一行后…

Xray+awvs联动扫描

首先xray开启监听 xray_windows_amd64.exe webscan --listen 127.0.0.1:7777 --html-output xray-xxx.html --plugins sqldet,xxe,upload,brute-force,cmd-injection,struts,thinkphp 然后准备目标csv文件,每行一个url或ip然后加个逗号 接着awvs导入csv 对导进来的每个目…

【python海洋专题三十四】调用自己的colormore

点击蓝字&#xff0c;关注我们 ​ 【python海洋专题三十四】调用自己的colormore 有时候不想使用他们给好的&#xff0c;调用自己的colormore 使用素材 ncl的colormore。 格式文本格式&#xff01; 这样自己的colormore存入txt也可以使用了。 ​ 结果呈现 单个颜色调…

网络层协议【IP协议】

全文目录 基本概念IP协议IPv4 协议头格式&#xff1a;分片发送方进行分片&#xff1a;识别IP分片&#xff1a;组装IP分片&#xff1a; 网段划分DHCP技术IP分类 私有IP和共有IP1. 私有IP地址&#xff08;Private IP Address&#xff09;&#xff1a;2. 公网IP地址&#xff08;Pu…

接入文心一言实战(一):API申请与测试

大家好&#xff0c;我是豆小匠。 这期来介绍申请百度文心一言API的步骤。 第一步 注册百度智能云账号 网址&#xff1a;https://login.bce.baidu.com/new-reg?tplbceplat&fromportal 第二步&#xff1a;申请预置模型 网址&#xff1a;https://console.bce.baidu.com/qi…

VCS与XRUN对语法支持的不同点(持续更新...)

静态方法声明位置不同&#xff1a;VCS支持声明在class内/外&#xff08;extern&#xff09;两种方式&#xff0c;XRUN只支持static function声明于类内&#xff0c;不支持类外声明&#xff08;带extern关键字&#xff09;。 字符串转二进制、8进制、十进制、16进制方法&#xf…

【算法挑战】字符串解码(含解析、源码)

394.字符串解码 https://leetcode-cn.com/problems/decode-string/ 394.字符串解码 题目描述方法 1: 递归 思路复杂度分析代码 方法 2: 循环 栈 图解复杂度分析代码 题目描述 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。编码规则为: k[encoded_string]…

VSCode 设置平滑光标

1.点击左下角的设置按钮&#xff0c;再点击设置 2.点击文本编辑器&#xff0c;点击光标&#xff0c;勾选控制是否启用平滑插入动画。 3.随便打开一个文件&#xff0c;上下左右移动光标时&#xff0c;会发现非常的流畅。 原创作者&#xff1a;吴小糖 创作时间&#xff1a;2023…

【AUTOSAR】【以太网】EthSyn

AUTOSAR专栏——总目录_嵌入式知行合一的博客-CSDN博客文章浏览阅读215次。本文主要汇总该专栏文章,以方便各位读者阅读。https://xianfan.blog.csdn.net/article/details/132072415 目录 一、概述 二、功能描述 2.1 初始化

深入了解进口跨境商城源码的电商开发的关键

随着全球电子商务的快速发展&#xff0c;进口跨境商城源码的电商开发逐渐成为一种趋势。本文将深入探讨进口跨境商城源码的电商开发的关键&#xff0c;包括需求分析、技术实现、运营推广、风险控制等方面。 一、需求分析 在进口跨境商城源码的电商开发中&#xff0c;需求分析是…

【C/C++】 常量指针、指针常量、指向常量的常指针

const修饰指针的三种情况 int main() {int a 10;int b 10;//常量指针//const修饰的是int&#xff0c;指针指向可以改&#xff0c;指针指向的值不可以更改const int * p1 &a; p1 &b; //正确//*p1 100; 报错//指针常量//const修饰的是指针&#xff0c;指针的值&am…

Appium 移动端自动化测试 —— 触摸(TouchAction) 与多点触控(MultiAction)

一、触摸 TouchAction 在所有的 Appium 客户端库里&#xff0c;TouchAction 触摸对象被创建并被赋予一连串的事件。 规范里可用的事件有&#xff1a; * 短按(press) * 释放(release) * 移动到(moveTo) * 点击(tap) * 等待(wait) * 长按(longPress) * 取消(cancel) * 执行(per…