Web前端JavaScript中findIndex方法使用示例

更新時間：2025年08月23日 14:24:02 作者：一只小風華~

這篇文章主要介紹了Web前端JavaScript中findIndex方法使用的相關資料,findIndex()?返回第一個符合條件的數(shù)組子項的下標,找到符合條件的之后就不在繼續(xù)遍歷,需要的朋友可以參考下

1. findIndex是什么？

findIndex 是 JavaScript 數(shù)組（Array）自帶的一個方法。
它的核心任務是：遍歷數(shù)組中的每一個元素，用你提供的一個“測試條件”（一個函數(shù)）去檢查每個元素。一旦找到第一個能讓這個“測試條件”返回 true 的元素，它就立刻停止查找，并返回這個元素在數(shù)組中的位置（索引）。
如果遍歷完整個數(shù)組，都沒有任何一個元素能讓“測試條件”返回 true，那么 findIndex 就返回 -1（這是一個通用的“沒找到”的信號）。

2. 它的作用（解決了什么問題？）

想象一下這些場景：

場景1： 你有一個學生名單（數(shù)組），每個學生是一個對象，包含 id, name, score。你想快速知道第一個分數(shù)大于 90 分的學生在名單里排第幾位？
場景2： 你有一個任務列表（數(shù)組），每個任務有 id, title, completed（是否完成）。你想找出第一個還沒完成的任務（completed 為 false）在列表中的位置，以便把它置頂顯示。
場景3： 你在處理用戶輸入的一組數(shù)字，想找到第一個是負數(shù)的數(shù)字出現(xiàn)在第幾個位置。

在這些場景中，你都需要：

檢查每個元素是否符合某個條件。
找到第一個符合條件的。
得到它的位置（索引），而不是元素本身的值。

findIndex 方法就是被設計出來完美解決這類問題的！它幫你省去了手動寫 for 循環(huán)遍歷、設置標志變量、判斷條件、找到后 break 跳出循環(huán)這些繁瑣的步驟。

3. 如何使用？

findIndex 方法接收一個非常重要的參數(shù)：一個回調(diào)函數(shù)（callback function）。這個函數(shù)就是前面說的“測試條件”。它的基本語法是：

const foundIndex = array.findIndex(callbackFunction);

回調(diào)函數(shù)怎么寫？

這個回調(diào)函數(shù)會被 findIndex 自動調(diào)用，通常接收三個參數(shù)（后兩個可選）：

element: 當前正在被檢查的數(shù)組元素（必須）。
index: （可選）當前元素的索引。
array: （可選）調(diào)用 findIndex 方法的那個數(shù)組本身。

最重要的是，這個回調(diào)函數(shù)需要返回一個布爾值（true 或 false）：

如果返回 true，表示當前元素符合你的條件，findIndex 會立刻停止查找，并返回當前元素的索引。
如果返回 false，表示不符合，findIndex 會繼續(xù)檢查下一個元素。

4. 舉個栗子

場景： 找學生名單里第一個分數(shù)大于 90 的學生位置。

const students = [
  { id: 1, name: '小明', score: 85 },
  { id: 2, name: '小紅', score: 92 }, // 第一個 >90 的在這里！
  { id: 3, name: '小剛', score: 78 },
  { id: 4, name: '小麗', score: 95 }
];

// 使用 findIndex
const firstHighScoreIndex = students.findIndex(function(student) {
  // 回調(diào)函數(shù)：檢查當前學生的分數(shù)是否大于90
  return student.score > 90;
});

console.log(firstHighScoreIndex); // 輸出: 1 (因為小紅在數(shù)組索引1的位置)

發(fā)生了什么？

findIndex 從索引 0（小明）開始調(diào)用回調(diào)函數(shù)：小明.score > 90 -> 85 > 90 -> false -> 繼續(xù)。
到索引 1（小紅）：小紅.score > 90 -> 92 > 90 -> true！ -> 立刻停止。
findIndex 返回 1（小紅的索引）。
后面的小剛和小麗就不會再被檢查了。

更簡潔的寫法（箭頭函數(shù)）：

const firstHighScoreIndex = students.findIndex(student => student.score > 90);
console.log(firstHighScoreIndex); // 輸出: 1

5. 如果沒找到呢？

const firstHighScoreIndex = students.findIndex(student => student.score > 100); // 沒人分數(shù)大于100
console.log(firstHighScoreIndex); // 輸出: -1

6. 和它的“親戚們”對比一下，加深理解

find: 這是 findIndex 的“雙胞胎”。它做的事情幾乎一樣：遍歷數(shù)組，用回調(diào)函數(shù)測試，找到第一個符合條件的元素。關鍵區(qū)別在于返回值：find 返回的是符合條件的那個元素本身（比如返回小紅這個學生對象），而 findIndex 返回的是這個元素的索引（1）。你需要元素本身就用 find，需要位置就用 findIndex。
indexOf / lastIndexOf: 這兩個方法也返回索引。但它們找東西的方式簡單粗暴：它們找的是嚴格等于（===） 某個具體值的元素。比如 students.indexOf({id:2, ...}) 是找不到小紅的（因為對象引用不同），或者 [1, 2, 3].indexOf(2) 返回 1。而 findIndex 強大之處在于可以用任何復雜的條件（比如 score > 90）來找，不局限于簡單的值相等。
filter: filter 會返回所有符合條件的元素組成的新數(shù)組。它不在乎位置，也不會在找到第一個后就停止，它會檢查完所有元素。如果你只需要第一個，用 findIndex 或 find 性能更好。
some: some 只關心數(shù)組里有沒有符合條件的元素（返回 true 或 false）。它不關心是哪一個，也不關心位置。找到第一個符合條件的就返回 true 并停止（這點和 findIndex 停止時機類似），但返回值是布爾值而不是索引。

7. 總結(jié) & 關鍵點

findIndex 是數(shù)組方法：用來在數(shù)組中查找元素。
核心功能：找到第一個滿足你提供的“測試函數(shù)”（回調(diào)函數(shù)）的元素，并返回它的索引（位置）。
回調(diào)函數(shù)是核心：你定義查找條件的邏輯就寫在這個函數(shù)里。它接收當前元素（必選）、索引（可選）、數(shù)組本身（可選），并必須返回 true 或 false。
找到就停：一旦回調(diào)函數(shù)對某個元素返回 true，findIndex 立刻返回該索引，停止后續(xù)查找。
找不到返回 -1：如果遍歷完都沒找到符合條件的元素，返回 -1。記得檢查這個返回值！
何時使用：當你需要知道數(shù)組中第一個滿足某個（可能比較復雜的）條件的元素所在的位置時。
優(yōu)勢：比手動寫循環(huán)簡潔，條件靈活（不像 indexOf 只能簡單匹配值）。