从0开始学习JavaScript--JavaScript 循环与迭代详解

news2024/11/28 18:52:07

JavaScript中的循环和迭代是编写高效和灵活代码的关键。循环用于重复执行一段代码,而迭代则用于遍历数据结构。本文将深入研究JavaScript中常见的循环结构和迭代方法,并通过丰富的示例代码来帮助读者更好地理解和运用这些概念。

基本的for循环

for循环是JavaScript中最常见的循环结构之一,它允许按照指定的次数重复执行一段代码。

// 示例:基本的for循环
for (let i = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);
}

在这个例子中,for循环将会执行5次,每次输出当前迭代的索引。

for…in循环

for...in循环用于遍历对象的可枚举属性,它将迭代对象的键值。

// 示例:for...in循环
const person = { name: 'John', age: 30, job: 'developer' };

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

这个例子中,for...in循环将输出person对象的每个属性及其对应的值。

for…of循环

for...of循环是ES6引入的新循环,它用于遍历可迭代对象(如数组、字符串等),将迭代的值直接赋给变量。

// 示例:for...of循环
const colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}

在这个例子中,for...of循环遍历了数组colors中的每个元素。

while循环

while循环允许在条件为真的情况下重复执行一段代码,直到条件变为假。

// 示例:while循环
let count = 0;

while (count < 3) {
  console.log(`Count: ${count}`);
  count++;
}

这个例子中,while循环将会执行3次,输出当前计数值。

do…while循环

do...while循环与while循环类似,但它保证至少执行一次循环体,然后再根据条件决定是否继续执行。

// 示例:do...while循环
let num = 0;

do {
  console.log(`Number: ${num}`);
  num++;
} while (num < 3);

在这个例子中,do...while循环会执行至少一次,即使条件不满足。

forEach方法

数组的forEach方法是一种更现代和函数式的迭代方式,它接受一个回调函数,对数组的每个元素执行该函数。

// 示例:forEach方法
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num, index) => {
  console.log(`Element at index ${index}: ${num}`);
});

这个例子中,forEach方法遍历数组numbers的每个元素,并输出其索引和值。

map方法

map方法是数组的另一种迭代方法,它创建一个新数组,其中包含对原数组的每个元素调用回调函数的结果。

// 示例:map方法
const squaredNumbers = numbers.map(num => num ** 2);

console.log(squaredNumbers); // 输出:[1, 4, 9, 16, 25]

在这个例子中,map方法创建了一个新数组,其中包含了原数组numbers中每个元素的平方值。

迭代器和生成器

迭代器和生成器是更高级的迭代概念。迭代器是一种对象,它具有next方法,通过该方法可以逐个访问序列中的值。生成器是一种特殊的函数,它可以通过yield语句在每次调用时产生值。

// 示例:迭代器和生成器
function* countUpTo(limit) {
  let count = 1;
  while (count <= limit) {
    yield count;
    count++;
  }
}

const iterator = countUpTo(5);

for (let value of iterator) {
  console.log(value);
}

在这个例子中,countUpTo是一个生成器函数,通过yield语句逐个产生数字。通过for...of循环,可以遍历生成器产生的值。

使用递归进行迭代

递归是一种函数调用自身的技术,它常常用于解决可以分解为相似子问题的问题。通过递归,可以实现更灵活的迭代方式。

// 示例:使用递归进行迭代
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // 输出:120

在这个例子中,factorial函数通过递归计算了阶乘。

总结

JavaScript中的循环与迭代是编写高效、灵活代码的重要组成部分。通过for循环、for...in循环、for...of循环等基础结构,能够有效地处理重复任务,实现对数组、对象等数据结构的遍历。同时,ES6引入的迭代器、生成器等新特性以及数组的forEachmap等高阶方法,提供了更现代、函数式的迭代方式,使得代码更简洁、可读。递归作为一种灵活的迭代方式,能够处理具有相似子问题的复杂情况,展现出更强大的适应性。

深入理解这些循环和迭代的概念,有助于开发者选择最适合任务需求的方法,提高代码的可维护性和可扩展性。无论是处理数组元素、对象属性,还是解决数学问题,不同的迭代方式都能够帮助我们更优雅地解决问题。总体而言,JavaScript的循环和迭代机制为开发者提供了多种工具,让编写高效、清晰的代码变得更为轻松。在实际项目中,熟练掌握这些技术,将为开发过程中的各种场景提供强大的支持。

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

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

相关文章

RT-Thread STM32F407 定时器

定时器简介 硬件定时器一般有 2 种工作模式&#xff0c;定时器模式和计数器模式。不管是工作在哪一种模式&#xff0c;实质都是通过内部计数器模块对脉冲信号进行计数。下面是定时器的一些重要概念。 计数器模式&#xff1a;对外部输入引脚的外部脉冲信号计数。 定时器模式&…

21 - 深入JVM即时编译器JIT,优化Java编译

说到编译&#xff0c;我猜你一定会想到 .java 文件被编译成 .class 文件的过程&#xff0c;这个编译我们一般称为前端编译。Java 的编译和运行过程非常复杂&#xff0c;除了前端编译&#xff0c;还有运行时编译。由于机器无法直接运行 Java 生成的字节码&#xff0c;所以在运行…

java springboot在当前测试类中添加临时属性 不影响application和其他范围

目前 我们的属性基本都写在 application.yml 里面了 但是 如果 我们只是想做一下临时变量的测试 有没有办法实现呢&#xff1f; 显然是有的 这里 我们还是先在application.yml中去写一个 test属性 下面加个prop 然后 我们尝试在测试类中 获取一下这个属性 直接用 Value 读取…

第七篇 基于JSP 技术的网上购书系统——新品上架、推荐产品、在线留言、搜索功能实现(网上商城、仿淘宝、当当、亚马逊)

目录 1.新品上架 1.1功能说明 1.2界面设计 1.3处理流程 1.4数据来源和算法 1.4.1数据来源 1.4.2查询条件 1.4.3表间关系 1.4.4相关sql实例 2.推荐产品 2.1功能说明 2.2界面设计 2.3处理流程 2.4数据来源和算法 2.4.1数据来源 2.4.2查询条件 2.4.3表间关…

【Spring】Spring中的DI(依赖注入)Dependence Import

由之前的IoC可以知道&#xff0c;我们写在具体对象后面的new方法肯定不能要了&#xff0c;这时候就要通过依赖注入的形式将Dao配置到Service中 Dependence Import的步骤如下&#xff1a; 1. 在Service类中给Dao提供setter方法 原本我们是直接给bookDao new了一个对象 public …

【Linux】vscode远程连接ubuntu失败

VSCode远程连接ubuntu服务器 这部分网上有很多&#xff0c;都烂大街了&#xff0c;自己搜吧。给个参考连接&#xff1a;VSCode远程连接ubuntu服务器 注意&#xff0c;这里我提前设置了免密登录。至于怎么设置远程免密登录&#xff0c;可以看其它帖子&#xff0c;比如这个。 …

vscode的git 工具使用

vscode的git 工具使用 目录概述需求&#xff1a; 设计思路实现思路分析1.git 工具的使用2.提交代码3.查看历史提交代码 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a be…

【OJ比赛日历】快周末了,不来一场比赛吗? #11.18-11.24 #15场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-11-18&#xff08;周六&#xff09; #5场比赛2023-11-19…

UE基础篇五:动画

导语: 视频文档在文末 一、动画 1.1 物理资产可以用来做布娃娃系统 1.2 混合空间 调整这个值会在动画切换时有一个插值时间,表现为等一下再切 1.3 启用根运动 1.4 一些导入设置只有在导入时才有效, 1.5 动画图标可以预览调节数值<

【微软技术栈】C#.NET 内存映射文件

本文内容 进程、视图和管理内存使用内存映射文件编程示例 内存映射文件包含虚拟内存中文件的内容。 借助文件和内存空间之间的这种映射&#xff0c;应用&#xff08;包括多个进程&#xff09;可以直接对内存执行读取和写入操作&#xff0c;从而修改文件。 可以使用托管代码访…

在Spring Boot中使用Redis的发布订阅功能

Redis的发布订阅模式是一种消息传递模式&#xff0c;它允许多个订阅者订阅一个或多个频道&#xff0c;同时一个发布者可以将消息发布到指定的频道。这种模式在分布式系统中非常有用&#xff0c;可以解决以下问题&#xff1a; 实时消息传递&#xff1a;发布订阅模式可以用于实时…

【洛谷算法题】P5712-Apples【入门2分支结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5712-Apples【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格式&…

linux运行java程序

这个帖子实现的是linux上运行java代码 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 事情发生的原因是博洋需要知道海外城市的数量&#xff0c;我一开始准备将全量数据拉取到本地&#xff0c;用代码遍历一遍。但是打包好全量数据&…

数据结构 链表

单链表&#xff1a;单链表用来写邻接表&#xff0c;邻接表用来存储图和树 双链表&#xff1a;用来优化某些问题 单链表 链式存储 #include<stdio.h> #include<stdlib.h> int cont 0; //结构体 typedef struct List { int data; //数据域 struct List* next; //…

实战:给docusaurus文档网站配置Algolia 实现全站内容搜索功能-2023.11.16(已解决)

更新于&#xff1a;2023年11月16日 次文档已全部脱敏&#xff01; 实战&#xff1a;给docusaurus文档网站配置Algolia 实现全站内容搜索功能-2023.11.16(已解决) 目录 前提条件 &#x1f340; 前提条件 具备docker环境 具有自己的网站 &#x1f340; 实验软件&#xff08…

【BIM入门实战】Revit属性对话框中“视图范围”工具的使用方法详解

每个平面图都具有视图范围属性&#xff0c;也称为可见范围。视图范围是一组水平平面&#xff0c;可以控制视图中对象的可见性和外观。水平面为顶部平面、剖切面和底部平面。顶部切割平面和底部切割平面表示视图范围的顶部和底部。剖切面是确定视图中某些图元可视剖切面高度的平…

Android JNI静态和动态注入方法

作者&#xff1a;MiniCode Android调用C/C的代码目前比较流行的方式之一便是通过JNI&#xff0c;其中按本地方法的实现有两种方式&#xff1a;静态和动态 创建一个C项目或者C的Module&#xff1a; 创建成功之后会生成如下文件&#xff08;CMakeLists.txt、nativelib.cpp&#…

C#,数值计算——插值和外推,Base_interp的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Abstract base class used by all interpolation routines in this chapter. /// Only the routine interp is called directly by the user. /// </summary> pu…

SoftwareTest8 - 怎样测试一个系统的性能 ?

Hello , 大家好 , 又给大家带来新的专栏喽 ~ 这个专栏是专门为零基础小白从 0 到 1 了解软件测试基础理论设计的 , 虽然还不足以让你成为软件测试行业的佼佼者 , 但是可以让你了解一下软件测试行业的相关知识 , 具有一定的竞争实力 . 这篇文章是带着大家先了解一些性能测试的概…

回调方法Callbak方法的理解——Java中回调的实现方式 从系统调用角度理解回调

目录 回调方法实现用反射实现直接调用callback进化&#xff1a;接口实现分离 匿名内部类 到 函数式编程 从系统调用角度理解回调同步调用异步调用不需要对方结果需要对方的结果 菜鸡问大佬问题案例同步回调异步回调基于Future的半同步 回调方法就是一个参数,将一个A方法作为参数…