findIndex()的用法

定義和用法：

findIndex() 方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。

有兩點(diǎn)要注意：

1. 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。例子2就是一個(gè)很好的說明，即使后面的666和66大于50，但是它只找到99，就不會(huì)執(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ù)組中查找滿足某個(gè)條件的元素，就可以使用數(shù)組方法findIndex()。這個(gè)方法會(huì)依次遍歷數(shù)組中的元素，找到第一個(gè)滿足條件的元素，然后返回該元素的索引值。如果沒有滿足條件的元素，findIndex()就會(huì)返回-1。

const array1 = [5, 12, 8, 130, 44];
  const result = array1.findIndex(element => element > 10);
  console.log(result); // Output: 1

二、findIndex()方法如何使用

使用findIndex()方法需要傳入一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)接受三個(gè)參數(shù)：數(shù)組元素、元素索引和數(shù)組本身?；卣{(diào)函數(shù)中可以編寫我們需要的條件，如果某個(gè)元素符合條件，findIndex()就會(huì)返回該元素的索引值。

需要注意的是，findIndex()只會(huì)返回第一個(gè)符合條件的元素的索引值，不會(huì)繼續(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：查找對(duì)象中符合條件的元素

在一個(gè)對(duì)象數(shù)組中，我們經(jīng)常需要查找符合某個(gè)條件的對(duì)象。這時(shí)就可以使用findIndex()方法來實(shí)現(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ù)組中的位置

在一個(gè)字符串?dāng)?shù)組中，我們可以使用findIndex()方法來查找某個(gè)字符串在數(shù)組中的位置。

const fruits = ['apple', 'banana', 'orange', 'grape'];
  const result = fruits.findIndex(fruit => fruit === 'orange');
  console.log(result); // Output: 2

五、應(yīng)用示例3：查找包含某個(gè)屬性的對(duì)象

在一個(gè)對(duì)象數(shù)組中，我們可以使用findIndex()方法來查找包含某個(gè)屬性的對(duì)象。

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：查找字符串中某個(gè)字符的位置

在一個(gè)字符串中，我們可以使用findIndex()方法來查找某個(gè)字符的位置。

const str = 'Hello world';
  const result = str.split('').findIndex(char => char === 'w');
  console.log(result); // Output: 6

七、總結(jié)

findIndex()方法是一個(gè)非常實(shí)用的數(shù)組方法，可以幫助我們快速查找符合某個(gè)條件的元素。在實(shí)際開發(fā)中，我們會(huì)經(jīng)常用到它來實(shí)現(xiàn)各種功能。

到此這篇關(guān)于JavaScript數(shù)組方法之findIndex()的用法詳解的文章就介紹到這了,更多相關(guān)js findIndex()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論