JavaScript 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″。如果搜索元素不在数组中，则输出为”-1″。

Console.log (months.indexOf('Aug'))

由于元素在数组中不存在，indexOf函数返回“-1”。

JavaScript中的findIndex函数

JavaScript的array.findIndex()函数用于当满足函数中指定的条件时，返回数组中第一个找到的元素的索引。用户在函数调用期间传递元素。如果元素不存在于数组中，则返回-1。

findIndex方法的语法如下：

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

这里，“arr”表示执行findIndex函数的数组。

findIndex方法有以下参数：

func - 这是指定条件的回调函数。它有以下参数：
- element - 它是数组中的当前元素。
- index - 它是当前元素的索引，且可选。
- 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”，因为元素“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’在第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))

输出结果

它将产生以下输出：