1. findIndex是什么？

• findIndex 是 JavaScript 數(shù)組（Array）自帶的一個(gè)方法。

• 它的核心任務(wù)是：遍歷數(shù)組中的每一個(gè)元素，用你提供的一個(gè)“測(cè)試條件”（一個(gè)函數(shù)）去檢查每個(gè)元素。一旦找到第一個(gè)能讓這個(gè)“測(cè)試條件”返回 true 的元素，它就立刻停止查找，并返回這個(gè)元素在數(shù)組中的位置（索引）。

• 如果遍歷完整個(gè)數(shù)組，都沒(méi)有任何一個(gè)元素能讓“測(cè)試條件”返回 true，那么 findIndex 就返回 -1（這是一個(gè)通用的“沒(méi)找到”的信號(hào)）。

2. 它的作用（解決了什么問(wèn)題？）

 想象一下這些場(chǎng)景：

• 場(chǎng)景1： 你有一個(gè)學(xué)生名單（數(shù)組），每個(gè)學(xué)生是一個(gè)對(duì)象，包含 id, name, score。你想快速知道第一個(gè)分?jǐn)?shù)大于 90 分的學(xué)生在名單里排第幾位？

• 場(chǎng)景2： 你有一個(gè)任務(wù)列表（數(shù)組），每個(gè)任務(wù)有 id, title, completed（是否完成）。你想找出第一個(gè)還沒(méi)完成的任務(wù)（completed 為 false）在列表中的位置，以便把它置頂顯示。

• 場(chǎng)景3： 你在處理用戶輸入的一組數(shù)字，想找到第一個(gè)是負(fù)數(shù)的數(shù)字出現(xiàn)在第幾個(gè)位置。

 在這些場(chǎng)景中，你都需要：

1. 檢查每個(gè)元素是否符合某個(gè)條件。

2. 找到第一個(gè)符合條件的。

3. 得到它的位置（索引），而不是元素本身的值。

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

3. 如何使用？

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

const foundIndex = array.findIndex(callbackFunction);

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

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

1. element: 當(dāng)前正在被檢查的數(shù)組元素（必須）。

2. index: （可選）當(dāng)前元素的索引。

3. array: （可選）調(diào)用 findIndex 方法的那個(gè)數(shù)組本身。

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

• 如果返回 true，表示當(dāng)前元素符合你的條件，findIndex 會(huì)立刻停止查找，并返回當(dāng)前元素的索引。

• 如果返回 false，表示不符合，findIndex 會(huì)繼續(xù)檢查下一個(gè)元素。

4. 舉個(gè)栗子 

場(chǎng)景： 找學(xué)生名單里第一個(gè)分?jǐn)?shù)大于 90 的學(xué)生位置。

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

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

console.log(firstHighScoreIndex); // 輸出: 1 (因?yàn)樾〖t在數(shù)組索引1的位置)

發(fā)生了什么？

1. findIndex 從索引 0（小明）開(kāi)始調(diào)用回調(diào)函數(shù)：小明.score > 90 -> 85 > 90 -> false -> 繼續(xù)。

2. 到索引 1（小紅）：小紅.score > 90 -> 92 > 90 -> true！ -> 立刻停止。

3. findIndex 返回 1（小紅的索引）。

4. 后面的小剛和小麗就不會(huì)再被檢查了。

 更簡(jiǎn)潔的寫(xiě)法（箭頭函數(shù)）：

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

5. 如果沒(méi)找到呢？

const firstHighScoreIndex = students.findIndex(student => student.score > 100); // 沒(méi)人分?jǐn)?shù)大于100
console.log(firstHighScoreIndex); // 輸出: -1

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

• find: 這是 findIndex 的“雙胞胎”。它做的事情幾乎一樣：遍歷數(shù)組，用回調(diào)函數(shù)測(cè)試，找到第一個(gè)符合條件的元素。關(guān)鍵區(qū)別在于返回值：find 返回的是符合條件的那個(gè)元素本身（比如返回小紅這個(gè)學(xué)生對(duì)象），而 findIndex 返回的是這個(gè)元素的索引（1）。你需要元素本身就用 find，需要位置就用 findIndex。

• indexOf / lastIndexOf: 這兩個(gè)方法也返回索引。但它們找東西的方式簡(jiǎn)單粗暴：它們找的是嚴(yán)格等于（===） 某個(gè)具體值的元素。比如 students.indexOf({id:2, ...}) 是找不到小紅的（因?yàn)閷?duì)象引用不同），或者 [1, 2, 3].indexOf(2) 返回 1。而 findIndex 強(qiáng)大之處在于可以用任何復(fù)雜的條件（比如 score > 90）來(lái)找，不局限于簡(jiǎn)單的值相等。

• filter: filter 會(huì)返回所有符合條件的元素組成的新數(shù)組。它不在乎位置，也不會(huì)在找到第一個(gè)后就停止，它會(huì)檢查完所有元素。如果你只需要第一個(gè)，用 findIndex 或 find 性能更好。

• some: some 只關(guān)心數(shù)組里有沒(méi)有符合條件的元素（返回 true 或 false）。它不關(guān)心是哪一個(gè)，也不關(guān)心位置。找到第一個(gè)符合條件的就返回 true 并停止（這點(diǎn)和 findIndex 停止時(shí)機(jī)類(lèi)似），但返回值是布爾值而不是索引。

7. 總結(jié) & 關(guān)鍵點(diǎn)

• findIndex 是數(shù)組方法：用來(lái)在數(shù)組中查找元素。

• 核心功能：找到第一個(gè)滿足你提供的“測(cè)試函數(shù)”（回調(diào)函數(shù)）的元素，并返回它的索引（位置）。

• 回調(diào)函數(shù)是核心：你定義查找條件的邏輯就寫(xiě)在這個(gè)函數(shù)里。它接收當(dāng)前元素（必選）、索引（可選）、數(shù)組本身（可選），并必須返回 true 或 false。

• 找到就停：一旦回調(diào)函數(shù)對(duì)某個(gè)元素返回 true，findIndex 立刻返回該索引，停止后續(xù)查找。

• 找不到返回 -1：如果遍歷完都沒(méi)找到符合條件的元素，返回 -1。記得檢查這個(gè)返回值！

• 何時(shí)使用：當(dāng)你需要知道數(shù)組中第一個(gè)滿足某個(gè)（可能比較復(fù)雜的）條件的元素所在的位置時(shí)。

• 優(yōu)勢(shì)：比手動(dòng)寫(xiě)循環(huán)簡(jiǎn)潔，條件靈活（不像 indexOf 只能簡(jiǎn)單匹配值）。

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

最新評(píng)論