关于js的find的基本用法

Array.prototype.find() 是 JavaScript 的一个数组方法,它被用来在数组中查找一个符合条件的元素。一旦找到第一个符合条件的元素, find() 会立即返回这个元素的值,否则返回 undefined。

以下是 find() 方法的基本语法:

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

参数:
callback: 回调函数,在数组每个元素上执行,接受三个参数:

currentValue : 数组中正在处理的当前元素。
index (可选): 数组中正在处理的当前元素的索引。
array (可选): find() 方法被调用的数组。
thisArg (可选): 执行回调时用作 this 的对象。
返回值:
返回数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

1.使用currentValue 参数:

// 例子1:寻找数组中第一个大于10的元素
let array = [5, 12, 8, 130, 44];
/**
我们传给 find() 函数一个回调函数,该函数会对数组的每个元素进行测试。当找到第一个大于10的数时,find() 就立即返回这个数。
*/
let found = array.find(element => element > 10);console.log(found,'-----------found'); // 输出: 12

在这里插入图片描述
2.使用 currentValue 和 index 参数

/**
例子2:除了检查元素是否大于10,我们还检查其索引是否大于2。因此,find() 返回的是第一个在索引大于2且值大于10的元素。
*/
var array2 = [5, 12, 8, 130, 44];var found = array2.find(function(element, index) {return element > 10 && index > 2;
});console.log(found); // 130

3.使用 currentValue,index 和 arr 参数

/**
例子3:我们查找最后一个元素(索引等于数组长度减一)且该元素大于10的元素。因为44不满足条件,所以返回 undefined。
*/var array3 = [5, 12, 8, 130, 44];var found = array3.find(function(element, index, arr) {return element > 10 && index === arr.length - 1;
});console.log(found); // undefined

4.其他

// 例子4:取出testData中与test对应的对象
const testData = ref([{id:1,name:'测试1'
},{id:2,name:'测试2'
},{id:3,name:'测试3'
},{id:4,name:'测试4'
},])const test = ref(testData.value[0].id) // 1
const findTest = testData.value.find((item)=> item.id == test.value)console.log(testData.value,'-----------testData');
console.log(test.value,'-----------test');//1
console.log(findTest,'-----------findTest'); // { id:1, name:'测试1' }

在这里插入图片描述

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

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

相关文章

利用企业被执行人信息查询API保障商业交易安全

前言 在当今竞争激烈的商业环境中,企业为了保障商业交易的安全性不断寻求新的手段。随着技术的发展,利用企业被执行人信息查询API已经成为了一种强有力的工具,能够帮助企业在商业交易中降低风险,提高合作的信任度。 企业被执行人…

GitHub桌面版

GitHub桌面版 一、GitHub 桌面版二、clone 仓库三、更新仓库 一、GitHub 桌面版 二、clone 仓库 三、更新仓库

Azure Machine Learning - Azure可视化图像分类操作实战

目录 一、数据准备二、创建自定义视觉资源三、创建新项目四、选择训练图像五、上传和标记图像六、训练分类器七、评估分类器概率阈值 八、管理训练迭代 在本文中,你将了解如何使用Azure可视化页面创建图像分类模型。 生成模型后,可以使用新图像测试该模型…

TIDB拓扑结构

TiDB Server:SQL层,负责接受客户端的连接,执行SQL解析和优化,最终生成分布式执行计划。TiDB Server为无状态的,可增加节点负载均衡。 PD (Placement Driver) Server:整个TiDB集群的元信息管理模块&#xf…

【超详细】手搓一个微信日记本

🎀 文章作者:二土电子 🌸 关注公众号获取更多资料! 🐸 期待大家一起学习交流! 这里对之前的微信记事本小程序进行了重新编写,增加了更加详细的步骤描述,将全部图片都改成了本地图…

用EasyAVFilter将网络文件或者本地文件推送RTMP出去的时候发现CPU占用好高,用的也是vcodec copy呀,什么原因?

最近同事在用EasyAVFilter集成在EasyDarwin中做视频拉流转推RTMP流的功能的时候,发现怎么做CPU占用都会很高,但是视频没有调用转码,vcodec用的就是copy,这是什么原因呢? 我们用在线的RTSP流就不会出现这种情况&#x…

SSM个性化旅游管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 个性化旅游管理系统是一套完善的信息系统,结合springMVC框架完成本系统,对理解JSP java编程开发语言有帮助系统采用SSM框架(MVC模式开发),系统具有完整的源代码和数据库 ,系统主要采用B…

raid磁盘阵列

在单机时代,采用单块磁盘进行数据存储和读写的方式,由于寻址和读写的时间消耗,导致I/O性能非常低,且存储容量还会受到限制。另外,单块磁盘极其容易出现物理故障,经常导致数据的丢失。此时,RAID技…

新材料制造ERP用哪个好?企业应当如何挑选适用的

有些新材料存在特殊性,并且在制造过程中对车间、设备、工艺、人员等方面提出更高的要求。还有些新材料加工流程复杂,涉及多种材料的请购、出入库、使用和管理等环节,解决各个业务环节无缝衔接问题是很多制造企业面临的管理难题。 新材料制造…

牙科诊所小程序开发案例

一、背景: 针对传统口腔医疗领域中口腔诊所推广难,纸质信息保存难等问题,设计并开发了基于微信小程序实现口腔服务助手平台。为了给人们提供便捷,快速的预约方式,提高社会人群对口腔健康的关注力度。通过微信小程序互联网技术&…

文旅虚拟人IP:数字时代的传统文化推荐官

近几年,随着文旅虚拟人频“上岗”,虚拟人逐渐成为了文旅品牌的一种新颖的传统文化传播思路。 文旅品牌定制化推出虚拟人,本质原因是2023旅游业全面复苏,各文旅玩法同质化现象严重,在这样的境遇下,文旅品牌开…

OpenMLDB v0.8.4 诊断工具全面升级

新的v0.8.4版本中,我们对于诊断工具进行了全面系统化的升级,以提供更加完整和智能化的诊断报告,有助于高效排查 OpenMLDB 集群问题,大幅提升运维效率。 相比于之前的版本,新的诊断工具增添一键诊断功能,使…

首个央企量子云计算项目,中标!

6月29日,北京玻色量子科技有限公司(简称“玻色量子”)成功中标中国移动云能力中心“2023—2024年量子算法及光量子算力接入关键技术研究项目”,这是玻色量子继与移动云签订“五岳量子云计算创新加速计划”后🔗&#xf…

杰发科技AC7801——EEP内存分布情况

简介 按照文档进行配置 核心代码如下 /*!* file sweeprom_demo.c** brief This file provides sweeprom demo test function.**//* Includes */ #include <stdlib.h> #include "ac780x_sweeprom.h" #include "ac780x_debugout.h"/* Define …

Python,FastAPI,mLB网关,无法访问/docs

根源就是js和ccs文件访问路由的问题&#xff0c;首先你要有本地的文件&#xff0c;详情看https://qq742971636.blog.csdn.net/article/details/134587010。 其次&#xff0c;你需要这么写&#xff1a; /unicontorlblip就是我配置的mLB网关路由。 app FastAPI(titleoutpaint…

【力扣:421,2935】数组内最大异或对问题

思路&#xff1a;从最高位向低位构造&#xff0c;对每一位利用哈希表寻找是否存在可使此位为1的数 第一轮找1&#xff1a;清空哈希表&#xff0c;1&#xff0c;2存1&#xff0c;到3发现1^01&#xff0c;res|1<<3 第二轮找11&#xff1a;清空哈希表&#xff0c;1存10&…

如何开发洗鞋店用的小程序

随着人们生活水平的提高&#xff0c;洗护行业是越来越细分化了&#xff0c;从最开始的干洗店包含洗护行业的所有服务到现在有专门为洗鞋开的店&#xff0c;如果开发一款洗鞋店用的小程序&#xff0c;可以实现用户在家下单直接有人上门取鞋的话&#xff0c;应该如何去开发呢&…

将 Spring 微服务与 BI 工具集成:最佳实践

软件开发领域是一个不断发展的领域&#xff0c;新的范式和技术不断涌现。其中&#xff0c;微服务架构和商业智能&#xff08;BI&#xff09;工具的采用是两项关键进步。随着 Spring Boot 和 Spring Cloud 在构建强大的微服务方面的普及&#xff0c;了解这些微服务如何与 BI 工具…

11-@Transaction与AOP冲突解决

如题&#xff0c;最近碰到了一个问题&#xff0c;在public方法上添加Transaction没有生效&#xff0c;事务没有回滚。 我自己模拟了一个功能&#xff0c;向数据库表User里面插入用户数据。说一下代码背景&#xff0c; 数据库MySQL&#xff0c;持久化层Mybatis&#xff0c;项目使…

Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用

最近在项目中用到上传裁剪&#xff0c;看了一下代码&#xff0c;觉得这插件可可以。梳理了一下代码分享给大家 前端UI组件element-plus 如果你也用到了 &#xff0c;快速帮你解决了问题,别忘记点赞收藏 1.首先看效果图 因为版本vue-cropper 众多 &#xff0c;虽然网上有各…