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() 不返回任何值,主要用于循环操作。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音解压视频素材宝库

在快节奏的生活中,解压视频成为抖音上的热门内容类型,想要制作出精彩的解压视频,优质素材必不可少。今天,为大家推荐几个超棒的抖音解压视频素材网站,让你的创作之路轻松无忧! 蛙学网 作为国内知名的短视频…

【Canvas与化学】铁元素图标

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>铁元素图标Draft1</title><style type"text/css"…

域渗透AD 示例场景漏洞 Kerberos Bronze Bit 【CVE-2020-17049】漏洞

背景 漏洞原理 漏洞复现 约束性委派攻击绕过 基于资源的约束性委派攻击绕过 漏洞预防和修复 背景 Kerberos Bronze Bit (CVE-2020-17049) 漏洞是国外安全公司 Netspi 安全研究员Jake Karnes 发现的一个Kerberos安全功能绕过漏洞。该漏洞存在的原因在于KDC在确定Kerberos服…

YoloV10改进:Block改进|使用ContextAggregation模块改善C2f模块|即插即用

摘要 在计算机视觉领域&#xff0c;目标检测与实例分割任务一直是研究的热点。YoloV10作为目标检测领域的佼佼者&#xff0c;凭借其出色的性能和效率赢得了广泛的认可。然而&#xff0c;随着技术的不断进步&#xff0c;如何进一步提升YoloV10的性能成为了我们追求的目标。近期…

Java爬虫之使用Selenium WebDriver 爬取数据

这里写自定义目录标题 Selenium WebDriver简介一、安装部署二、Java项目中使用1.引入依赖2.示例代码 三、WebDriver使用说明1.WebDriver定位器2.常用操作3.使用 cookie4.键盘与鼠标操作 Selenium WebDriver简介 Selenium WebDriver 是一种用于自动化测试 Web 应用程序的工具。…

【实战指南】Vue.js 介绍组件数据绑定路由构建高效前端应用

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

ollama + fastgpt+m3e本地部署

ollama fastgptm3e本地部署 开启WSL更新wsl安装ubuntu docker下载修改docker镜像源开启WSL integration 安装fastgpt先创建一个文件夹来放置一些配置文件用命令下载fastgpt配置文件用命令下载docker的部署文件 启动容器M3E下载ollama下载oneapi配置登录oneapi配置ollama渠道配…

聊聊零基础如何开始学习鸿蒙开发技术

鸿蒙系统是一款分布式操作系统&#xff0c;其适用范围非常广泛&#xff0c;从智能手机到家用电器&#xff0c;再到工业设备&#xff0c;都能找到应用场景。特别是在智能家居领域&#xff0c;鸿蒙系统可以实现不同设备之间的无缝连接和协同工作&#xff0c;提供更加智能和便利的…

Flink On kubernetes

Apache Flink 是一个分布式流处理引擎&#xff0c;它提供了丰富且易用的API来处理有状态的流处理应用&#xff0c;并且在支持容错的前提下&#xff0c;高效、大规模的运行此类应用。通过支持事件时间&#xff08;event-time&#xff09;、计算状态&#xff08;state&#xff09…

数据治理为何如此简单?

欢迎来文末免费获取数据治理相关PPT和文档 引言 随着大数据技术的迅速发展&#xff0c;企业积累的数据量呈现爆炸式增长。有效的数据管理已经成为企业提高决策效率、增强竞争优势的重要手段。在这样的背景下&#xff0c;数据治理逐渐成为企业数据管理中不可或缺的一环。它不仅…

Vivado - Aurora 8B/10B IP

目录 1. 简介 2. 设计调试 2.1 Physical Layer 2.2 Link Layer 2.3 Receiver 2.4 IP 接口 2.5 调试过程 2.5.1 Block Design 2.5.2 释放 gt_reset 2.5.3 观察数据 3. 实用技巧 3.1 GT 坐标与布局 3.1.1 选择器件并进行RTL分析 3.1.2 进入平面设计 3.1.3 收发器布…

【二刷hot-100】day1

目录 1.两数之和 2.字母异位词分组 3.字母异位词分组 4.最长连续序列 5.移动零 6.盛最多水的容器 7.三数之和 8.接雨水 1.两数之和 class Solution {public int[] twoSum(int[] nums, int target) {Map<Integer,Integer> mapnew HashMap<>();for (int i0;i<…

LeakCanary

LeakCanary 文章目录 LeakCanary一、内容1. 使用方法2. 工作原理3.工作流程 参考资料 一、内容 LeakCanary 是在 Android 项目中&#xff0c;用于检测内存泄露&#xff0c;优化性能的工具。 1. 使用方法 本文使用版本为 2.5 版本&#xff0c;相比于 2.0 之前的版本&#xff…

嵌入式:Keil的Code、RW、RO、ZI段的解析

相关阅读 嵌入式https://blog.csdn.net/weixin_45791458/category_12768532.html // 例1 int main(void) {HAL_Init(); /* 初始化HAL库 */sys_stm32_clock_init(RCC_PLL_MUL9); /* 设置时钟,72M */delay_init(72); …

[PHP]重复的Notice错误信息

<?php $a []; var_dump($a[name]);执行结果&#xff1a; 原因&#xff1a; display_errors和error_reporting都打开了Notice错误信息

前缀和一>寻找数组的中心下标

1.题目&#xff1a; 2.解析&#xff1a; 如果暴力解法时间复杂度是O(N^2)&#xff0c;定个&#xff0c;i&#xff0c;遍历左边右边&#xff1b; 这里可以优化为前缀和的做法&#xff0c;其实就是个动态规划。 代码&#xff1a; public int pivotIndex(int[] nums) {int n n…

如何利用边缘计算网关进行工厂设备数据采集?天拓四方

边缘计算网关集成了数据采集、处理和传输功能&#xff0c;位于传感器和执行器组成的设备层与云计算平台之间。它能够实时处理和响应本地设备的数据请求&#xff0c;减轻云平台的压力&#xff0c;提高数据处理的速度和效率。同时&#xff0c;边缘计算网关还可以将处理后的数据上…

基于SpringBoot+Vue+uniapp的个人财务系统的详细设计和实现

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…

linux下编译鸿蒙版curl、openssl

随着鸿蒙系统的正式发布日益临近&#xff0c;我们预见到在适配过程中&#xff0c;部分开发者可能需要编译特定版本的库以确保兼容性&#xff0c;比如编译curl-7.81和openssl-1.1.1m&#xff08;大家可以直接访问它们的官方网站下载所需的版本&#xff09;。 接下来&#xff0c…

k8s的部署

一、K8S简介 Kubernetes中文官网&#xff1a;Kubernetes GitHub&#xff1a;github.com/kubernetes/kubernetes Kubernetes简称为K8s&#xff0c;是用于自动部署、扩缩和管理容器化应用程序的开源系统&#xff0c;起源于Google 集群管理工具Borg。 Kubernetes集群组件逻辑图…