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()方法是一個非常實用的數組方法，可以幫助我們快速查找符合某個條件的元素。在實際開發中，我們會經常用到它來實現各種功能。