前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?

news2024/11/17 6:31:21

目录

  • 数组的遍历方法有哪些?forEach和map方法有什么区别?
    • forEach()
    • map()
    • filter()
    • for…of
    • every() 和 some()
    • find() 和 findIndex()
    • reduce() 和 reduceRight()
    • forEach和map方法有什么区别
      • 总结


数组的遍历方法有哪些?forEach和map方法有什么区别?

在JavaScript中,遍历数组是一项基本操作,它允许访问数组中的每个元素并执行一些操作。

forEach()

forEach() 方法对数组的每个元素执行一次提供的函数,但它不返回任何值。这个方法适合当你需要对数组的每个元素执行操作,但不需要创建一个新数组时使用。

const array = [1, 2, 3]
array.forEach(item => console.log(item * 2))

请添加图片描述

注意:forEach() 不会改变原数组,但回调函数中的操作可能会改变原数组。

map()

map() 方法创建一个新数组,其结果是原数组中的每个元素调用一次提供的函数后的返回值。

const array = [1, 2, 3];
const doubled = array.map(item => item * 2);
console.log(doubled); // [2, 4, 6]

请添加图片描述

注意:map() 不改变原数组,适用于需要根据原数组创建一个新数组的情况。

filter()

filter() 方法创建一个新数组,包含通过所提供函数实现的测试的所有元素。

const array = [1, 2, 3, 4]
const evens = array.filter(item => item % 2 === 0)
console.log(evens) // [2, 4]

请添加图片描述

注意:filter() 不改变原数组,适用于需要从原数组中筛选出符合条件的元素的情况。

for…of

for…of 语句在可迭代对象(如数组、字符串等)上创建一个迭代循环,遍历其属性值。

const array = [1, 2, 3]
for (const item of array) {
  console.log(item)
}

请添加图片描述

注意:for…of 不能直接遍历普通对象,因为它们不是可迭代的。

every() 和 some()

every()some() 方法都返回一个布尔值,every() 检测数组中的所有元素是否都满足条件,some() 检测数组中是否至少有一个元素满足条件。

const array = [1, 2, 3]
console.log(array.every(item => item > 0)) // true
console.log(array.some(item => item < 0)) // false

请添加图片描述

注意:这两个方法都不改变原数组,适用于需要根据数组中的元素是否满足某些条件来进行布尔判断的情况。

find() 和 findIndex()

find() 方法返回数组中满足提供的测试函数的第一个元素的值,否则返回undefinedfindIndex() 返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。

const array = [1, 2, 3, 4]
console.log(array.find(item => item > 2)) // 3
console.log(array.findIndex(item => item > 2)) // 2

请添加图片描述

注意:这两个方法都不改变原数组,适用于需要找到数组中满足条件的第一个元素或其索引的情况。

reduce() 和 reduceRight()

reduce()reduceRight() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

const array = [1, 2, 3, 4]
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
console.log(sum) // 10

请添加图片描述

注意:reduceRight()reduce() 相同,但从数组的末尾向前工作。

forEach和map方法有什么区别

forEach方法和map方法都是用于遍历数组的方法

  • forEach方法用于遍历数组的每个元素,并对每个元素执行提供的回调函数,但它不会返回新的数组。
  • map方法也用于遍历数组的每个元素,但它会对每个元素执行提供的回调函数,并返回一个新的数组,新数组的元素是回调函数的返回值。

总结

JavaScript提供了多种方法来遍历数组,每种方法都有其特定的特点、用途和使用场景。forEach()适用于简单遍历,map()filter()在创建新数组时非常有用,而reduce()适用于将数组元素累加到单一值。选择合适的方法可以使代码更简洁、更高效。

持续学习总结记录中,回顾一下上面的内容:
数组的遍历方法包括:for循环、forEach方法、for…of循环、map方法、filter方法、reduce方法等。这些方法可以用来逐个访问数组中的元素,并对它们进行操作或处理。
forEachmap方法的区别:

  • forEach方法用于遍历数组的每个元素,并对每个元素执行提供的回调函数,但它不会返回新的数组。
  • map方法也用于遍历数组的每个元素,但它会对每个元素执行提供的回调函数,并返回一个新的数组,新数组的元素是回调函数的返回值。

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

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

相关文章

辅助Qi2磁吸快充,新标准,新体验 - CPS8200

前言 11月17日&#xff0c;随著Qi2认证Soft Launch 的结束&#xff0c;搭载易冲CPS8200的两款产品在韩国TTA实验室通过了Qi2 认证&#xff0c;预计WPC会在下周&#xff08; ~11月30号&#xff09;为这两款产品正式核发认证证书。 而CPS8200也成为目前唯一拥有两款产品通过认证的…

AI大模型开发架构设计(9)——AI 编程架构刨析和业务应用实战案例

文章目录 AI 编程架构刨析和业务应用实战案例1 AI编程代码生成模型剖析编程方式的发展代码自动生成基于大模型的AI编程工具——Github Copilot以 CodeGeeX 为例-发展过程以 CodeGeeX 为例-训练过程以 CodeGeeX 为例-大规模代码数据处理以 CodeGeeX 为例-模型结构以 CodeGeeX 为…

【Linux C | I/O模型】IO复用 | poll、ppoll函数详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

社区商铺投资指南:鲜奶吧——最具潜力的开店项目

作为一位开店5年的鲜奶吧创业者&#xff0c;我深知在社区商铺中寻找一个具有潜力的项目并非易事。 今天为大家分享鲜奶吧项目的好处&#xff0c;帮助你在社区商铺投资中做出明智的选择。 一、鲜奶吧的市场潜力与前景 随着健康饮食观念的普及&#xff0c;鲜奶及酸奶制品越来越…

【AIGC风格prompt深度指南】掌握绘画风格关键词,实现艺术模仿的革新实践

[小提琴家]ASCII风格&#xff0c;点&#xff0c;爆炸&#xff0c;光&#xff0c;射线&#xff0c;计算机代码 由冰和水制成的和平标志]非常详细&#xff0c;寒冷&#xff0c;冰冻&#xff0c;大气&#xff0c;照片逼真&#xff0c;流动&#xff0c;16K 胡迪尼模拟火和水&#x…

【复现】万户 ezOFFICE SQL注入漏洞_42

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 万户ezOFFICE协同管理平台分为企业版和政务版。 解决方案由五大应用、两个支撑平台组成&#xff0c;分别为知识管理、工作流程、沟…

【Vue】mvc,mvp,mvvm 的区别

总结&#xff1a; MVC : view 视图层依靠 model 来进行更新渲染&#xff0c;当数据发生改变时。第一步: 通知 controller 进行更新&#xff0c;然后第二步 controller 再通知 model 进行更新。最后 model 才将 view 更新 , 这样大量的逻辑以及更新操作&#xff0c;都需要在con…

设计师常用的软件有哪些?推荐5款设计工具

设计软件的使用对设计师来说非常重要。设计工具的使用是否直接影响到最终结果的质量&#xff0c;然后有人会问&#xff1a;设计需要使用什么软件&#xff1f;这里有一些设计师和那些对设计感兴趣的朋友列出了五个有用的设计工具。 1、即时设计 即时设计操作简单&#xff0c;内…

机器学习 | 一文看懂SVM算法从原理到实现全解析

目录 初识SVM算法 SVM算法原理 SVM损失函数 SVM的核方法 数字识别器(实操) 初识SVM算法 支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种经典的监督学习算法&#xff0c;用于解决二分类和多分类问题。其核心思想是通过在特征空间中找到一…

Pymysql之Cursor常用API

Cursor常用API 1、cursor.execute(query, argsNone)&#xff1a;执行sql语句。 参数: query (str)&#xff1a;sql语句。 args (tuple, list or dict)&#xff1a;sql语句中如果有变量&#xff0c;或者格式化输出&#xff0c;会在这里填充数据。 Returns&#xff1a;返…

编程实例分享,手表养护维修软件钟表维修开单管理系统教程

编程实例分享&#xff0c;手表养护维修软件钟表维修开单管理系统教程 一、前言 以下教程以 佳易王钟表维护维修管理系统软件V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 左侧为导航栏&#xff0c; 1、系统设置&#xff1a;可以设置打…

代码随想录算法训练营DAY15 | 二叉树 (2)

一、LeetCode 102 二叉树的层序遍历 题目链接&#xff1a; 102.二叉树的层序遍历https://leetcode.cn/problems/binary-tree-level-order-traversal/ 思路&#xff1a;利用队列的先进先出特性&#xff0c;在处理本层节点的同时将下层节点入队&#xff0c;每次处理一层的节点&…

C#中的浅度和深度复制(C#如何复制一个对象)

文章目录 浅度和深度复制浅度复制深度复制如何选择 浅度和深度复制 在C#中&#xff0c;浅度复制&#xff08;Shallow Copy&#xff09;和深度复制&#xff08;Deep Copy&#xff09;是两种不同的对象复制方式&#xff0c;满足不同的应用场景需求&#xff0c;它们主要区别在于处…

【JavaWeb】头条新闻纯JavaWeb项目实现 项目搭建 数据库工具类导入 跨域问题 Postman 第一期 (前端Vue3+Vite)

文章目录 一、项目简介1.1 微头条业务简介1.2 技术栈介绍 二、项目部署三、准备工具类3.1 异步响应规范格式类3.2 MD5加密工具类3.3 JDBCUtil连接池工具类3.4 JwtHelper工具类3.4 JSON转换的WEBUtil工具类 四、准备各层的接口和实现类4.1 准备实体类和VO对象4.2 DAO层接口和实现…

Guitar Pro正版多少钱 Guitar Pro购买后永久使用吗

相信很多玩吉他的小伙伴都听说过Guitar Pro这款软件&#xff0c;Guitar Pro是一款传奇的吉他谱软件&#xff0c;可以用来打谱&#xff0c;看谱&#xff0c;midi音序制作等等&#xff0c;同时做为一款吉他学习辅助软件有着强大的优势&#xff0c;那大家知道Guitar Pro正版多少钱…

渗透测试-信息打点与架构分析细节梳理

渗透测试-信息打点与架构分析细节梳理 为了保障信息安全&#xff0c;我在正文中会去除除靶场环境的其他任何可能的敏感信息 什么是网站架构 网站架构包括网站的方方面面&#xff0c;下面是常见的内容&#xff1a; 前端&#xff08;Front-End&#xff09;&#xff1a; 使用Reac…

算法学习——LeetCode力扣哈希表篇1

算法学习——LeetCode力扣哈希表篇1 242. 有效的字母异位词 242. 有效的字母异位词 - 力扣&#xff08;LeetCode&#xff09; 描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同…

请查收,你的2023京东零售技术年度好文

新春佳节&#xff0c;万象更新&#xff01;京东零售技术在2023年度发布文章内容145篇&#xff0c;全年阅读量超过20万次&#xff5e;衷心感谢每一位读者一直以来的关注和支持。 在新春到来之际&#xff0c;我们精选年度好文分享给大家&#xff0c;希望大家温故知新&#xff0c…

基于 NXP S32K344 的汽车通用评估板方案

S32K3xx 系列是 NXP 基于 ARMCortex-M7 的汽车工业级 MCU&#xff0c;符合 ISO26262 ASIL-D 汽车功能安全等级&#xff0c;支持 ASIL B/D 安全应用&#xff0c;提供了一个可扩展的平台&#xff0c;具有下一代安全性、可扩展性、连接性和低功耗特性。适用于可能会在严酷环境下工…

政安晨:机器学习快速入门(四){pandas与scikit-learn} {随机森林}

咱们将在这篇文章中使用更复杂的机器学习算法。 随机森林 基本定义 随机森林(Random Forest)是一种机器学习算法&#xff0c;属于集成学习(ensemble learning)的一种。它是通过构建多个决策树&#xff08;即森林&#xff09;来进行预测和分类的。 随机森林的主要特点是采用了…