資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究indexOf 和 findIndex 函式的區別
JavaScript 是一種動態程式語言，可以在客戶端和伺服器端使用。JavaScript 用於建立互動式網頁。它有許多框架，例如 React JS、Angular JS、Node JS 等。JavaScript 提供了一些方法，可以使用這些方法獲取指定元素的索引。indexOf 和 findIndex 就是這些方法。
JavaScript 中的 indexOf 函式
JavaScript 中的 indexOf 函式允許我們在陣列中搜索元素，並返回該陣列中找到的第一個索引。如果找不到該元素，則返回 -1。此方法的語法如下所示
array.indexOf(element, index)
這裡，array 是執行 indexOf 方法的元素列表。Element 表示要搜尋的元素，index 是應從其開始搜尋的位置。
示例
讓我們考慮一個月份名稱的陣列。我們將使用 indexOf 方法查詢月份“Mar”的索引。
const months = ['Jan', 'Feb', 'Mar', 'April', 'May']
console.log (months.indexOf('Mar'))
輸出
2
它將輸出索引“2”。如果搜尋元素不存在於陣列中，則輸出“-1”。
Console.log (months.indexOf('Aug'))
由於該元素不存在於 months 陣列中，因此 indexOf 函式返回“-1”。
JavaScript 的 findIndex 函式
JavaScript 的 array.findIndex() 函式用於返回陣列中存在的元素的第一個找到的索引，當它滿足函式中指定的條件時。元素由使用者在函式呼叫期間傳遞。如果元素不存在於陣列中，則返回 -1。
findIndex 方法的語法如下所示
arr.findIndex (func(element, index, arr), thisArg)
這裡，“arr”表示正在執行 findIndex 函式的陣列。
findIndex 方法具有以下引數
func − 這是指定條件的回撥函式。它採用以下引數
o element − 它是在陣列中的當前元素
o index − 它是當前元素的索引，並且是可選的
o arr − 它也是可選的，表示正在執行此方法的陣列
thisArg − 它是一個可選值
findIndex 方法可以用兩種方式使用，即使用“return”關鍵字和使用“內聯”函式。這裡，由於我們將一個函式傳遞給另一個函式，因此它們被稱為“回撥函式”。
使用“return”關鍵字
讓我們假設我們有一個顏色陣列，如紅色、綠色、藍色、黃色、橙色。我們想要黃色顏色的索引。
示例
const colors = ['red', 'green', 'blue', 'yellow', 'orange']
function is_yellow (element) {
return element === 'yellow'
}
result = colors.findIndex(is_yellow)
console.log ("The index of 'yellow' is: " + result)
輸出
它將產生以下輸出
The index of 'yellow' is: 3
這裡，我們得到輸出“3”，因為元素“黃色”存在於索引位置“3”。
使用行內函數
上面提到的相同程式也可以按如下方式編寫
示例
let colors = ['red', 'green', 'blue', 'yellow', 'orange']
let index = colors.findIndex(color => color === 'blue')
console.log("The index of color 'blue' is: " + index)
輸出
它將產生以下輸出
The index of color 'blue' is: 2
我們得到輸出“2”，因為元素“藍色”在給定陣列的第 2 個位置。
indexOf 和 findIndex 函式的區別
indexOf 和 findIndex 方法之間有兩個主要區別
第一個區別
“indexOf 方法將元素作為引數；而在 findIndex 方法中，回撥函式作為引數傳遞。”
示例
以下示例解釋了這一點
const fruits = ['apple', 'banana', 'mango', 'grapes']
console.log("The index of 'banana' is: " + fruits.indexOf('banana'))
console.log ("Index: " + fruits.findIndex(index => index === 'banana'))
輸出
它將產生以下輸出
The index of 'banana' is: 1 Index: 1
在這兩種情況下，輸出都為“1”，因為元素“banana”存在於第一個索引處。在 indexOf 方法中，我們正在搜尋的元素作為引數傳遞，並且此函式比較陣列的每個元素，並返回找到該元素的第一個位置。
在 findIndex 中，此方法將陣列中的每個元素髮送到函式，該函式將檢查陣列中是否存在指定元素。如果找到該元素，則返回布林值，即“True”，並且 findIndex 方法返回該特定索引。
在這兩種情況下，如果值或元素不存在於陣列中，則兩種方法都返回“-1”作為輸出。
第二個區別
indexOf 方法適用於獲取簡單元素的索引。但是，當我們尋找更復雜的事物（例如物件）的索引時，此方法無法正常工作。這是由於“引用相等性”。
根據引用相等性，只有當正在比較的兩個物件引用完全相同的物件時，比較才會返回 true。在 JavaScript 中，除非兩個相同的物件引用同一個物件，否則它們並不相同。
示例
讓我們透過以下示例來理解這一點
const obj = {banana:3}
const array = [{mango:7}, obj, {orange:5}]
console.log ("Index: " + array.indexOf({banana:3}))
console.log ("Index: " + array.findIndex(index => index.banana === 3))
console.log ("Index: " + array.indexOf(obj))
輸出
它將產生以下輸出
Index: -1 Index: 1 Index: 1
在第一個 indexOf 函式中，即使物件是相同的，它也無法在給定陣列中找到它，因此它返回“-1”。
在最後使用的 indexOf 方法中，由於我們正在傳遞實際引用，因此它返回該物件的索引。findIndex 方法檢查給定陣列中的所有鍵值對，因此找到並返回該特定物件的正確索引。
結論
indexOf 和 findIndex 方法都返回指定元素的第一個索引。indexOf 方法將要返回其索引的元素作為引數，而 findIndex 將函式作為引數。但是這兩個函式都返回“-1”作為輸出。
549 次瀏覽
