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

目录

  • 数组的遍历方法有哪些?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://xiahunao.cn/news/2774448.html

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

相关文章

U3D记录之FBX纹理丢失问题

今天费老大劲从blender建了个模型&#xff0c;然后导出进去unity 发现贴图丢失 上网查了一下 首先blender导出要改设置 这个path mode要copy 然后unity加载纹理也要改设置 这里这个模型的纹理load要改成external那个模式 然后就有了&#xff0c;另外这个导出还有好多选项可…

Spring如何扫描自定义的注解?

目录 一、Spring框架介绍 二、什么是自定义注解 三、如何扫描自定义的注解 一、Spring框架介绍 Spring框架是一个开源的Java应用程序框架&#xff0c;它提供了一种全面的编程和配置模型&#xff0c;用于构建现代化的企业级应用程序。Spring框架的核心原则是依赖注入&#x…

使用Softing edgeConnector模块将云轻松连接到Siemens PLC

一 工业边缘的连接解决方案 云服务提供商 (CSP) 引入了服务和功能&#xff0c;以简化基于云的工业物联网解决方案的实施。Azure Industrial IoT Platform或AWS IoT SiteWise支持标准协议和接口&#xff0c;例如OPC UA或MQTT。但是&#xff0c;如果您希望在典型的旧改项目中连接…

HttpServletResponse接口用于表示状态代码的字段

1. HttpServletResponse接口用于表示状态代码的字段 您已学习了状态代码以及可用于从servlet向客户机发送状态代码的HttpServletResponse接口的字段。下表列出了HttpServletResponse接口表示状态代码的一些其他字段。 字段状态代码描述SC_HTTP_VERSION_NOT_SUPPORTED505服务器…

Midjourney提示词风格调试测评

在Midjourney中提示词及风格参数的变化无疑会对最终的作品产生影响&#xff0c;那影响具体有多大&#xff1f;今天我我们将通过一个示例进行探究。 示例提示词&#xff1a; 计算机代码海洋中的黄色折纸船&#xff08;图像下方&#xff09;风格参考:金色长发的女人&#xff0c…

222. 完全二叉树的节点个数 - 力扣(LeetCode)

题目描述 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干…

20240207-不要用摸鱼打发时间

20240207-不要用摸鱼打发时间 今天是农历年倒数第三天&#xff0c;很多人都已经回家过年了。我有其他出行计划&#xff0c;所以今年没有回家。其实这一点也有违背自己每年都要回家的原则&#xff0c;但相比往年&#xff0c;真的是更愿意出去不愿意回家了。 想家吗&#xff0c;…

FPGA_简单工程_无源蜂鸣器驱动实验

一 理论 蜂鸣器按其结构可分为电磁式蜂鸣器和压电式蜂鸣器2中类型&#xff0c;按其有无信号源&#xff0c;分为有源蜂鸣器和无源蜂鸣器。 有源蜂鸣器&#xff0c;内部装有集成电路&#xff0c;不需要音频驱动电路&#xff0c;就直接能发出声响&#xff0c;而无源蜂鸣器&#…

算法——前缀和算法

1. 什么是前缀和算法 前缀和算法&#xff08;Prefix Sum&#xff09;是一种用于快速计算数组元素之和的技术。它通过预先计算数组中每个位置前所有元素的累加和&#xff0c;将这些部分和存储在一个新的数组中&#xff0c;从而在需要计算某个区间的和时&#xff0c;可以通过简单…

C++ 内存管理(newdelete)

目录 本节目标 1. C/C内存分布 2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free 3. C内存管理方式 3.1 new/delete操作内置类型 3.2 new和delete操作自定义类型 4. operator new与operator delete函数 5. new和delete的实现原理 6. 定位new表达式(placem…

设置idea中放缩字体大小

由于idea没默认支持ctrl滚轴对字体调节大小&#xff0c;下面一起设置一下吧&#xff01; 点击 文件 -> 设置 按键映射 -> 编辑器操作 -> 搜索栏输入f 点击减小字体大小 -> 选择增加鼠标快捷键 按着ctrl键&#xff0c;鼠标向下滚动后&#xff0c;点击确定即可 然后…

微软.NET6开发的C#特性——类、结构体和联合体

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;下面我就重点讲讲微软.NET6开发人员需要知道的C#特性。 C#经历了多年发展&#xff0c; 进行了多次重大创新&#xf…

Hadoop搭建(完全分布式)

节点分布&#xff1a; bigdata-masterbigdata-slave1bigdata-salve2 NameNode NodeManager NodeManager SecondaryNameNodeDataNodeDataNodeResourceManagerNodeManagerDataNode 目录 一、jdk安装&#xff1a; 二、hadoop安装 一、jdk安装&#xff1a; jdk-8u212链接&am…

git 使用 (备查)

git忽略清单 添加忽略清单 SSH免登录 ssh协议可以实现免登录操作&#xff0c;身份验证通过密钥实现。 跨团队写作 解决冲突 拉取 克隆 拉取最新版本 推送 远程仓库别名 直接使用git push推送 多人协作开发 分支命令 合并分支命令在主分支使用&#xff0c;将develop分支合并到…

【力扣】快乐数,哈希集合 + 快慢指针 + 数学

快乐数原题地址 方法一&#xff1a;哈希集合 定义函数 getNext(n) &#xff0c;返回 n 的所有位的平方和。一直执行 ngetNext(n) &#xff0c;最终只有 2 种可能&#xff1a; n 停留在 1 。无限循环且不为 1 。 证明&#xff1a;情况 1 是存在的&#xff0c;如力扣的示例一…

【C++基础入门】七、指针(定义和使用、所占内存空间、空指针和野指针、const关键字修饰指针、指针和数组、指针和函数)

七、指针 7.1 指针的基本概念 指针的作用&#xff1a; 可以通过指针间接访问内存 内存编号是从0开始记录的&#xff0c;一般用十六进制数字表示可以利用指针变量保存地址 7.2 指针变量的定义和使用 指针变量定义语法&#xff1a; 数据类型 * 变量名&#xff1b; 示例&…

深入Pandas:精通文本数据处理的20+技巧与应用实例【第68篇—python:文本数据处理】

文章目录 Pandas文本数据处理方法详解1. str/object类型转换2. 大小写转换3. 文本对齐4. 获取长度5. 出现次数6. 编码方向7. 字符串切片8. 字符串替换9. 字符串拆分10. 字符串连接11. 字符串匹配12. 去除空格13. 多条件过滤14. 字符串排序15. 字符串格式化16. 多列文本操作17. …

PHPExcel导出excel

PHPExcel下载地址 https://gitee.com/mirrors/phpexcelhttps://github.com/PHPOffice/PHPExcel 下载后目录结构 需要的文件如下图所示 将上面的PHPExcel文件夹和PHPExcel.php复制到你需要的地方 这是一个简单的示例代码 <?php$dir dirname(__FILE__); //require_once …

「Mybatis实战五」:Mybatis核心文件详解 - MyBatis常用配置environments、properties

一、MyBatis核心配置文件层级关系 ​ 本文代码在 Mybatis初体验&#xff1a;一小时从入门到运行你的第一个应用 所构建的基础代码结构之上&#xff0c;进行修改。 MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置和属性信息。 配置文档的顶层结构如下&#xff1a; 二…

Github 2024-02-08 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-08统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Ruby项目1HTML项目1Python项目1Scala项目1PLpgSQL项目1Rust项目1NASL项目1C项目1TypeScript项目1非开发语言项目…