JavaScript数组方法之findIndex()的用法详解
findIndex()的用法
定义和用法：
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
有两点要注意：
1. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。例子2就是一个很好的说明，即使后面的666和66大于50，但是它只找到99，就不会执行后面的循环了。
2.如果没有符合条件的元素返回 -1
例子1：
var arr = ['a','b','c','d'];
? ?var flag = arr.findIndex(item => {
? ? ? ? return item === 'c';
? ? })
? ? console.log(flag) // 得到： 2例子2：
var arr2 = [1,18,2,99,666,44,66];
? ? var flag2 = arr2.findIndex(item => {
? ? ? ? return item > 50;
? ? });
? ? console.log(flag2) ? // 得到： 3例子3：
var arr3 = ['red','pink','green']; ? ? var flag3 = arr3.findIndex(item => item === 'yellow') ? ? console.log(flag3) ?// 得到：-1
注意: IE 11 及更早版本不支持 findIndex() 方法。
JavaScript数组方法之findIndex()详解
一、什么是findIndex()方法
在JavaScript中，如果我们需要在数组中查找满足某个条件的元素，就可以使用数组方法findIndex()。这个方法会依次遍历数组中的元素，找到第一个满足条件的元素，然后返回该元素的索引值。如果没有满足条件的元素，findIndex()就会返回-1。
const array1 = [5, 12, 8, 130, 44]; const result = array1.findIndex(element => element > 10); console.log(result); // Output: 1
二、findIndex()方法如何使用
使用findIndex()方法需要传入一个回调函数，这个回调函数接受三个参数：数组元素、元素索引和数组本身。回调函数中可以编写我们需要的条件，如果某个元素符合条件，findIndex()就会返回该元素的索引值。
需要注意的是，findIndex()只会返回第一个符合条件的元素的索引值，不会继续往下找。
const array1 = [5, 12, 8, 130, 44]; const result = array1.findIndex(element => element > 10); console.log(result); // Output: 1
除了通过箭头函数传入回调函数，我们也可以使用函数定义的方式来传入回调函数。
function findIndexCallback(element) {
return element > 10;
}
const array1 = [5, 12, 8, 130, 44];
const result = array1.findIndex(findIndexCallback);
console.log(result); // Output: 1三、应用示例1：查找对象中符合条件的元素
在一个对象数组中，我们经常需要查找符合某个条件的对象。这时就可以使用findIndex()方法来实现。
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 28 },
{ name: 'Tom', age: 31 },
];
const result = users.findIndex(user => user.age === 28);
console.log(result); // Output: 1四、应用示例2：查找字符串在数组中的位置
在一个字符串数组中，我们可以使用findIndex()方法来查找某个字符串在数组中的位置。
const fruits = ['apple', 'banana', 'orange', 'grape']; const result = fruits.findIndex(fruit => fruit === 'orange'); console.log(result); // Output: 2
五、应用示例3：查找包含某个属性的对象
在一个对象数组中，我们可以使用findIndex()方法来查找包含某个属性的对象。
const users = [
{ name: 'John', age: 25, gender: 'male' },
{ name: 'Jane', age: 28, gender: 'female' },
{ name: 'Tom', age: 31 },
];
const result = users.findIndex(user => user.hasOwnProperty('gender'));
console.log(result); // Output: 0六、应用示例4：查找字符串中某个字符的位置
在一个字符串中，我们可以使用findIndex()方法来查找某个字符的位置。
const str = 'Hello world';
const result = str.split('').findIndex(char => char === 'w');
console.log(result); // Output: 6七、总结
findIndex()方法是一个非常实用的数组方法，可以帮助我们快速查找符合某个条件的元素。在实际开发中，我们会经常用到它来实现各种功能。
到此这篇关于JavaScript数组方法之findIndex()的用法详解的文章就介绍到这了,更多相关js findIndex()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript如何在foreach循环完成之后执行一个回调函数
forEach()是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,下面这篇文章主要给大家介绍了关于javascript如何在foreach循环完成之后执行一个回调函数的相关资料,需要的朋友可以参考下2023-11-11
一文详解JavaScript中的事件循环(event loop)机制
JavaScript中的事件循环（Event Loop）是一种重要的机制，用于管理异步代码的执行，它确保 JavaScript 单线程环境中的任务按照正确的顺序执行，同时允许异步操作如定时器、网络请求和事件处理，本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下2023-12-12
本文这里给大家总结了一些常用的javascript方法，都是些短小精悍的小代码，提高执行效率，这里推荐给大家。2015-02-02
今天小编就为大家分享一篇layui点击按钮添加可编辑的一行方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢 答案是克隆.2008-12-12
这篇文章主要给大家介绍了关于如何利用JavaScript为句子加标题的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了微信小程序实现折叠展开效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了JS实现字体背景跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
下面小编就为大家带来一篇js实现日期显示的一些操作(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论