前端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…

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;目前因为还没有学到数…

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

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

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处理器的紧凑型边缘设备的需求正在大幅增长&…

使用 Docker 镜像预热提升容器启动效率详解

概要 在容器化部署中,Docker 镜像的加载速度直接影响到服务的启动时间和扩展效率。本文将深入探讨 Docker 镜像预热的概念、必要性以及实现方法。通过详细的操作示例和实践建议,读者将了解如何有效地实现镜像预热,以加快容器启动速度,提高服务的响应能力。 Docker 镜像预热…

使用influxdb+Grafana+nmon2influxdb+nmon实时监控vps性能

Grafana可以用来实时查看linux系统的各种性能数据。 1、安装环境&#xff1a; centos 7influxdb1.7.6grafana-4.6.3-1nmon2influxdb-2.1.7nmon-16m 2、安装influxdb&#xff1a; 下载rpm包&#xff1a; influxdb官网&#xff1a;https://docs.influxdata.com/influxdb/v2.0…

【Git版本控制 01】基本操作

目录 一、初始配置 二、添加文件 三、查看日志 四、修改文件 五、版本回退 六、撤销修改 七、删除文件 一、初始配置 Git版本控制器&#xff1a;记录每次的修改以及版本迭代的一个管理系统。 # 初始化本地仓库&#xff1a;git init(base) [rootlocalhost gitcode]# gi…

NLP_语言模型的雏形 N-Gram 模型

文章目录 N-Gram 模型1.将给定的文本分割成连续的N个词的组合(N-Gram)2.统计每个N-Gram在文本中出现的次数&#xff0c;也就是词频3.为了得到一个词在给定上下文中出现的概率&#xff0c;我们可以利用条件概率公式计算。具体来讲&#xff0c;就是计算给定前N-1个词时&#xff0…

笔记---dp---数字三角形模型

所谓数字三角形模型&#xff0c;即是从数字三角形这一题衍生出来的 题目为经典题目&#xff0c;不再赘述&#xff0c;此笔记根据AcWing算法提高课来进行对数字三角形模型衍生例题的记录 题目关系如下&#xff08;见AcWing里的AcSaber&#xff09;&#xff1a; AcWing.1015.摘…