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

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…

软件分享丨火绒应用商店

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

信息化运维方案,实施方案,开发方案,信息中心安全运维资料(软件资料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 应急处理过程 …

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

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

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 仓库…

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

在当今快速发展的物流运输行业中&#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…

查缺补漏---子网划分方法(定长与不定长子网)

第一类题型&#xff1a; 方法&#xff1a;切蛋糕 例1&#xff1a; 现将一个 IP 网络划分成4个子网&#xff0c;若其中一个子网是 172.16.1.128/26&#xff0c;则下列网络中&#xff0c;不可能是另外三个子网之一的是&#xff08;&#xff09; A.172.16.1.0/25 B.172…

P11229 [CSP-J 2024] 小木棍

[CSP-J 2024] 小木棍 题目描述 小 S 喜欢收集小木棍。在收集了 n n n 根长度相等的小木棍之后&#xff0c;他闲来无事&#xff0c;便用它们拼起了数字。用小木棍拼每种数字的方法如下图所示。 现在小 S 希望拼出一个正整数&#xff0c;满足如下条件&#xff1a; 拼出这个数…

嵌入式开发之进程函数

1、进程创建-fork #include <unistd.h> pid_t fork(void); 创建新的进程&#xff0c;失败时返回-1成功时父进程返回子进程的进程号&#xff0c;子进程返回0通过fork的返回值区分父进程和子进程 pid_t pid; //fork子进程之后&#xff0c;子进程和父进程会同时继续往下执行…

【循环引用及格式化输出】

垃圾回收机制 当一个值在内存中直接引用跟间接引用的量为0时&#xff0c;&#xff08;即这个值没有任何入口可以找到它&#xff09;那么这个值就会被清空回收♻️&#xff0c;释放内存空间&#xff1b; 列表在内存中的存储方式 1&#xff09;引用计数的两种方式 x "ea…

从0开始学习Linux——文本编辑器

往期目录&#xff1a; 1、从0开始学习Linux——Linux简介&安装 2、从0开始学习Linux——搭建属于自己的Linux系统 我们通过前面教程的学习已经了解了什么是Linux&#xff0c;并且我们也定制安装了属于我们自己的一个Linux系统。从这个章节开始我们将开始学习如何去操作Linu…

“北斗三号”如何赋能工业物联网

北斗三号是我国独立自主研发的第三代卫星导航系统&#xff0c;是北斗卫星导航系统的重要组成部分。北斗三号系统具有全球覆盖能力&#xff0c;除了提供基本的定位、导航、授时服务外&#xff0c;还提供高精度和短报文通信服务等。针对产业物联网应用&#xff0c;北斗三号也发挥…

相关衍生 pika+mongo

衍生相关 pikamongo 很多平台不提供完整的数据展示, 翻页只能翻几页,不过提供相关推荐等方法可获取更多的数据; 使用 rabbitmq 是因为数据量可能有几十上百万, 且能持久化 mongo对于数据并不实时的更新到查询里 def main():# mongodb# client MongoClient(localhost, 27017)cl…

Odoo | 免费开源ERP:汽车及零配件行业信息化解决方案

文 / 开源智造 Odoo亚太金牌服务 概述 围绕汽车行业产业链上下游企业的整体业务主线&#xff0c;提供面向汽车主机厂整车个性化制造解决方案&#xff0c;产业链上下游一体化协同解决方案&#xff0c;数字化精益制造解决方案、全价值链质量管理解决方案&#xff0c;数字化运营解…

【Linux】【守护进程】总结整理

守护进程&#xff08;Daemon&#xff09;是运行在后台的进程&#xff0c;通常没有与之关联的控制终端。守护进程在启动后会脱离控制终端&#xff0c;并继续在后台运行&#xff0c;即使用户退出登录或者终端关闭也不会影响它们的运行。守护进程常用于提供网络服务、定期执行任务…