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)文章
利用百度echarts實現(xiàn)圖表功能簡單入門示例【附源碼下載】
這篇文章主要介紹了利用百度echarts實現(xiàn)圖表功能簡單,結(jié)合簡單示例形式分析了echarts插件的圖標(biāo)繪制功能相關(guān)實現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-06-06
最近項目寫了一些js，水平有待提高,比較常用的一些js函數(shù)。2009-01-01
這篇文章主要介紹了Nuxt.js 實戰(zhàn)集錦,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
淺析在javascript中創(chuàng)建對象的各種模式
下面小編就為大家?guī)硪黄獪\析在javascript中創(chuàng)建對象的各種模式。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時間進度條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
HTML5+setCutomValidity()函數(shù)驗證表單實例分享
本文給大家分享的是在HTML5中結(jié)合setCutomValidity()函數(shù)實現(xiàn)驗證表單的實例，非常的時間實用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
pureClearButton是一款基于Bootstrap的非常實用的用于清空和重置input輸入框內(nèi)容的jQuery按鈕插件，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了源碼分析Django的message組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
控制圖片大小的方法有很多，在本文將為大家詳細(xì)介紹下使用js實現(xiàn)縮放圖片，核心代碼如下，感興趣的朋友可以參考下2013-10-10
本文主要給大家介紹的是javascript中的擴展方法字符串trim()的使用指南，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05