数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
