forEach与map区别及使用场景

forEach

  • 遍历数组中的元素
  • 为每个元素执行回调
  • 无返回值
    const a = [1,2,3]
    const b = a.forEach((num,index) => {// 执行 num、index 相关的代码
    })// b = undefined 

    map

  • 遍历数组中的元素

  • 通过对每个元素调用函数,将每个元素 “ 映射(map) ” 到一个新元素,从而创建一个新数组

    const a = [a,b,c]
    const b = a.map((num)=>{return num*2
    })//b=[2,4,6]

    .forEach.map 主要区别在于:.map( ) 返回一个新数组,如你想得到一个结果,但不想改变原始数组,用map;如你只需要在数组上做迭代修改,用forEach。

 语法和用法:

    1、forEach

array.forEach(callback(element, index, array));
  • callback 是在数组的每个元素上执行的函数。
  • element 代表当前数组元素。
  • index 代表当前元素的索引。
  • array 是调用 forEach 的数组本身。
    const fruits = ['苹果', '香蕉', '橙子', '葡萄'];fruits.forEach((fruit, index) => {console.log(`第${index + 1}个水果是${fruit}`);
    });

    2、map

    const newArray = array.map(callback(element, index, array));
    
  • callback 是在数组的每个元素上执行的函数。
  • element 代表当前数组元素。
  • index 代表当前元素的索引。
  • array 是调用 map 的数组本身。
    const numbers = [1, 2, 3, 4, 5];
    const squaredNumbers = numbers.map((num) => num * num);console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25]
    

使用场景:

  • 使用 forEach 当你需要在数组元素上执行操作,但不需要生成一个新的数组。例如,你可能会使用 forEach 来更新原始数组的值,而不关心返回的结果。
  • 使用 map 当你需要创建一个新的数组,其中包含根据原始数组的元素生成的新值。这在将原始数据映射到新数据时非常有用,例如从一个数组中提取特定属性并创建一个包含这些属性的新数组。

 

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

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

相关文章

激光炸弹(二维前缀和)-Java版

import java.io.*;/** 题目分析:一个最大5000 * 5000 的矩阵, 爆炸范围在 [0,10e9]* 地图上的目标是随机分布,如果要暴力计算每一个区间R的权值,会很麻烦* 可以用二维前缀和先将权值存起来* for(int i 1;i < n;i ) {for(int j 1;j < m;j ) {g[i][j] g[i][j-1] g[i-1]…

二叉树的前序中序后序遍历

二叉树的前序中序后序遍历-含递归和迭代代码 前序(中左右)中序(左中右)后序(左右中) 前序(中左右) 对于二叉树中的任意一个节点&#xff0c;先打印该节点&#xff0c;然后是它的左子树&#xff0c;最后右子树 A-B-D-E-C-F //递归 const preorderTraversal (root) > {const…

C++入门【2-基本语法】

C 基本语法 C 程序可以定义为对象的集合&#xff0c;这些对象通过调用彼此的方法进行交互。现在让我们简要地看一下什么是类、对象&#xff0c;方法、即时变量。 对象 - 对象具有状态和行为。例如&#xff1a;一只狗的状态 - 颜色、名称、品种&#xff0c;行为 - 摇动、叫唤、…

11.29 知识回顾(视图层、模板层)

一、视图层 1.1 响应对象 响应---》本质都是 HttpResponse -HttpResponse---》字符串 -render----》放个模板---》模板渲染是在后端完成 -js代码是在客户端浏览器里执行的 -模板语法是在后端执行的 -redirect----》重定向 -字符串参数不是…

用友NC JiuQiClientReqDispatch反序列化RCE漏洞复现

0x01 产品简介 用友NC是一款企业级ERP软件。作为一种信息化管理工具,用友NC提供了一系列业务管理模块,包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等,帮助企业实现数字化转型和高效管理。 0x02 漏洞概述 用友 NC JiuQiClientReqDispatch 接口存在…

CETN03 - The Evolution of Computers

文章目录 I. IntroductionII. First Modern Digital Computer: ENIAC (1946)III. First Generation ComputerIV. Second Generation ComputerV. Third Generation ComputerVI. Fourth Generation ComputerVII. ConclusionI. 引言II. 第一台现代数字计算机&#xff1a;ENIAC&…

rk3568 适配PCIE(二)

rk3568 适配pcie3.0 PCIe(Peripheral Component Interconnect Express)是一种用于连接计算机主板和其他设备的高速串行总线接口。PCIe 2.0和PCIe 3.0是两个不同版本的PCIe规范,它们在以下几个方面有所不同: 带宽:PCIe 2.0的理论带宽为每条通道5 Gbps,而PCIe 3.0的理论带…

很全面 影响无人机自动返航的因素总结

在无人机技术不断成熟的今天&#xff0c;自主返航技术成为保障飞行安全的一种重要工具。无人机在多种情况下能够智能判断&#xff0c;主动实施返航动作&#xff0c;为用户提供更加可靠的飞行保障。以下是一些常见的无人机自动返航场景&#xff0c;让我们深入了解这项技术背后的…

centos定时自动备份mysql

Centos定时自动备份mysql 文章目录 Centos定时自动备份mysql1.先安装相关工具2.创建dump.sh命令文件3.编写命令文件规则4.文件夹路径5.添加crontab任务6.编写cron规则 1.先安装相关工具 共两个&#xff0c;一个是cronie 一个是 mysql-client&#xff08;一般装完mysql就自带的有…

【Maven】安装和使用

1. Maven 概述 Maven 是一款用于管理和构建 java 项目的工具&#xff0c;可以进行依赖管理、统一项目结构和项目构建。 1.1 Maven 模型 项目对象模型 (Project Object Model)依赖管理模型(Dependency)构建生命周期/阶段(Build lifecycle & phases) 1.2 Maven 仓库 仓库的…

HarmonyOS与AbilitySlice路由配置

上一章我有教到鸿蒙应用开发——Ability鸿蒙应用开发的基础知识&#xff0c;那么今天我们来讲一下AbilitySlice路由配置 AbilitySlice路由配置 虽然一个Page可以包含多个AbilitySlice&#xff0c;但是Page进入前台时界面默认只展示一个AbilitySlice。默认展示的AbilitySlice是…

Unity 网格布局控件-Grid Layout Group

Unity 网格布局控件-Grid Layout Group是Unity中的UGUI控件&#xff0c;用于在 UI 中创建网格布局&#xff0c; 它的作用是&#xff1a;自动将子对象排列成网格&#xff0c;即我们可以通过该组件对子对象按行和列的形式排列&#xff0c;根据指定的约束条件自动调整它们的大小和…

前缀和列题AcWing795-Java版

import java.io.*;//前缀和:改题目要求 求一串整数数列中l~r中的数的和 //可以提前算好前n项的和s[n],然后用s[n] - s[n - 1]public class Main {static int n,m,l,r;static int N 100010;static BufferedReader in new BufferedReader(new InputStreamReader(System.in));st…

git解决冲突

记录一次 git 解决冲突的过程。 情况是前一段时间我基于本地的 master 分支上新建了一个分支比如叫做 weight_linear: git checkout -b weight_linear 然后我已经在这个分支上进行了修改并上传到 github 上了&#xff0c;比如&#xff1a; git add . git commit -m "u…

CSS总结

CSS 选择器 基础选择器 标签 div{}类名 .one{}id #two{}通用 *{}组合 div,p{}后代 ul li{} *交叉 div .one{} 伪类选择器 :hover:focus&#xff0c; 伪元素选择器 ::before::after::first-letter::first-line 属性选择器 [attrname]—拥有属性 例&#xff1a;[data-name]{}…

什么是vue的计算属性

Vue的计算属性是一种特殊的属性&#xff0c;它的值是通过对其他属性进行计算得到的。计算属性可以方便地对模型中的数据进行处理和转换&#xff0c;同时还具有缓存机制&#xff0c;只有在依赖的数据发生变化时才会重新计算值。这使得计算属性更加高效&#xff0c;并且可以减少重…

L.next与L->next

C中有两种方式访问对象的成员&#xff0c;L.next 和 L->next 。C的头歌数据结构题应该就是C&#xff0c;但因为兼容C的大部分内容所以没有感觉 L.next&#xff1a;这种方式用于直接访问对象的成员。在这里&#xff0c;L 是一个对象&#xff0c;next 是它的一个成员。所以&am…

流媒体音视频/安防视频云平台/可视化监控平台EasyCVR无法启动且打印panic报错,是什么原因?

国标GB视频监控管理平台/视频集中存储/云存储EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。AI智能大数据视频分析EasyCVR平台已经广泛应用在工地、工厂、园…

Android各版本引入的重要安全机制介绍

本文简单列举Android各个版本引入的一些主要安全机制。 Android 4.4&#xff08;KitKat&#xff09; - SELinux&#xff08;Security-Enhanced Linux&#xff09;&#xff1a;引入了强制访问控制框架&#xff0c;对系统的进程和文件进行了更严格的访问控制。 Android 5.0&…

微信公众号如何设置淘宝优惠券自动查券返利机器人

微信公众号如何设置淘宝优惠券自动查券返利机器人 在当今的互联网时代&#xff0c;智能化的应用越来越广泛。许多人都希望通过使用微信公众号来获取更多的优惠和返利。接下来&#xff0c;我将为您介绍如何设置微信公众号中的淘宝优惠券自动查券返利机器人&#xff0c;结合微赚…