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)文章
本文主要介紹了TypeScript?接口繼承的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本文主要介紹了利用js定義一個導(dǎo)航條菜單的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了淺談 JS 對象添加 getter與 setter 的5種方法以及如何讓對象屬性不可配置或枚舉,需要的朋友可以參考下2018-06-06
下面小編就為大家?guī)硪黄狫S非空驗證及郵箱驗證的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了詳解使用webpack構(gòu)建多頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
這篇文章主要介紹了推薦三款日期選擇插件，My97DatePicker、用于PC端的jquery.datepicker，以及專注于移動端的Mobiscroll，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
Base64編碼加密JS代碼網(wǎng)頁版，在文本框中輸入任意字符串，即可將該字符串按Base64編碼進行加密，也可將任意Base64編碼的字符解密顯示正常值2013-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript運動事件函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript實現(xiàn)Sleep函數(shù)的代碼
大家知道，JavaScript中沒有內(nèi)置我們常用的sleep()函數(shù)，只有定時器setTimeout()和循環(huán)定時器setInterval()2007-03-03
使用javaScript實現(xiàn)鼠標(biāo)拖拽事件
這篇文章主要為大家詳細(xì)介紹了使用javaScript實現(xiàn)鼠標(biāo)拖拽事件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09