JavaScript数组方法 find() ,使用详细(js的 find() 方法)_js find-程序员宅基地

技术标签: 前端开发  JavaScript  前端  javascript  

简介:find() 方法是 JavaScript 中用于在数组中查找特定条件的第一个元素,如果找到一个元素使得回调函数返回true,则该元素作为结果返回;如果没有找到这样的元素,则返回undefined,该函数不会修改原始数组。

1、 基本语法

array.find((item,index)=>{
  console.log(item,index);
})

array.find(callback(element[, index[, array]])[, thisArg])

参数解释:

  • callback:必需。要在数组中每个元素上执行的函数。
  • element:必需。当前正在处理的数组元素。
  • index:可选。正在处理的元素的索引。
  • array:可选。调用该方法的数组本身。
  • thisArg:可选。当执行回调函数时使用的 this 值。

2、 回调函数

find() 方法的第一个参数 callback 是一个函数,用于测试每个元素是否符合条件,接收三个

参数:

  • element:表示当前正在被处理的元素。
  • index:表示正在被处理的元素的索引。
  • array:表示当前正在被处理的数组对象。

回调函数应该返回一个布尔值,表示当前元素是否符合我们的条件。如果返回 true,则会停止遍历并返回该元素的值;否则,继续遍历直到遇到符合条件的元素或者整个数组都被遍历完毕。

3、 使用实例

find() 方法实际应用:

实例 1:查找数组中的第一个负数。

const arr = [1, 2, -3, 4, -5]; 
const negativeNum = arr.find(num => num < 0); 
console.log(negativeNum); // 输出:-3

实例 2:从对象数组中查找符合条件的对象。

const users = [ 
 {id: 1, name: 'Alice'},
 {id: 2, name: 'Bob'},
 {id: 3, name: 'Charlie'}
]; 
const user = users.find(u => u.id === 2);
console.log(user); // 输出:{id: 2, name: 'Bob'}

实例 3:使用 thisArg 参数指定回调函数中的 this 值。

function isEven(num) { return num % 2 === 0; } 
const nums = [1, 3, 4, 7, 8]; 
const evenNum = nums.find(isEven, this); 
console.log(evenNum); // 输出:4

★注意事项

  1. find() 方法会遍历整个数组,直到找到满足条件的元素或者遍历完整个数组。
  2. 如果数组为空,那么返回 undefined
  3. 在回调函数中修改数组本身不是一个好习惯。如果要修改数组,请使用 map() 或者 filter() 方法。
  4. 当多个元素符合条件时,find() 方法只会返回第一个符合条件的元素。
  5. find() 方法是 ES6 中新增的方法,在较旧的浏览器中可能不被支持。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_65793170/article/details/130502800

智能推荐

猫头虎分享已解决Bug || Error: ImagePullBackOff (K8s) ‍-程序员宅基地

文章浏览阅读928次,点赞19次,收藏21次。嘿,云原生小伙伴们,猫头虎博主在此!今天我们要聊聊Kubernetes(K8s)中一个常见但头疼的问题 ——错误。这个小怪兽常常在我们尝试部署容器时悄悄出现,让我们的应用启动失败。在这篇博客里,我会用我那猫头虎般敏锐的眼光,深入挖掘这个问题的根源,展示如何一步步地解决它,并提供避免未来类似问题的策略。准备好了吗?让我们开始吧!问题原因解决步骤网络问题检查网络连接认证错误核实凭证信息镜像名/标签错误确认镜像信息资源限制检查资源配额处理。_error: imagepullbackoff

【贪心法求解最小生成树之Kruskal算法详细分析】---Greedy Algorithm for MST_greedy mst demo-程序员宅基地

文章浏览阅读1.4k次。初衷:最近在看算法相关的东西,看到贪心法解决mst的问题,可惜树上讲解的不是很清新,到网上找了很多资料讲解的也不透彻只是随便带过就草草了事、这几天抽空看了下,总算基本思路理清楚了主要还是得感谢强大的google,帮我找到一个很好的英文资料。(下面有链接,有兴趣的同学可以看看)理顺了思路,就和大家分享下~希望对学习贪心法的同学会有所帮助。 这篇博客的主要内容是贪心法求解Min_greedy mst demo

存储器讲述工作原理及作用_电阻式随机存取存储器原理-程序员宅基地

文章浏览阅读3.1w次,点赞12次,收藏64次。转载路径  介绍  存储器(Memory)是现代信息技术中用于保存信息的记忆设备。其概念很广,有很多层次,在数字系统中,只要能保存二进制数据的都可以是存储器;在集成电路中,一个没有实物形式的具有存储功能的电路也叫存储器,如RAM、FIFO等;在系统中,具有实物形式的存储设备也叫存储器,如内存条、TF卡等。计算机中全部信息,包括输入的原始数据、计算机程序、中间运行结果和最终运行结果都保存在存_电阻式随机存取存储器原理

css3实现六边形-程序员宅基地

文章浏览阅读103次。实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。..._css3 6边型

linux查询内存命令-程序员宅基地

文章浏览阅读100次。1、Linux查看内存的详细信息 [root@c0235 ~]# dmidecode --type memory # dmidecode 2.10 SMBIOS 2.4 present. Handle 0x004A, DMI type 16, 15 bytes Physical Memory ..._内存error correction type: multi-bit ecc

谈谈单元测试之(二):测试工具 JUnit 3_junit3单元测试-程序员宅基地

文章浏览阅读5.5k次,点赞7次,收藏8次。前言上一篇文章《为什么要进行烦人的单元测试?》讨论了一下现阶段软件开发中,程序员们测试情况的现状。这篇文章中,我打算介绍一下单元测试的工具(插件),并且推荐大家以后在开发中,真正的用上单元测试,用好单元测试。说明这篇文章的主题,主要是介绍一下 JUnit 3,虽然 JUnit 3 已经不推荐使用了,但它也曾是风靡一时。这里旨在讨论一下 JUnit 3 的_junit3单元测试

随便推点

自由变量和约束变量-程序员宅基地

文章浏览阅读8.8k次。在程序设计语言中,变量可分为自由变量与约束变量两种。简单来说,局部变量和参数都被认为是约束变量;而不是约束变量的则是自由变量。 在冯·诺依曼计算机体系结构的内存中,变量的属性可以视为一个六元组:(名字,地址,值,类型,生命期,作用域)。地址属性具有明显的冯·诺依曼体系结构的色彩,代表变量所关联的存储器地址。类型规定了变量的取值范围和可能的操作。生命期表示变量与某个存储区地址绑定的过程。根据生命期的不_自由变量和约束变量

autox.js截图发送_autojs截图上传-程序员宅基地

文章浏览阅读637次,点赞9次,收藏8次。企业微信webhook发送文件,截屏原图,分辨率约2400*1800大小约2MB。将截图原图发到电脑上,用画图工具打开,确认像素点位置颜色的过程需要用到。2.还有个方法电脑做个上传图片的接口,手机内网直接发到电脑上。1.最简单的方式是手机截图后,用qq等工具把原图发到电脑上。比如做截图,做点位颜色判断时,图片要电脑才能处理。3.通过企业微信发出来,这样哪里都能取到。针对不同的截图做颜色判断,再点击目标位置。交流讨论优化开发速度。_autojs截图上传

关于TCP/IP协议(笔记)_tcp/ip协议是一种硬件-程序员宅基地

文章浏览阅读433次,点赞4次,收藏2次。引言:学习计算机⽹络时我们⼀般采⽤折中的办法,也就是中和 OSI 和 TCP/IP 的优点,采⽤⼀种只有五层协议的体系结构,这样既简洁⼜能将概念阐述清楚,今天就来了解一下TCP/IP。TCP/IP协议包括四个层次:网络接口层、网络层、传输层、应用层。功能:1、网络接口层主要用于实现与传输媒介相关的物理特性,由下而上来看,对于接收到的物理帧数据,得到IP数据包,交给网络层;由上而下来看,从网络层接收到IP数据包封装成帧数据,发送到网络中。2、网络层:处理来自传输层的分组发送请求,收到请求后,将分_tcp/ip协议是一种硬件

springboot运行出错,Caused by: java.io.IOException-程序员宅基地

文章浏览阅读2.3k次。springboot 运行启动,能够正常启动并且运行,但是一开始就在控制台输出如此错误:不知道原因何在??java.io.IOException: 浣犵殑涓绘満涓殑杞欢涓浜嗕竴涓凡寤虹珛鐨勮繛鎺ャ��而且这个提示的中文还乱码?如何解决org.apache.catalina.connector.ClientAbortException: java.io.IOException: 浣犵殑涓绘..._浣犵殑涓绘満涓 殑杞 欢涓 浜嗕竴涓 凡寤虹珛鐨勮繛鎺ャ

frp为服务器配置穿透,实现远程访问内网服务器_frp线路租用-程序员宅基地

文章浏览阅读738次。由于之前远程连接服务器时只能在同一个网络下(局域网)访问,当离开这个网络区域时,要想远程连接则无法实现。本文正是要解决这样一个问题,实现外网远程访问内网服务器的目的。1、首先需要租用一个服务器可以选用阿里云,百度云,腾讯云等,学生租用的话会比较便宜,之前有个同学租用了一个月的阿里云服务器,资费是10/月。2、下载frp,这是一个配置远程访问的脚本文件(不论外网内网都可以通过这个脚本实现..._frp线路租用

JS仿qq下拉菜单_如何实现一个qq列表类似的js逻辑操作?-程序员宅基地

文章浏览阅读108次。功能:1、点击我的好友会展开下拉出具体的好友2、再次点击,会折叠内容3、首次点击某个具体的好友,只有当前这个好友高亮4、再次点击这个好友时,高亮状态就会消失主要练习:js绑定事件慢慢修改小细节:再次点击,会折叠内容时,里面的高亮要全部取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="._如何实现一个qq列表类似的js逻辑操作?

推荐文章

热门文章

相关标签