关于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' }

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

有趣!谷歌AI认定阿波罗登月“造假“

大家好,我是极智视界,欢迎关注我的公众号,获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 事情是这样的&#…

Leetcode—739.每日温度【中等】

2023每日刷题&#xff08;四十二&#xff09; Leetcode—739.每日温度 单调栈实现思想 从右到左实现代码 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {int n temperatures.size();stack<int> st;vector<i…

win10屏幕录制神器,让你轻松上手!

屏幕录制成为了人们日常生活中越来越重要的一部分&#xff0c;无论是游戏录制、在线会议记录&#xff0c;还是教程演示&#xff0c;屏幕录制都能够有效地帮助人们捕捉并分享关键信息。随着windows 10系统的普及&#xff0c;许多用户已经开始探索这个系统中的屏幕录制功能。接下…

百度手机浏览器关键词排名优化——提升关键词排名 开源百度小程序源码系统 附带完整的搭建教程

百度作为国内领先的搜索引擎&#xff0c;一直致力于为用户提供最优质的信息服务。在移动互联网时代&#xff0c;手机浏览器成为了用户获取信息的主要渠道。而小程序作为轻量级的应用程序&#xff0c;具有即用即走、无需下载等优势&#xff0c;越来越受到用户的青睐。然而&#…

2023年亚太杯APMCM数学建模大赛B题玻璃温室小气候调控

2023年亚太杯APMCM数学建模大赛 B题 玻璃温室小气候调控 原题再现 温室作物的产量受各种气候因素的影响&#xff0c;包括温度、湿度和风速[1]。其中&#xff0c;适宜的温度和风速对植物生长至关重要[2]。为了调节玻璃温室内的温度、风速等气候因素&#xff0c;在温室设计中常…

深入理解 Docker 核心原理:Namespace、Cgroups 和 Rootfs

来自&#xff1a;探索云原生 https://www.lixueduan.com 原文&#xff1a;https://www.lixueduan.com/posts/docker/03-container-core/ 通过这篇文章你可以了解到 Docker 容器的核心实现原理&#xff0c;包括 Namespace、Cgroups、Rootfs 等三个核心功能。 后续文章会演示如…

python subprocess

查看python官方文档&#xff1a;最全 p subprocess.Popen([rpng2bdf.exe,[r-o .\tst\myfont.bdf -f myfont -e 65 tst\*.png]],stdoutsubprocess.PIPE,stderr subprocess.PIPE) out,err p.communicate() print(out) 注意&#xff0c;如何将shell命令分解为参数序列可能并…

01-AI大模型智能客服 V0.1「上」

你好&#xff0c;我是悦创。 首发&#xff1a;https://mp.weixin.qq.com/s/6MTkpWZCEbFWOcUn0Vexvw V0.1 版本我将分为上中下三篇进行书写和发布&#xff0c;欢迎分享和我微信进讨论群&#xff1a;Jiabcdefh。 计划&#xff1a; 会迭代好几个版本&#xff0c;看阅读量和点赞…

工作流能实现自动化吗?应该用什么工具?

研究显示&#xff0c;CRM系统工作流自动化软件不仅能简化冗余的工作且不需要监控和指导就能提高员工的工作效率。企业需要工作流自动化软件吗&#xff1f;答案是肯定的&#xff0c;工作流自动化的好处有哪些&#xff1f; 为什么企业需要工作流自动化软件 每家企业都希望降本增…

百面深度学习-自然语言处理

自然语言处理 神经机器翻译模型经历了哪些主要的结构变化&#xff1f;分别解决了哪些问题&#xff1f; 神经机器翻译&#xff08;Neural Machine Translation, NMT&#xff09;是一种使用深度学习技术来实现自动翻译的方法。自从提出以来&#xff0c;NMT模型经历了几个重要的…

【刷题笔记】数组-双指针||覆盖||重复元素

【刷题笔记】数组-双指针||覆盖||重复元素 目录 移除元素删除有序数组中的重复项删除有序数组中的重复项 II分析 移除元素 https://leetcode.cn/problems/remove-element/ 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并…

电商数据采集及数据监测的关注重点

当品牌需要做分析报告时&#xff0c;需要用到电商数据&#xff0c;所以分析的前提是数据采集&#xff0c;只有采集的数据越准确&#xff0c;分析的报告才有价值&#xff0c;同样&#xff0c;品牌在做数据监测的基础也是采集&#xff0c;如电商价格监测&#xff0c;需要采集到准…

Linux多线程基本概念

目录 ​编辑 1.什么是进程&#xff0c;线程&#xff0c;并发&#xff0c;并行 优点 缺点 什么资源是线程应该私有的呢 为什么线程切换成本更低呢 3.线程控制 pthread_create lpthread选项 makefile 代码实现 ps -aL 什么是LWP 轻量级进程ID与进程ID之间的区别 LWP与pthr…

使用HTML+CSS+JS网页设计与制作,酷炫动效科技农业网页

使用HTMLCSSJS网页设计与制作&#xff0c;酷炫动效科技农业网页。 可以用于家乡介绍、科技农业、图片画廊展示等个人网站的设计与制作。农业网站、家乡网站、农产品网站、旅游网站。 网站亮点 1、视觉设计&#xff1a;排版布局极简设计&#xff0c;优质的视觉体验等。 2、动…

英特尔工作站:助力专业用户实现高效创作

原创 | 文 BFT机器人 英特尔工作站是由全球知名的英特尔公司设计和开发的一款计算平台。英特尔在工作站处理器领域将其产品分为性能型和移动型两类&#xff0c;它的诞生旨在满足专业用户在科学、工程、设计等领域对高性能计算的需求。英特尔工作站配备了最新的英特尔处理器、大…

【Linux】23、内存超详细介绍

文章目录 零、资料一、内存映射1.1 TLB1.2 多级页表1.3 大页 二、虚拟内存空间分布2.1 用户空间的段2.2 内存分配和回收2.2.1 小对象2.2.2 释放 三、查看内存使用情况3.1 Buffer 和 Cache3.1.1 proc 文件系统3.1.2 案例3.1.2.1 场景 1&#xff1a;磁盘和文件写案例3.1.2.2 场景…

中通快递查询入口,根据物流更新量筛选出需要的单号记录

批量中通快递单号的物流信息&#xff0c;根据物流更新量将需要的单号记录筛选出来。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;并登录 步骤2&#xff1a;点击主…

UI彩虹外链网盘系统整站源码/PHP网盘与外链分享程序/整站+模版文件

源码简介&#xff1a; 全新UI彩虹外链网盘系统源码&#xff0c;它是PHP网盘与外链分享程序&#xff0c;提供了整站模版文件&#xff0c;前后端美化模板。 彩虹外链网盘美化模板是一款专为PHP网盘和外链分享程序设计的模板。它具备多种功能&#xff0c;包括支持所有格式文件的…

单片机学习3——数码管

数码管&#xff0c;根据内部结构&#xff0c;可分为共阴极数码管和共阳极数码管。七段发光管加上一个小数点&#xff0c;共计8段。因此&#xff0c;我们对它编程的时候&#xff0c;刚好是用一个字节。 数码管的显示方式&#xff1a; 1&#xff09;静态显示&#xff1b; 2&…