深入理解JavaScript中的findIndex()

一、什麼是findIndex？

JavaScript中findIndex()方法是ES6中新增的數組方法之一。它用於在數組中查找某個元素並返回元素的索引值，如果沒有找到，則返回-1。

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex((element) => element === 3);

console.log(index);//Output: 2

在上面的代碼示例中，我們創建了一個包含5個元素的數組arr，然後使用findIndex()方法查找元素3的索引值，並將結果存儲在變數index中。最後，我們通過console.log()方法輸出了這個索引值，它應該是2。

二、findIndex的基本用法

findIndex()方法的基本語法如下：

array.findIndex(callback(element[, index[, array]])[, thisArg])

參數解釋：

• callback：必須。用於測試每個元素的函數。接受三個參數：
• element：必須。當前元素。
• index：可選。當前元素的索引。
• array：可選。當前被查找的數組。
• thisArg：可選。執行回調函數時使用的this值。

返回值：

• 找到了符合條件的元素，返回該元素的索引值。
• 未找到符合條件的元素，返回-1。

下面的代碼示例演示了如何使用findIndex()方法來查找一個數組中第一個大於4的元素的索引值。

const arr = [1, 2, 3, 4, 5, 6];

const index = arr.findIndex((element) => (element > 4));

console.log(index);//Output: 4

在上面的代碼示例中，我們定義一個包含6個元素的數組arr。然後我們通過findIndex()方法來查找第一個大於4的元素的索引值，並將結果存儲在變數index中。最後我們通過console.log()方法來輸出這個索引值，它應該是4。

三、findIndex處理多維數組

findIndex()方法不僅可以處理一維數組，還可以處理多維數組。下面的代碼演示了如何在一個二維數組中查找某個元素，並返回元素的二維索引值。

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const searchElement = 5;

const rowIndex = arr.findIndex((r) => r.includes(searchElement));
const colIndex = arr[rowIndex].findIndex((c) => c === searchElement);

console.log(`[${rowIndex}, ${colIndex}]`);//Output: [1, 1]

在上面的代碼示例中，我們定義了一個包含3個數組元素的二維數組arr。然後，我們使用findIndex()方法和includes()方法來查找元素5的行索引，在該行中使用findIndex()方法來查找元素5的列索引。最終，我們將元素的索引值存儲在一個數組中，並通過console.log()方法輸出這個數組。

四、findIndex的合理使用

findIndex()方法在實際項目中經常用於根據某個條件查找數組中的元素。下面的代碼演示了在一個包含所有成年人的數組中，查找第一個女性成年人的索引值。

const people = [
  {name: "Tom", age: 22, gender: "male"},
  {name: "Lily", age: 18, gender: "female"},
  {name: "Jack", age: 24, gender: "male"},
  {name: "May", age: 19, gender: "female"},
];

const adultFemaleIndex = people.findIndex((person) => ((person.gender === 'female') && (person.age >= 18)));

console.log(adultFemaleIndex);//Output: 1

在上面的代碼示例中，我們定義了一個包含4個人的對象數組people。然後，我們使用findIndex()方法找到其中第一個滿足以下條件的元素的索引值：性別為女性且年齡大於等於18歲。

五、總結

本文對JavaScript中的findIndex()方法進行了詳細的闡述。我們講解了findIndex()的基本用法以及如何處理多維數組和實際項目中的應用場景。由於ES6已經成為JavaScript的標準，因此，我們建議在使用JavaScript時優先使用ES6中的新特性。