JavaScript數(shù)組方法之findIndex()的用法詳解
findIndex()的用法
定義和用法：
findIndex() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置。
有兩點要注意：
1. 當(dāng)數(shù)組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)。例子2就是一個很好的說明，即使后面的666和66大于50，但是它只找到99，就不會執(zhí)行后面的循環(huán)了。
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數(shù)組方法之findIndex()詳解
一、什么是findIndex()方法
在JavaScript中，如果我們需要在數(shù)組中查找滿足某個條件的元素，就可以使用數(shù)組方法findIndex()。這個方法會依次遍歷數(shù)組中的元素，找到第一個滿足條件的元素，然后返回該元素的索引值。如果沒有滿足條件的元素，findIndex()就會返回-1。
const array1 = [5, 12, 8, 130, 44]; const result = array1.findIndex(element => element > 10); console.log(result); // Output: 1
二、findIndex()方法如何使用
使用findIndex()方法需要傳入一個回調(diào)函數(shù)，這個回調(diào)函數(shù)接受三個參數(shù)：數(shù)組元素、元素索引和數(shù)組本身?；卣{(diào)函數(shù)中可以編寫我們需要的條件，如果某個元素符合條件，findIndex()就會返回該元素的索引值。
需要注意的是，findIndex()只會返回第一個符合條件的元素的索引值，不會繼續(xù)往下找。
const array1 = [5, 12, 8, 130, 44]; const result = array1.findIndex(element => element > 10); console.log(result); // Output: 1
除了通過箭頭函數(shù)傳入回調(diào)函數(shù)，我們也可以使用函數(shù)定義的方式來傳入回調(diào)函數(shù)。
function findIndexCallback(element) {
return element > 10;
}
const array1 = [5, 12, 8, 130, 44];
const result = array1.findIndex(findIndexCallback);
console.log(result); // Output: 1三、應(yīng)用示例1：查找對象中符合條件的元素
在一個對象數(shù)組中，我們經(jīng)常需要查找符合某個條件的對象。這時就可以使用findIndex()方法來實現(xiàn)。
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四、應(yīng)用示例2：查找字符串在數(shù)組中的位置
在一個字符串?dāng)?shù)組中，我們可以使用findIndex()方法來查找某個字符串在數(shù)組中的位置。
const fruits = ['apple', 'banana', 'orange', 'grape']; const result = fruits.findIndex(fruit => fruit === 'orange'); console.log(result); // Output: 2
五、應(yīng)用示例3：查找包含某個屬性的對象
在一個對象數(shù)組中，我們可以使用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六、應(yīng)用示例4：查找字符串中某個字符的位置
在一個字符串中，我們可以使用findIndex()方法來查找某個字符的位置。
const str = 'Hello world';
const result = str.split('').findIndex(char => char === 'w');
console.log(result); // Output: 6七、總結(jié)
findIndex()方法是一個非常實用的數(shù)組方法，可以幫助我們快速查找符合某個條件的元素。在實際開發(fā)中，我們會經(jīng)常用到它來實現(xiàn)各種功能。
到此這篇關(guān)于JavaScript數(shù)組方法之findIndex()的用法詳解的文章就介紹到這了,更多相關(guān)js findIndex()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)
forEach()是前端開發(fā)中操作數(shù)組的一種方法,主要功能是遍歷數(shù)組,其實就是 for 循環(huán)的升級版,下面這篇文章主要給大家介紹了關(guān)于javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-11-11
一文詳解JavaScript中的事件循環(huán)(event?loop)機制
JavaScript中的事件循環(huán)（Event?Loop）是一種重要的機制，用于管理異步代碼的執(zhí)行，它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行，同時允許異步操作如定時器、網(wǎng)絡(luò)請求和事件處理，本將給大家詳細(xì)的介紹一下JavaScript事件循環(huán)機制,感興趣的朋友可以參考下2023-12-12
本文這里給大家總結(jié)了一些常用的javascript方法，都是些短小精悍的小代碼，提高執(zhí)行效率，這里推薦給大家。2015-02-02
今天小編就為大家分享一篇layui點擊按鈕添加可編輯的一行方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Javascript中的對像賦值與Java中是一樣的,都為引用傳遞.就是說,在把一個對像賦值給一個變量時,那么這個變量所指向的仍就是原來對像的地址.那怎么來做呢 答案是克隆.2008-12-12
利用JavaScript為句子加標(biāo)題的3種方法示例
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript為句子加標(biāo)題的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JS組件Bootstrap實現(xiàn)彈出框和提示框效果代碼
這篇文章主要介紹了JS組件Bootstrap實現(xiàn)彈出框和提示框效果代碼，對彈出框和提示框感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)折疊展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)字體背景跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
下面小編就為大家?guī)硪黄猨s實現(xiàn)日期顯示的一些操作(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07