当前位置: 首页 > news >正文

深度解读js中数组的findIndex方法

js中数组有一个findIndex方法,这个方法是一个让人感到很困惑的方法。

首先来看看MDN对这个方法的解释:Array.prototype.findIndex() - JavaScript | MDN

The findIndex() method of Array instances returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

See also the find() method, which returns the first element that satisfies the testing function (rather than its index).

 上面这段话简单说就是:findIndex函数会遍历数组所有元素,返回满足给定测试函数的数组元素的索引,如果所有数组元素都不满足条件,则返回-1。

这个描述还是有点拗口,我们看看findIndex的入参

array.findIndex( callback(element) )

 这里采用的是简化版本,因为99%都是这种情况,没有必要把问题搞复杂。

可以看到findIndex接收的是一个回调函数,而回调函数的入参就是数组中的每一个元素

findIndex 方法会从数组的第一个元素开始迭代,对每个元素调用 callback 函数,直到找到一个使 callback 返回 true 的元素。一旦找到这样的元素,findIndex 将返回该元素的索引,如果没有找到满足条件的元素,则返回 -1。

 下面举个简单的例子:

const numbers = [1, 2, 3, 4, 5];
// findIndex中回调函数就是判断数组中元素是否大于3,满足条件则返回该元素的索引值
const index = numbers.findIndex(element => element > 3);console.log(index); // 输出:3,因为数字 4 是第一个满足条件的元素,其索引为 3

这个例子很容易看懂,就不多做解释了。

然后再举一个复杂些的例子:

function deleteFromArray(arr, compare) {// 注意:这里的compare就是findIndex的callback回调函数,该回调函数在实际调用的时候才确定传入const index = arr.findIndex(compare)if (index > -1) {arr.splice(index, 1)}
}
export function deleteSearch(query) {let searches = storage.get(SEARCH_KEY, [])// (item) => {return item === query}就是实际传入的回调函数,item是数组searches中的每一个元素deleteFromArray(searches, (item) => {
// 判断条件: 如果找到search中跟查询关键词query相同的元素,就返回它的索引;否则返回-1return item === query })storage.set(SEARCH_KEY, searches)return searches
}

上面这个例子中是把findIndex的callback回调函数当作参数传递给了deleteFromArray函数,这样就保证了灵活性。

deleteFromArray通过这个回调函数的判断结果,拿到索引,然后通过splice方法从数组中删除这个元素

在某种意义上,findIndex跟filter函数有点像,但还是有区别,主要为:

findIndex 用于找到第一个满足条件的元素并返回其索引

filter 用于获取所有满足条件的元素组成的新数组

 简单说findIndex 返回的是符合条件数组元素的索引,而filter返回的是符合条件的数组元素的一个集合=》一个新数组。

相关文章:

深度解读js中数组的findIndex方法

js中数组有一个findIndex方法,这个方法是一个让人感到很困惑的方法。 首先来看看MDN对这个方法的解释:Array.prototype.findIndex() - JavaScript | MDN The findIndex() method of Array instances returns the index of the first element in an arra…...

ICML2021 | RSD: 一种基于几何距离的可迁移回归表征学习方法

目录 引言动机分析主角(Principal Angle)表征子空间距离正交基错配惩罚可迁移表征学习实验数据集介绍 实验结果总结与展望 论文链接 相关代码已经开源 引言 深度学习的成功依赖大规模的标记数据,然而人工标注数据的代价巨大。域自适应&…...

中国人民大学与加拿大女王大学金融硕士:在该奋斗的岁月里,对得起每一寸光阴

在这个快速变化的世界中,金融行业面临不断更新的挑战和机遇。为了应对这些挑战,中国人民大学与加拿大女王大学合作举办金融硕士项目,旨在培养具有国际视野、扎实的金融理论基础和实战经验的专业人才。 中国人民大学和加拿大女王大学金融硕士…...

Python基础教程:装饰器的详细教程

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 一、什么是装饰器 目的:给func()方法,增加一个功能,在fun()执行期间,同时把fun()执行速率机算出来 import time def func():print(嘻嘻哈哈)start_time time.time() ti…...

Apache poi xwpf word转PDF中文显示问题解决

原问题解决方法&#xff1a;https://github.com/opensagres/xdocreport/issues/161 POM依赖 <properties><java.version>1.8</java.version><poi.version>3.14</poi.version></properties><dependencies><dependency><gro…...

Gartner发布2024年十大战略技术趋势

今日&#xff0c;Gartner发布了2024年企业机构需要探索的十大战略技术趋势。这十大趋势包括&#xff1a;全民化的生成式&#xff1b;AI 信任、风险和安全管理&#xff1b;AI 增强开发&#xff1b;智能应用&#xff1b;增强型互联员工队伍&#xff1b;持续威胁暴露管理&#xff…...

在UniApp中使用uni.makePhoneCall方法调起电话拨打功能

目录 1.在manifest.json文件中添加权限 2. 组件中如何定义 3.如何授权 4.相关知识点总结 1.在manifest.json文件中添加权限 {"permissions": {"makePhoneCall": {"desc": "用于拨打电话"}} }2. 组件中如何定义 <template>…...

苹果手机怎么刷机?掌握好这个方法!

苹果手机以其优秀的性能与高颜值的设计赢得了一大批用户的喜爱。但是&#xff0c;当手机使用久了以后&#xff0c;难免会出现一些系统问题。在遇到运行不稳定、忘记锁屏密码、软件故障、频繁死机等情况时&#xff0c;我们可能需要对手机进行刷机来解决问题。那么&#xff0c;苹…...

最新ai创作系统CHATGPT系统源码+支持GPT4.0+支持ai绘画(Midjourney)

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…...

代码随想录算法训练营Day56|动态规划14

代码随想录算法训练营Day56|动态规划14 文章目录 代码随想录算法训练营Day56|动态规划14一、1143.最长公共子序列二、 1035.不相交的线三、53. 最大子序和 动态规划 一、1143.最长公共子序列 class Solution {public int longestCommonSubsequence(String text1, String text2…...

VsCode通过Git History插件查看某个页面的版本修改记录

首先需要安装插件Git History 方式一&#xff1a;通过 点击File History 查看某个文件变更&#xff1b;即通过commit的提交记录去查看某个文件的修改 方式二&#xff1a;通过点击选择toggle File Blame 查看当前页面每一行所有提交修改记录...

事件循环(渡一)

一、事件循环 浏览器有哪些进程和线程 浏览器是一个多进程多线程的应用程序&#xff0c;当启动浏览器后&#xff0c;会默认启动多个进程 可以在浏览器任务管理器中查看所有进程 其中最主要的进程有&#xff1a; 浏览器进程 主要负责界面展示&#xff0c;用户交互&#xff0c;…...

eNSP在hybrid接口上配置vlan

一、什么是vlan VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;是一种通信技术&#xff0c;它可以将一个物理的局域网在逻辑上划分成多个广播域。每个VLAN都是一个广播域&#xff0c;VLAN内的主机可以直接通信&#xff0c;而VLAN之间则不能直…...

行为型模式-迭代器模式

迭代器模式是 Java 和 .Net 编程环境中非常常用的设计模式。这种模式用于顺序访问集合对象的元素&#xff0c;不需要知道集合对象的底层表示。 意图&#xff1a;提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。 主要解决&#xff1a;不同的方式…...

华为云应用中间件DCS系列—Redis实现(电商网站)秒杀抢购示例

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;应用中间件系列之Redis实现&#xff08;电商网站&#xff09;秒杀抢购示例 1 什么是DEVKIT 华为云开发者插件&#xff08;Huawei Cloud Toolkit&#xff09;&…...

EasyExcel导出带有下拉框的表头模板

1.接口层 ApiOperation("其他费用配置-模版下载")GetMapping("/downloadTemplate")public void downloadTemplate(HttpServletResponse response) {try {List<String> list Arrays.asList("集团", "平台", "部门", &…...

fastadmin找不到后台控制器。登录之后找不到后台控制器

nginx加配置项 伪静态那块 location / { if (!-e KaTeX parse error: Expected }, got EOF at end of input: … rewrite ^(.*) /index.php?s 1 l a s t ; b r e a k ; r e w r i t e ( . ? p ˙ h p ) ( / . ) 1 last; break; rewrite ^(.?\.php)(/.) 1last;break;rewrit…...

浅谈智能操控及无线测温产品在马来西亚理文造纸雪邦热电站项目中的应用

摘要&#xff1a;为避免因电线接头松动、电缆老化等引发高温造成火灾&#xff0c;所造成的的经济损失巨大&#xff0c;在一些电气设备如大电流电缆设备节点、电力设备局部异常升温部位、开关柜的动静触头&#xff0c;进线与出线母排接点、整流柜中的电气接点、变压器节点、变电…...

打开 Java 新的大门,Solon v2.5.10 发布

Solon 是什么框架&#xff1f; Java 生态级应用开发框架。从零开始构建&#xff0c;有自己的标准规范与开放生态&#xff08;历时五年&#xff0c;具备全球第二级别的生态规模&#xff09;。与其他框架相比&#xff0c;解决了两个重要的痛点&#xff1a;启动慢&#xff0c;费内…...

unity动画_UI动画案例 c#

首先我们打开一个项目 在这个初始界面我们需要做一些准备工作 创建基础通用包 在场景上创建一个Cube 选中Cube 在Window下点击Animation拖拽至运行窗口 点击创建 保存后 这个操作是给Cube添加了一个组件 对Cube_添加一个Position动画 设置几个帧位置的坐标(x,y,z)值 点击运行测…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案

一、延迟敏感行业面临的DDoS攻击新挑战 2025年&#xff0c;金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征&#xff1a; AI驱动的自适应攻击&#xff1a;攻击流量模拟真实用户行为&#xff0c;差异率低至0.5%&#xff0c;传统规则引…...