indexOf 和 findIndex 的区别

2024-01-02 20:18
文章标签 区别 indexof findindex

本文主要是介绍indexOf 和 findIndex 的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

indexOffindIndex 都是查找数组中满足条件的第一个元素的索引

indexOf

Array.prototype.indexOf():

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

来自:MDN

例如:

const sisters = ['a', 'b', 'c', 'd', 'e'];
console.log(sisters.indexOf('b'));
// 1

请注意: indexOf() 使用严格等号(与 === 或 triple-equals 使用的方法相同)来比较 searchElement 和数组中的元素

所以,indexOf 更多的是用于查找基本类型,如果是对象类型,则是判断是否是同一个对象的引用

let sisters = [{a: 1}, {b: 2}];
console.log(sisters.indexOf({b: 2}));
// -1const an = {b: 2}
sisters = [{a: 1}, an];
console.log(sisters.indexOf(an));
// 1

findIndex

Array.prototype.findIndex():

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

来自:MDN

const sisters = [10, 9, 12, 15, 16];
const isLargeNumber = (element) => element > 13;
console.log(sisters.findIndex(isLargeNumber));
// 3

findIndex 期望回调函数作为第一个参数。如果你需要非基本类型数组(例如对象)的索引,或者你的查找条件比一个值更复杂,可以使用这个方法。

indexOf 与 findIndex 区别(总结)

  • indexOf :查找值作为第一个参数,采用 === 比较,更多的是用于查找基本类型,如果是对象类型,则是判断是否是同一个对象的引用

  • findIndex :比较函数作为第一个参数,多用于非基本类型(例如对象)的数组索引查找,或查找条件很复杂

源码实现(加深)

indexOf

if (!Array.prototype.indexOf) {Array.prototype.indexOf = function(searchElement, fromIndex) {var k;if (this == null) {throw new TypeError('"this" is null or not defined');}var O = Object(this);var len = O.length >>> 0;if (len === 0) {return -1;}var n = +fromIndex || 0;if (Math.abs(n) === Infinity) {n = 0;}if (n >= len) {return -1;}k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);while (k < len) {if (k in O && O[k] === searchElement) { // === 匹配return k;}k++;}return -1;};
}

findIndex

if (!Array.prototype.findIndex) {Object.defineProperty(Array.prototype, 'findIndex', {value: function(predicate) {if (this == null) {throw new TypeError('"this" is null or not defined');}var o = Object(this);var len = o.length >>> 0;if (typeof predicate !== 'function') {throw new TypeError('predicate must be a function');}var thisArg = arguments[1];var k = 0;while (k < len) {var kValue = o[k];if (predicate.call(thisArg, kValue, k, o)) { // 比较函数判断return k; }k++;}return -1;}});
}

最后

本文首发自「三分钟学前端」,回复「交流」自动加入前端三分钟进阶群,每日一道编程算法面试题(含解答),助力你成为更优秀的前端开发!

这篇关于indexOf 和 findIndex 的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/563531

相关文章

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》:本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理?proxy

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使