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」。

findIndex 函數 JavaScript

JavaScript 的 array.findIndex() 函數用於在滿足函數中指定的條件時傳回數組中存在的第一個元素的索引。該元素由使用者在函數呼叫期間傳遞。如果該元素不存在於數組中，則傳回 -1。

findIndex 方法的語法如下：

arr.findIndex (func(element, index, arr), thisArg)

這裡，「arr」表示正在執行 findIndex 函數的陣列。

findIndex 方法有以下參數：

• func - 這是指定條件的回呼函數。它採用以下參數：

  • o 元素 - 它是陣列中的目前元素

  • o index - 目前元素的索引，可選

  • o arr - 表示執行此方法的陣列也是可選的

• #thisArg - 這是一個可選值

findIndex 方法有兩種使用方式，即使用「return」關鍵字和使用「inline」函數。在這裡，當我們將一個函數傳遞給另一個函數時，它們被稱為「回調函數」。

使用「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”，因為元素“yellow”出現在索引位置“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”，因為元素“blue”出現在給定陣列中的第二個位置。

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”作為輸出。

以上是indexOf 和 findIndex 函數之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！