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,一经查实,立即删除!

相关文章

docker网络管理详解 一

一 生产故障:docker 同一宿主机不能通信 1. 检查容器网络配置 1.1 查看容器的网络信息 使用 docker inspect 命令查看容器的网络配置,确保它们连接到了正确的网络。 docker inspect -f {{json .NetworkSettings.Networks }} container1 docker inspe…

2024台州赛CTFwp

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

etcd集群修复异常节点

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

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

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

域1:安全与风险管理 第1章实现安全治理的原则和策略

---包括OSG 1、2、3、4 章--- 第1章、实现安全治理的原则和策略 1、由保密性、完整性和可用性组成的 CIA 三元组。 保密性原则是指客体不会被泄露给 未经授权的主体。完整性原则是指客体保持真实性且只被经过授权的主体进行有目的的修改。 可用性原则指被授权的主体能实时和…

【进阶OpenCV】 (15)-- 人脸识别 -- EigenFaces算法

文章目录 EigenFaces算法一、算法原理二、算法流程三、算法特点四、代码步骤1. 图像预处理2. 创建Eigenfaces人脸识别器3. 训练模型4. 预测图像 总结 EigenFaces算法 EigenFaces算法是一种基于主成分分析(PCA)的人脸识别方法,其核心思想是通…

Linux--firewalld服务

firewalld服务 firewalld 介绍 firewalld是CentOS 7.0新推出的管理netfilter的用户空间软件工具 firewalld是配置和监控防火墙规则的系统守护进程。可以实iptables,ip6tables,ebtables的功能 firewalld服务由firewalld包提供 firewalld支持划分区域zone,每个zone可以设置独立…

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 家…

二、Thread常见的方法

Thread 类是 JVM ⽤来管理线程的⼀个类,换句话说,每个线程都有⼀个唯⼀的 Thread 对象与之关 联。 2.1 Thread 的常⻅构造⽅法 方法说明Thread()创建线程Thread(Runnable target)使用 Runnable 实现多线程Thread(String name)创建线程 并命名Thread(Ru…

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

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

理解JVM里的栈信息

文章目录 栈内存的结构实际例子局部变量表&#xff08;Local Variable Array&#xff09;操作数栈&#xff08;Operand Stack&#xff09;动态链接&#xff08;Dynamic Linking&#xff09;方法返回地址&#xff08;Return Address&#xff09;其他信息 调用示意图问题 栈内存的…

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

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

【微服务】精细化微服务日志管理:构建高效的监控与故障排查体系

目录 引言一、微服务日志的概述1.1 定义1.2 重要性 二、微服务日志的类型2.1 日志类型详细说明 三、微服务架构的日志挑战四、微服务日志的实现4.1 日志记录4.2 日志格式 五、日志收集5.1 日志收集概述5.2 常用日志收集工具5.3 日志收集工具详细对比5.4 日志收集流程 六、日志存…

轮转数组解决方法

轮转数组 问题描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。也就是说&#xff0c;将数组的每个元素向右移动 k 个位置&#xff0c;超过数组长度的部分循环到数组的开头。 示例&#xff1a; 输入&#xff1a;nums …

新能源行业必会基础知识-----电力交易员职业标准-----持续更新

新能源行业知识体系-------主目录-----持续更新https://blog.csdn.net/grd_java/article/details/140004020 文章目录 1. 基本常识2. 达到基本入行标准&#xff08;四级/中级&#xff09;2.1 交易资质及信息管理2.2 中长期交易2.3 现货交易2.4 辅助服务管理2.5 售电管理2.6 电价…

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

leetcode中哈希的python解法:Counter()介绍

Counter 是 Python 的 collections 模块中的一个类&#xff0c;用于统计可迭代对象中元素的出现次数。Counter 是一种专门为计数设计的哈希表&#xff08;字典&#xff09;&#xff0c;它的键是元素&#xff0c;值是元素出现的次数。 Counter 的特点&#xff1a; 继承自 dict…