JavaScript:循环与遍历

文章目录

  • 循环
    • For
    • For-of (ES6)
    • For-in
    • While
    • Do-While
    • 注意以上for与while方法均支持break与continue
  • 数组遍历(不支持break与continue,return只是结束当前的回调函数执行)
    • Array.prototype.forEach()
    • Array.prototype.map()
    • Array.prototype.filter()
    • Array.prototype.reduce()
    • Array.prototype.find()
  • 对象遍历(配合forEach使用)
    • Object.keys(), values(), entries()

在JavaScript中,循环与遍历是编程过程中常见的操作,用于重复执行一段代码或访问集合中的每个元素。以下是JavaScript中常见的几种循环与遍历方法

循环

For

最通用的循环结构,可以用于任何需要重复执行代码的情况。
可以精确控制迭代次数和迭代变量(索引)。
适用于数组、字符串等线性数据结构的遍历。

let array = [1, 2, 3, 4, 5];for (let i = 0; i < array.length; i++) {console.log(array[i]);
}

For-of (ES6)

针对可迭代对象设计,如数组、Set、Map、生成器函数返回的迭代器等。
直接迭代值而非索引,简化了迭代过程。
不支持非可迭代对象或类数组对象的遍历。

let array = [1, 2, 3, 4, 5];for (let item of array) {console.log(item);
}

For-in

主要用于遍历对象的可枚举属性,包括原型链上的属性(通过hasOwnProperty可以过滤掉原型链上的属性)。
不适用于数组遍历,因为数组的索引也会被视为属性被遍历,且顺序可能与预期不符。

let obj = { a: 1, b: 2, c: 3 };for (let key in obj) {if (obj.hasOwnProperty(key)) {console.log(key + ': ' + obj[key]);}
}

While

区别:只要条件表达式为真,就会一直执行循环体。初始化和更新操作通常放在循环体内部。适合当循环次数未知,只知道需要持续执行直到满足某个条件为止的情况。

let counter = 0;
while (counter < 5) {console.log(counter);counter++;
}

Do-While

在 do-while 循环中,无论条件是否满足,循环体内的代码至少会被执行一次。

let counter = 0;
do {console.log(counter);counter++;
} while (counter < 5);

在这个例子中,即使一开始 counter 的值为 0(不满足条件),它仍然会先执行一次循环体,然后检查条件并决定是否继续下一次循环。与 while 循环相同,这里也会输出从 0 到 4 的数字。

注意以上for与while方法均支持break与continue

使用 break 语句可以立即退出整个循环,而 continue 语句则会跳过当前循环体剩余的代码,并进入下一次循环(如果条件满足)。

另外return,不仅结束循环还结束整个函数

数组遍历(不支持break与continue,return只是结束当前的回调函数执行)

Array.prototype.forEach()

数组方法,遍历数组中的每个元素并对其执行回调函数。
回调函数接收三个参数:当前元素值、元素索引和原数组本身。
无法使用break语句跳出循环,也无法在forEach内部直接return来结束整个循环。
在forEach回调函数内部的return只能用于提前结束当前的回调函数执行,而不是跳出整个forEach循环。
不会创建新的数组,而是直接操作原数组。

let array = [1, 2, 3, 4, 5];array.forEach((item, index) => {console.log(item);
});

Array.prototype.map()

对数组中的每个元素应用一个函数,并返回一个新的数组,包含应用函数后的结果。

let numbers = [1, 2, 3, 4, 5];let squaredNumbers = numbers.map(number => number * number);console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

Array.prototype.filter()

根据提供的测试函数过滤数组元素,并返回通过测试的元素组成的新数组

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];let evenNumbers = numbers.filter(number => number % 2 === 0);console.log(evenNumbers); // 输出: [2, 4, 6, 8]

Array.prototype.reduce()

从左到右对数组的每个元素应用一个累积函数(累计器),将其结果与下一个元素结合,最后返回单个输出值。

let numbers = [1, 2, 3, 4, 5];let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
//这里的0就是accumulator的初始值。
//如果没有提供初始值,则reduce()会使用数组的第一个元素作为初始值,并从数组的第二个元素开始迭代。
console.log(sum); // 输出: 15

Array.prototype.find()

查找数组中满足给定测试函数的第一个元素,如果找到则返回该元素,否则返回 undefined。

let users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];let user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }

对象遍历(配合forEach使用)

Object.keys(), values(), entries()

用于获取对象的键名、键值或键值对数组,之后可以配合forEach或其他迭代方法遍历。

let obj = { a: 1, b: 2, c: 3 };Object.keys(obj).forEach(key => {console.log(key + ': ' + obj[key]);
});Object.values(obj).forEach(value => {console.log(value);
});Object.entries(obj).forEach(([key, value]) => {console.log(key + ': ' + value);
});

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

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

相关文章

PAM | 账户安全 | 管理

PAM PAM&#xff08;Pluggable Authentication Modules&#xff0c;可插入式身份验证模块&#xff09;是一个灵活的身份验证系统&#xff0c;允许我们通过配置和组合各种模块来实现不同的身份验证策略。 在 Linux 或类 Unix 系统中&#xff0c;常见的 PAM 模块包括以下几种类…

NLP-词袋模型

词袋模型是自然语言处理中常用的一种文本表示方法&#xff0c;用于将文本转换为数值型向量&#xff0c;以便于计算机进行处理和分析。在词袋模型中&#xff0c;文本被看作是一个由词语组成的集合&#xff0c;而每个词语都是独立的&#xff0c;不考虑它们在文本中的顺序和语境关…

Fabric中的溯源方法

背景 在Fabric链码中&#xff0c;我们可以使用PutState方法对一个key的值进行覆盖&#xff0c;当我们再使用GetState查询时是最新的值。如果我们希望找到这个key的修改记录&#xff0c;我们可以使用溯源方法GetHistoryForKey。完整源码链接&#xff1a;https://github.com/hyp…

零基础搭建 Kubernetes 集群

零基础搭建 Kubernetes 集群 1、简介 在数字化时代&#xff0c;容器技术已经变成了软件开发和部署的标准&#xff0c;而在众多容器管理工具中&#xff0c;Kubernetes&#xff08;简称为 K8s&#xff09;凭借其高效的资源管理、弹性伸缩和自我修复的能力&#xff0c;成为了行业…

Vue3学习——响应式原理

vue2原理 对象类型&#xff1a;通过Object.defineProperty()对属性的读取、修改进行拦截&#xff08;数据劫持&#xff09;。数组类型&#xff1a;通过重写更新数组的一系列方法来实现拦截。&#xff08;对数组的变更方法进行了包裹&#xff09;。 问题&#xff1a; 新增属性…

文件 IO 2月18日学习笔记

标准IO和文件IO的区别&#xff1a; 1.标准IO是库函数,是对系统调用的封装 2.文件IO是系统调用,是Linux内核中的函数接口 3.标准IO是有缓存的 4.文件IO是没有缓存的 文件IO: 1.操作步骤&#xff1a; 打开 -> 读/写 -> 关闭 2.打开文…

多线程、分布式运行用例

python多线程 threading模块 多线程实例 # -*- coding: utf-8 -*- # Time : 2024/2/7 15:50 # Author : 居里夫人吃橘子 # File : class01.py # Software: PyCharm import threading from time import sleepdef run(name):print(name 该起床了)sleep(2)print(name …

Linux CentOS系统安装SQL Server并结合内网穿透实现公网访问本地数据

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

Ubuntu在终端编辑完配置文件怎么保存退出?

1.退出&#xff0c;按【Ctrlx】&#xff0c;回车键。 2.保存&#xff0c;则先按【Ctrlo】&#xff0c;回车键&#xff0c;再按【Ctrlx】退出

小白水平理解面试经典题目LeetCode 1025 Divisor Game【动态规划】

1025 除数游戏 小艾 和 小鲍 轮流玩游戏&#xff0c;小艾首先开始。 最初&#xff0c;黑板上有一个数字 n 。在每个玩家的回合中&#xff0c;该玩家做出的动作包括&#xff1a; 选择任意 x&#xff0c;使 0 < x < n 和 n % x 0 。将黑板上的数字 n 替换为 n - x 。 此…

Dom节点继承树基本操作

遍历节点树 基于元素节点树的遍历 parcntElcrmcnt -> 返回当前元素的父元秦节点 (IE不兼容)children ->只返回当前元素的元素子节点node.childFlement(ount nodechildren.length当前元素节点的子元素(IE不兼容)firstElementChild->返回的是第一个元素节点(IE不兼容)l…

IDEA-常用插件

1、Mybatis Log Free 当我们使用mybatis log在控制台输出sql 内容&#xff0c;输出内容将语句与参数分开打印&#xff0c;还需要手动将参数替换到指定位置。 使用对应插件后&#xff0c;自动将输出内容组装成完整的可直接执行的SQL 在插件市场 查看对应名称&#xff0c;并安装。…

【数据结构】图的存储与遍历

图的概念 图是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G (V&#xff0c; E) 图分为有向图和无向图 在有向图中&#xff0c;顶点对<x, y>是有序的&#xff0c;顶点对<x&#xff0c;y>称为顶点x到顶点y的一条边(弧)&#xff0c;<x, y>和&l…

基于微信小程序的校园跑腿系统的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

轻松入门MySQL:优化复杂查询,使用临时表简化数据库查询流程(13)

在进销存管理系统中&#xff0c;复杂的数据查询是司空见惯的。这些查询往往需要处理大量的数据&#xff0c;并执行复杂的逻辑操作。然而&#xff0c;处理这些查询可能会变得非常耗时&#xff0c;并且难以维护。为了解决这个问题&#xff0c;我们可以利用临时表&#xff0c;这是…

IDEA无法下载源代码(Maven无法下载源代码)

问题 这两天在突击SpringBoot&#xff0c;按ctrl打开一个SpringBoot的类想要下载源代码&#xff0c;居然下载不了&#xff0c;右下角弹窗提示无法下载源代码 百度查了查&#xff0c;在本地仓库里下载失败的目录下有个.lastUpdate的文件记录了一些信息 #NOTE: This is a Maven…

CNC加工:不只是魔法,还是科技与艺术的完美融合!

前言 亲爱的朋友们&#xff0c;你们好&#xff01;我是香蕉&#xff01;今天我将带你们一起走进CNC加工的世界&#xff0c;这是一个充满创意、精确无比、甚至有点神秘的领域。准备好跟我一起探索这个科技与艺术的交汇点了吗&#xff1f; 一、CNC加工&#xff1a;不只是名字酷…

算法沉淀——BFS 解决最短路问题(leetcode真题剖析)

算法沉淀——BFS 解决最短路问题&#xff08;leetcode真题剖析&#xff09; 01.迷宫中离入口最近的出口02.最小基因变化03.单词接龙04.为高尔夫比赛砍树 BFS&#xff08;广度优先搜索&#xff09;是解决最短路径问题的一种常见算法。在这种情况下&#xff0c;我们通常使用BFS来…

Chatgpt自媒体标题调教案例

第一步:给身份 下面我需要你扮演一名专业的小红书标题党专家,我会以“请学习”为开头传授你一些给小红书 取标题的技巧,如果你学会了,就跟我回复“学会了”。(给予学习的设定) 在我给你传授完技巧后,我会以“请根据以下内容帮我取个标题:”为开头,给你一份我要在小 红书…

特征提取匹配方案不止SuperPoint

局部特征匹配在计算机视觉领域广泛应用&#xff0c;涵盖图像检索、3D重建和目标识别等领域。然而&#xff0c;由于视点和光照变化等因素&#xff0c;改进匹配的准确性和鲁棒性仍然面临挑战。近年来&#xff0c;深度学习模型的引入引发了对局部特征匹配技术的广泛探索。这些方法…