前端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://www.mzph.cn/news/673737.shtml

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

相关文章

【Unity】QFramework通用背包系统优化:使用Odin优化编辑器

前言 在学习凉鞋老师的课程《QFramework系统设计&#xff1a;通用背包系统》第四章时&#xff0c;笔者使用了Odin插件&#xff0c;对Item和ItemDatabase的SO文件进行了一些优化&#xff0c;使物品页面更加紧凑、更易拓展。 核心逻辑和功能没有改动&#xff0c;整体代码量减少…

深度学习(15)--PyTorch构建卷积神经网络

目录 一.PyTorch构建卷积神经网络(CNN)详细流程 二.graphviz torchviz使PyTorch网络可视化 2.1.可视化经典网络vgg16 2.2.可视化自己定义的网络 一.PyTorch构建卷积神经网络(CNN)详细流程 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;是一种深度学…

PHP入门指南:进阶篇

PHP入门指南&#xff1a;进阶篇 PHP入门指南&#xff1a;进阶篇1. 面向对象编程&#xff08;OOP&#xff09;1.1 类和对象的基本概念1.2 构造函数和析构函数1.3 属性和方法的访问控制1.4 继承与多态 2. 错误和异常处理2.1 错误处理机制2.2 异常处理机制2.3 自定义异常类 3. PHP…

k8s弃用docker后使用ctr导入镜像

很多公司的k8s安装比较早,在生产环境一般很少升级,因此还是老版本,在使用新版本的时候,容易陷入老版本的思维中,从而掉坑,这里记录一下整个排查过程,希望对遇到类似的同学起到一定的帮助。 k8s 抛弃弃用docker 学习容器技术的过程中,我看到有不少同学留言问 Kubernet…

公司大数据展示模板【大屏可视化项目案例-23】

文章目录 一.公司大数据展示模板【大屏可视化项目案例-23】1.1 项目背景1.2 项目效果截图二.项目页面分析2.1 呈现效果页面分析2.2 页面加载时隐藏加载动画2.3 样式布局三.本案例完整源码下载一.公司大数据展示模板【大屏可视化项目案例-23】 1.1 项目背景 随着业务规模的不断…

Hadoop搭建(完全分布式)

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

信息隐藏研究新动向

信息隐藏有三十年的研究历史&#xff0c;在隐写、数字水印、可逆数据隐藏等方面&#xff0c;国内外发展了一系列新技术与新方法。随着深度学习时代的来临&#xff0c;信息隐藏研究出现了新的变化。一方面&#xff0c;深度学习技术在信息隐藏的发展中发挥了重要作用&#xff1b;…

94.网游逆向分析与插件开发-游戏窗口化助手-地图数据获取的逆向分析与C++代码还原

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;升级经验数据获取的逆向分析 码云地址&#xff08;游戏窗口化助手 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;c4351a5b346d8953a1a8e3ec…

SpringCloud-Eureka原理分析

Eureka是Netflix开源的一款用于实现服务注册与发现的工具。在微服务架构中&#xff0c;服务的动态注册和发现是必不可少的组成部分&#xff0c;而Eureka正是为了解决这一问题而诞生的。 一、为何需要Eureka 在微服务架构中&#xff0c;服务之间的协同合作和高效通信是至关重要…

CentOS下安装vlc

一、引言 vlc是一跨多媒体播放器&#xff0c;可以播放本地媒体文件和网络串流&#xff0c;帮助我们排查音视频开发过程中遇到的问题。大部分情况下&#xff0c;我们只需要在Windows系统下安装vlc就可以了。但有一种情况是需要在Linux下安装vlc的&#xff1a;我们的音视频拉流软…

华为配置内部人员接入WLAN网络示例(802.1X认证)

配置内部人员接入WLAN网络示例&#xff08;802.1X认证&#xff09; 组网图形 图1 配置802.1X认证组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 用户接入WLAN网络&#xff0c;使用802.1X客户端进行认证&#xff0c;输入正确的用户名和密…

Day10案例演示

Day10案例演示 在 AppInfoScanner所在的文件中运行cmd&#xff0c;输入 python -m pip install -r requirements.txt安装环境 具体用法可移步&#xff1a;https://github.com/kelvinBen/AppInfoScanner 以下仅以android类型示范 python app.py android -i <Your apk fil…

【Git版本控制 02】分支管理

目录 一、创建分支 二、切换分支 三、合并分支 四、删除分支 五、合并冲突 六、分支策略 七、bug分支 一、创建分支 # 当前仓库只有 master 一个主分支 # 可通过 git branch 是进行分支管理的命令&#xff0c;可通过不同参数对分支进行查看、创建、删除(base) [rootloc…

第一个 Angular 项目 - 静态页面

第一个 Angular 项目 - 静态页面 之前的笔记&#xff1a; [Angular 基础] - Angular 渲染过程 & 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 这是在学完了上面这三个内容后能够完成的项目&#xff0c;目前因为还没有学到数…

【服务器部署】Docker环境的安装

基于CentOS系统的服务器环境下安装Docker环境&#xff0c;安装步骤参考官方指南&#xff1a;https://docs.docker.com/engine/install/centos/ 配置库 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-c…

Asp .Net Core 系列:Asp .Net Core 集成 Panda.DynamicWebApi

文章目录 简介Asp .Net Core 集成 Panda.DynamicWebApi配置原理什么是POCO Controller&#xff1f;POCO控制器原理ControllerFeatureProvider实现自定义判断规则IApplicationModelConventionPanda.DynamicWebApi中的实现ConfigureApiExplorer()ConfigureSelector()ConfigurePar…

ChatGPT在肾脏病学领域的专业准确性评估

ChatGPT在肾脏病学领域的专业表现评估 随着人工智能技术的飞速发展&#xff0c;ChatGPT作为一个先进的机器学习模型&#xff0c;在多个领域显示出了其对话和信息处理能力的潜力。近期发表在《美国肾脏病学会临床杂志》&#xff08;影响因子&#xff1a;9.8&#xff09;上的一项…

Linux 设置自动挂载磁盘

目录 查看硬盘信息 临时挂载&#xff08;重启后失效&#xff09; 自动挂载 查看硬盘信息 1. 先使用以下命令查看硬盘信息 sudo fdisk -l 2.根据上面查到的硬盘信息&#xff0c;查需要挂载的硬盘的uuid sudo blkid &#xff08;查全部&#xff09; 或 sudo blkid 要挂载的分…

S7-1200PLC通讯问题总结

文章目录 一、硬件1.串口通信RS232RS485RS422 2.网口通信 二、协议1.串口通信协议2.网口通信协议 三、程序编写1.S7通信PUTGET 2.开放式以太网通信 一、硬件 可分为PLC与PLC通信&#xff0c;PLC与上位机通信&#xff0c;PLC与变频器通信&#xff0c;PLC与仪器仪表通信&#xf…

兼容ARM 32位架构的edgeConnector产品为用户提供新的部署选项

Softing工业将ARM 32位兼容性集成到了edgeConnector产品中&#xff0c;以满足用户对ARM处理器的边缘设备日益增长的使用需求。 &#xff08;兼容ARM 32位架构的edgeConnector产品扩展了其应用部署范围&#xff09; 用户对采用ARM处理器的紧凑型边缘设备的需求正在大幅增长&…