js中map,filter,find,foreach的用法介绍

js中map,filter,find,foreach的用法介绍

在 JavaScript 中,数组提供了一些常用的迭代方法,如 mapfilterfindforEach,这些方法允许你对数组中的每个元素进行操作,下面是它们的用法和区别。

1. map()

map() 方法用于遍历数组中的每一个元素,并将每个元素经过操作后的结果返回为一个新的数组,不改变原数组

语法:
const newArray = array.map((element, index, array) => {// return 操作后的新值
});
示例:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);console.log(doubled); // 输出: [2, 4, 6, 8]
console.log(numbers); // 原数组: [1, 2, 3, 4]

2. filter()

filter() 方法用于过滤数组中的元素,并返回符合条件的元素组成的新数组不会改变原数组

语法:
const filteredArray = array.filter((element, index, array) => {// return 一个布尔值 (true 或 false)
});
示例:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); // 输出: [2, 4]
console.log(numbers);     // 原数组: [1, 2, 3, 4, 5]

3. find()

find() 方法用于查找数组中第一个符合条件的元素,并返回该元素。如果没有找到符合条件的元素,则返回 undefined不会改变原数组

语法:
const foundElement = array.find((element, index, array) => {// return 一个布尔值 (true 或 false)
});
示例:
const users = [{ id: 1, name: 'John' },{ id: 2, name: 'Jane' },{ id: 3, name: 'Jack' }
];const user = users.find(user => user.id === 2);console.log(user); // 输出: { id: 2, name: 'Jane' }

4. forEach()

forEach() 方法用于遍历数组中的每一个元素并执行给定的操作,不会返回任何值,也不会改变原数组。它的作用只是执行循环操作。

语法:
array.forEach((element, index, array) => {// 执行某些操作
});
示例:
const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2));// 输出: 
// 2
// 4
// 6
// 8

主要区别:

  • map():对每个元素执行操作并返回一个新数组。
  • filter():对每个元素进行条件判断,返回符合条件的元素组成的新数组。
  • find():查找并返回第一个符合条件的元素,返回单个元素。
  • forEach():遍历数组并对每个元素执行操作,但不返回值(常用于执行副作用操作,如打印输出)。

小结:

  • map()filter() 都返回新的数组。
  • find() 返回单个元素或 undefined
  • forEach() 不返回任何值,主要用于循环操作。

在这里插入图片描述

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

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

相关文章

2024台州赛CTFwp

备注: 解题过程中,关键步骤不可省略,不可含糊其辞、一笔带过。解题过程中如是自己编写的脚本,不可省略,不可截图(代码字体可以调小;而如果代码太长,则贴关键代码函数)。…

etcd集群修复异常节点

描述:仅一个 etcd 节点状态异常且无法自愈。 方案:删除异常节点,然后重新加入。 官方文档: How to Add and Remove Members | etcd Runtime reconfiguration | etcd

微信小程序添加删除线和下划线

微信小程序如何添加删除线和下划线? 小程序官方提供的html标签,跟传统的HTML有所差异,下面关于下划线和删除线的操作。 在对应的标签中添加css样式即可: text-decoration:underline; //下划线显示效果如下: text-de…

Gitxray:一款基于GitHub REST API的网络安全工具

关于Gitxray Gitxray是一款基于GitHub REST API的网络安全工具,支持利用公共 GitHub REST API 进行OSINT、信息安全取证和安全检测等任务。 Gitxray(Git X-Ray 的缩写)是一款多功能安全工具,专为 GitHub 存储库而设计。它可以用于…

【大数据技术基础 | 实验三】HDFS实验:部署HDFS

文章目录 一、实验目的二、实验要求三、实验原理(一)分布式文件系统(二)HDFS(三)HDFS基本命令(四)HDFS适用场景 四、实验环境五、实验内容和步骤(一)在master…

优阅达携手 Theobald 亮相新加坡科技周,助力企业 SAP 数据集成与应用

针对不同用户需求量身定制解决方案,帮助企业轻松应对从数据提取到分析、从开发到流程管理的 SAP 数据挑战。 上周,2024 新加坡科技周在滨海湾金沙会议展览中心圆满落幕。在为期两天的活动中,七大专题展览同时进行,超过 2,000 家…

【解决】webstrom uniapp rpx格式化空格 报错飘红

解决办法 1、安装 wechat mini program support 插件 2. 设置 wechat mini program 里小程序支持选为启用 3. 重新格式化显示正常&#xff0c;也不飘红了 注意要style开启scss支持lang"scss"&#xff0c;否则也会飘红报错 <style lang"scss"><…

『Mysql集群』Mysql高可用集群之读写分离(二)

前言 主从复制: 解决了Mysql的单点故障问题以及提高MySQL的整体服务性能. 读写分离: 解决的是数据库的读性能问题,分担主库的压力&#xff0c;提高系统的可用性和稳定性。 分库分表: 数据库分表可以解决单表海量数据的查询性能问题&#xff0c;分库可以解决单台数据库的并发…

mysql数据迁移到elasticsearch以及elasticsearch的使用

目录 根据数据不断调整架构安装elasticsearch 版本8.12.2kibana安装ik分词分词的拓展以及停用 springboot实战pom.xmlapplication.yml相关配置框架集成-SpringData-集成测试-文档操作 相关代码调整 随着物联网平台的不断发展&#xff0c;平台要求接入的模块会越来越多&#xff…

Qt 实现动态时钟

1.实现效果 2.widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace

hackmyvm-Hundred靶机

主机发现 sudo arp-scan -l 以sudo权限执行arp-scan -l 扫描并列出本地存在的机器&#xff0c;发现靶机ip为192.168.91.153 nmap扫描 端口发现 21/tcp open ftp 22/tcp open ssh 80/tcp open http web信息收集 我们先尝试一下ftp端口的匿名登录 FTP:是文件传输协议的端…

JAVA 中的克隆对象

克隆对象就是复制一个一模一样的对象&#xff0c;但是复制出来的对象和原对象不是同一个对象&#xff0c;是两个对象&#xff0c;只不过复制过来的对象和原对象除了内存地址之外&#xff0c;其它的属性一模一样。 在超类 Object 中有一个 clone() 方法&#xff1a; protected…

循序渐进丨MogDB 中 gs_dump 数据库导出工具源码概览

背景 gs_dump 是 MogDB 中一个功能丰富灵活的数据库导出工具&#xff0c;在数据库的维护、迁移和开发中经常使用。该工具允许用户根据需要导出整个数据库或者数据库中的特定对象&#xff0c;如模式&#xff08;schema&#xff09;、表&#xff08;tables&#xff09;、视图&am…

grafana version 11.1.0 设置Y轴刻度为1

grafana 版本 # /usr/share/grafana/bin/grafana --version grafana version 11.1.0设置轴 Axis 搜索 Standard options 在"Decimals"中输入0&#xff0c;确保只显示整数

Java基础12-特殊文件和日志技术

十二、特殊文件和日志技术 1、特殊文件 properties&#xff1a;用来存储键值对数据。 xml&#xff1a;用来存储有关系的数据。 1.1 properties文件 特点&#xff1a;存储键值对&#xff0c;键不能重复&#xff0c;文件后缀一般是.properties结尾的。 properties&#xff1a;是…

自定义注解和组件扫描在Spring Boot中动态注册Bean(一)

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 在Spring Boot中&#xff0c;自定义注解和组件扫描是两种强大的机制&#xff0c;它们允许开发者以声明性的方式动态注册Bean。这种方式不仅提高了代码的可读性和可维护性&#xff0c;还使得Spring Boot应用的…

UPDATE 更新数据

1.更新某一列字段的值 以 teacher 表为例&#xff0c;需要把前 3 条数据的 age 更新为 33&#xff0c;命令如下: UPDATE teacher SET age18,id_number44444444440604099X WHERE id 30;执行结果如下图 : 这里是对 age 字段列的前三条值进行数据的更新&#xff0c;注意更新…

网络安全有关法律法规

1. 前言 在当今数字化高速发展的时代&#xff0c;网络安全已成为关乎国家、企业和个人的重要议题。为了应对日益复杂的网络安全挑战&#xff0c;一系列网络安全法律法规应运而生&#xff0c;它们如同坚实的盾牌&#xff0c;守护着我们的数字世界。现在是2024年10月&#xff0c…

EM算法学习

1.EM算法的介绍 可以发现&#xff1a;计算出θA和θB的值的前提是知道A、B币种的抛掷情况。 所以我们需要使用EM算法&#xff1a;求出每轮选择硬币种类的概率 2.EM算法执行过程&#xff1a; 第一步&#xff1a;首先初始化设置一组PA和PB证明的值。然后通过最大似然估计得到每…

MOE论文详解(3)-Switch Transformers

Switch Transformers也是google在2022年发表的一篇论文, 该论文简化了MoE的路由算法, 减少了计算量和通信量; 第一次支持bfloat16精度进行训练. 基于T5-Base和T5-Large设计的模型在相同的算力下训练速度提升了7x倍; 同时发布了1.6万亿(1.6 trillion)参数的MoE模型&#xff0c;相…