2023indexOf 和 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”作为输出。