JS常用数组方法 reduce filter find forEach

文章目录

  • reduce
      • 应用:数据扁平化
  • filter
  • find
    • 从数组 [1,2,3,4,5,6] 中找出值为 2 的元素
  • forEach
      • 用于遍历,forEach 方法没有返回值,它总是返回 undefined。

reduce

数组变量名.reduce((sum,value) => {
// 向sum变量上累加值
// 一定要return值 给下一次循环sum初始值
},0)

let arr = [10, 5, 3, 7]let res = arr.reduce((sum, value) =>{console.log(sum,value);sum += valuereturn sum
},0)console.log(res);

在这里插入图片描述

应用:数据扁平化

filter

filter 方法用于过滤数组,返回数组中满足条件的元素所组成的新数组

let newArray = array.filter(function(element, index, array) {// 返回 true 或 false
}, thisArg);element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 filter 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
newArray:包含通过测试的所有元素的新数组。

应用场景:当你需要根据特定条件筛选数组元素时

假设我们有一个数字数组,我们想要找出所有大于 10 的数字:const numbers = [1, 12, 5, 8, 20, 7, 30];
const filteredNumbers = numbers.filter(function(number) {return number > 10;
});console.log(filteredNumbers); // 输出: [12, 20, 30]

find

返回数组中满足提供的测试函数的第一个元素的值。如果没有元素满足测试函数,find 方法返回 undefined。

let result = array.find(function(element, index, array) {// 返回 true 或 false
}, thisArg);element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 find 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
result:数组中满足测试函数的第一个元素的值,否则返回 undefined。
返回值
  • 例子
const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];const foundUser = users.find(user => user.id === 2);console.log(foundUser); // 输出: { id: 2, name: 'Bob' }

从数组 [1,2,3,4,5,6] 中找出值为 2 的元素

  • 用find
// 从数组 [1,2,3,4,5,6] 中找出值为 2 的元素
console.log('从数组 [1,2,3,4,5,6] 中找出值为 2 的元素');let arr1 = [1,2,3,4,5,6]
let res1 = arr1.find((ele,index)=>{return ele === 2
})
console.log(res1);
  • 用filter
let res2 = [1,2,3,4,5,6].filter((ele) => ele === 2)
console.log(res2);

这两个方法略有不同,filter返回的是一个数组,数组中包含符合条件的元素。find返回的是第一个满足条件的元素

forEach

用于遍历,forEach 方法没有返回值,它总是返回 undefined。

array.forEach(function(element, index, array) {// 执行代码
}, thisArg);element:当前正在处理的数组元素。
index(可选):当前正在处理的元素的索引。
array(可选):调用 forEach 方法的数组。
thisArg(可选):执行回调时使用的 this 值。
undefined:forEach 方法没有返回值,它总是返回 undefined
  • 遍历数组
const numbers = [1, 2, 3, 4, 5];numbers.forEach(number => console.log(number));

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

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

相关文章

精选报告| 2024年,5份必读的“虚仿教育”行业报告合集

以3D/XR应用为主的虚拟仿真实验教学课程,在教育信息化建设过程中已成为必选的技术方案。通过构建虚拟教育环境,允许学习者在数字空间中进行互动学习,这种方法在基础教育、职业培训、远程教育等关键教育领域已经展现出前所未有的变革潜力&…

【提效工具开发】Python功能模块执行和 SQL 执行 需求整理

需求梳理 背景 当前我们在IDE或MySQL查询工具中只能进行个人使用,缺乏共享功能,且在查询及数据统计上有一定的不便。为了改善这种情况,计划搭建一个Web平台,通过后台交互来提升效率。此平台需要兼容Python工具和SQL工具的管理、执…

Ethernet 系列(8)-- 基础学习::ARP

目录 1. ARP的目的: 1.1 什么是ARP 1.2 什么时候用ARP 2. ARP如何工作: 2.1 主机-主机的直接通信 2.2 主机-路由-主机的间接通信 3. ARP header: 1. ARP的目的: 1.1 什么是ARP: ARP-地址解析协议,是第3层地址&#xff…

uniapp组件实现省市区三级联动选择

1.导入插件 先将uni-data-picker组件导入我们的HBuilder项目中&#xff0c;在DCloud插件市场搜索uni-data-picker 点击下载插件并导入到我们的项目中 2.组件调用 curLocation &#xff1a;获取到的当前位置&#xff08;省市区&#xff09; <uni-data-picker v-slot:defa…

28系统监控(CPU、内存、磁盘等)

每天五分钟学Linux | 第二十八课&#xff1a;系统监控&#xff08;CPU、内存、磁盘等&#xff09; 大家好&#xff01;欢迎再次来到我们的“每天五分钟学Linux”系列教程。在前面的课程中&#xff0c;我们学习了如何查看系统日志。今天&#xff0c;我们将探讨如何监控Linux系统…

electron 中 contextBridge 作用

1. 安全地实现渲染进程和主进程之间的通信 在 Electron 应用中&#xff0c;主进程和渲染进程是相互隔离的&#xff0c;这是为了安全和稳定性考虑。 然而&#xff0c;在很多情况下&#xff0c;渲染进程需要访问主进程中的某些功能&#xff0c;例如系统级别的操作或者一些应用级…

软件分享丨火绒应用商店

【资源分享】 资源名&#xff1a;火绒应用商店 官方网址&#xff1a;点击跳转 火绒应用商店是由火绒安全推出的一款独立软件。它提供了海量的应用程序&#xff0c;涵盖办公、社交、游戏、视频、工具等多种领域和类别&#xff0c;方便用户轻松找到所需的应用并进行一键下载安装…

Spring Cloud Alibaba Spring Cloud Spring Boot JDK 版本依赖关系

Spring Cloud Alibaba & Spring Cloud & Spring Boot & JDK 版本依赖关系 Spring Cloud Alibaba & Spring Cloud & Spring Boot Spring Cloud & Spring Boot Spring Boot & JDK JDK 8的新项目推荐版本 Spring Cloud Alibaba 2021.0.5.0* &…

S32G-VNP-RDB2开发环境搭建

下载官方镜像 刷机 cat /proc/partition or df -lh //查看sdcard卡再/dev目录挂在点 export DEVSD/dev/sdb sudo dd iffsl-image-auto-s32g274ardb2.sdcard of${DEVSD} bs1M && sync以上将SD-card插入就可以将开发板启动&#xff0c;串口接UART1&#xff0c;进入Lin…

信息化运维方案,实施方案,开发方案,信息中心安全运维资料(软件资料word)

1 编制目的 2 系统运行维护 2.1 系统运维内容 2.2 日常运行维护方案 2.2.1 日常巡检 2.2.2 状态监控 2.2.3 系统优化 2.2.4 软件系统问题处理及升级 2.2.5 系统数据库管理维护 2.2.6 灾难恢复 2.3 应急运行维护方案 2.3.1 启动应急流程 2.3.2 成立应急小组 2.3.3 应急处理过程 …

MFC 重写了listControl类(类名为A),并把双击事件的处理函数定义在A中,主窗口如何接收表格是否被双击

刚接触MFC遇到的问题&#xff0c;我在主对话框的.cpp里添加了表格的双击处理事件&#xff0c;但是没用&#xff0c;试了下添加单击的&#xff0c;发现居然可以进单击的处理函数&#xff0c;就很懵逼&#xff0c;然后我就把处理双击事件的函数添加到表格的类中&#xff0c;那这样…

鸿蒙ArkTS中的布局容器组件(Column、Row、Flex、 Stack、Grid)

在鸿蒙ArkTS中&#xff0c;布局容器组件有很多&#xff0c;常见的有&#xff1a;   ⑴ Column&#xff1a;&#xff08;垂直布局容器&#xff09;&#xff1a;用于将子组件垂直排列。   ⑵ Row&#xff1a;&#xff08;水平布局容器&#xff09;&#xff1a;用于将子组件水…

Qt低版本多网卡组播bug

原文地址 最近在某个项目中&#xff0c;发现了一个低版本Qt的bug&#xff0c;导致组播无法正常使用&#xff0c;经过一番排查&#xff0c;终于找到了原因&#xff0c;特此记录。 环境 Qt&#xff1a;5.7.0 mingw32操作系统&#xff1a;windows 11 现象 在Qt5.7.0版本中&…

RPC核心实现原理

目录 一、基本原理 二、详细步骤 三、额外考虑因素 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种计算机通信协议&#xff0c;也是一种用于实现分布式系统中不同节点之间进行通信和调用的技术。其实现原理主要可以分为以下几个步骤&…

Android Studio加载旧的安卓工程项目报错处理

文章目录 Invalid Gradle JDK configuration foundNDK not configuredCMake 3.10.2 was not found安装cmake适配cmake版本号 com.intellij.openapi.externalSystem.model.ExternalSystemExceptiongradle版本过低或下载不了下载gradle与依赖库超时替换gradle国内源替换Maven 仓库…

电路原理:电阻桥。

电路的基础是电阻电路。电阻电路有两种基本接线方法&#xff08;串连和并连&#xff0c;二者有不同的解算与用法&#xff1a;串连分压、并连分流&#xff09;。电阻电路就是使用基本接线方法的组合方案&#xff0c;其解算方法主要内容是判断好整体布局以及各个局部的串并连关系…

Pytorch训练时报nan

0. 引言 Pytorch训练时在batchN时loss为nan。经过断点检查发现在batchN-1时&#xff0c;网络参数非nan&#xff0c;输出非nan&#xff0c;但梯度为nan&#xff0c;导致网络参数已经全部被更新为nan&#xff0c;遇到这种情况应该如何排查&#xff0c;如何避免&#xff1f;由于导…

全星魅-物联网定位终端-北斗定位便携终端-北斗有源终端

在当今快速发展的物流运输行业中&#xff0c;精准定位与实时监控已成为确保货物安全与高效运输的关键因素。为了满足这一需求&#xff0c;QMCZ10作为一款集4G&#xff08;LTE Cat1&#xff09;通讯技术与智能定位功能于一体的终端产品&#xff0c;应运而生。它不仅具备普通定位…

银行卡二要素核验 API 对接说明

本文将介绍一种 银行卡二要素核验 API 对接说明&#xff0c;它可用于校验姓名和银行卡号的真实性和一致性。 接下来介绍下 银行卡二要素核验 API 的对接说明。 注册链接 点击链接注册&#xff0c;即可使用&#xff01; 申请流程 要使用 API&#xff0c;需要先到 银行卡二要…

关于elementui el-radio 赋值问题

今天遇到这样的问题&#xff1a; 点击的时候&#xff0c;同时选中 照抄官网&#xff01; 后来发现了问题&#xff1a; 也就是说如果你的版本太低&#xff0c;就不能用value&#xff0c;而得用label&#xff0c;于是修改 <el-radio-group v-model"searchTime"&g…