关于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,一经查实,立即删除!

相关文章

​LeetCode解法汇总1410. HTML 实体解析器

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 描述: 「HTML 实…

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

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

如何使用 JavaScript 实现图片上传并转换为 LaTeX 公式

在本教程中,我们将学习如何使用 JavaScript 创建一个上传图片的功能,并将所选图片转换为 LaTeX 公式。我们将使用 FileReader 对象来读取图片并将其转换为 Base64 格式,然后利用 img2latex API 将其转换为 LaTeX 公式。 1. HTML 结构 首先&…

SpringMVC日志追踪笔记整理

新建logback-spring.xml <?xml version"1.0" encoding"UTF-8"?> <configuration><property name"PATH" value"./log/business"></property><appender name"STDOUT" class"ch.qos.logback…

linux进程调度(三)-进程终止

文章目录 2.3 进程退出的几种情况2.4 进程终止过程分析2.4.1 exit_notify函数2.4.1.1 forget_original_parent函数2.4.1.1.1 find_child_reaper函数2.4.1.1.2 find_new_reaper函数2.4.1.1.3 reparent_leader函数 2.4.1.2 do_notify_parent函数2.4.1.3 release_task函数 2.4.2 d…

GitHub桌面版

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

穆桂英挂帅

《穆桂英挂帅》 作家&#xff0f;罗光记 穆桂英挂帅破敌&#xff0c; 威风凛凛立战场。 铁甲如云奔雷急&#xff0c; 英姿飒爽傲寒霜。 烽火连天战鼓擂&#xff0c; 旌旗翻飞壮心惊。 刀光剑影映红日&#xff0c; 豪情壮志天地惊。 风云变幻战事急&#xff0c; 英勇穆桂英…

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

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

温馨提示!办理流量卡千万不要填写别人的身份证信息,切记!

可以用别人的身份证办理流量卡吗&#xff1f;是很多朋友都比较关注的一个问题&#xff0c;在这里明确的告诉大家一下&#xff0c;当然是不可以的。 ​  不管你是在线下营业厅办理&#xff0c;还是在线上申请&#xff0c;都是需要提供本人的证件信息才能办理&#xff1a; 1、…

TIDB拓扑结构

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

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

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

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

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

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

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

raid磁盘阵列

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

Java设计模式

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

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

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

牙科诊所小程序开发案例

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

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

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

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

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

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

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