如何使用 findIndex() 方法查找数组中的第一个匹配元素的索引？

最新推荐文章于 2025-03-15 15:15:23 发布

原创最新推荐文章于 2025-03-15 15:15:23 发布 · 879 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #柔性数组

JS 数组问题专栏专栏收录该内容

26 篇文章

订阅专栏

使用 `findIndex()` 方法查找数组中第一个匹配元素的索引

简介
findIndex() 方法概述
如何使用 findIndex() 查找第一个匹配元素的索引
- 基本用法
- 使用箭头函数和回调函数
实际项目中的代码示例
- 示例 1：查找第一个符合条件的用户索引
- 示例 2：查找第一个符合条件的商品索引
注意事项
总结

1. 简介

在 JavaScript 中，findIndex() 方法是数组的一种内建方法，用于查找数组中符合某个条件的第一个元素的索引，并返回该索引。如果数组中没有符合条件的元素，findIndex() 会返回 -1。这个方法非常适用于快速定位某个元素的位置，尤其是在需要根据特定条件查找元素时。

2. `findIndex()` 方法概述

findIndex() 方法的语法如下：

arr.findIndex(callback(element[, index[, array]])[, thisArg])

callback：一个函数，用来测试每个元素，直到找到符合条件的第一个元素。该函数接受三个参数：
- element：当前正在处理的元素。
- index（可选）：当前元素的索引。
- array（可选）：调用 findIndex() 的数组。
thisArg（可选）：执行回调函数时使用的 this 值。

findIndex() 返回数组中第一个满足条件的元素的索引，如果没有找到任何符合条件的元素，返回 -1。

3. 如何使用 `findIndex()` 查找第一个匹配元素的索引

基本用法

使用 findIndex() 方法时，回调函数会逐个检查数组元素，直到找到第一个符合条件的元素，并返回其索引。如果没有找到符合条件的元素，返回 -1。

const numbers = [1, 3, 5, 8, 10];
const index = numbers.findIndex(element => element > 5);
console.log(index); // 输出: 3

在这个例子中，findIndex() 查找数组中第一个大于 5 的元素，返回的索引是 3，因为元素 8 在数组中的索引是 3。

使用箭头函数和回调函数

我们可以使用箭头函数来简化代码，使其更加简洁。

const numbers = [1, 3, 5, 8, 10];
const index = numbers.findIndex(element => element % 2 === 0);
console.log(index); // 输出: 3

在这个例子中，回调函数检查数组中第一个偶数的索引，返回的是 3，即第一个偶数是 8，它位于索引 3。

4. 实际项目中的代码示例

示例 1：查找第一个符合条件的用户索引

假设我们有一个用户数组，目标是查找第一个年龄大于 18 岁的用户在数组中的索引：

const users = [
  { id: 1, name: 'Alice', age: 17 },
  { id: 2, name: 'Bob', age: 20 },
  { id: 3, name: 'Charlie', age: 25 }
];

const index = users.findIndex(user => user.age > 18);
console.log(index); // 输出: 1

在此示例中，findIndex() 查找数组中第一个年龄大于 18 岁的用户，返回 1，即 Bob 这个用户的索引。

示例 2：查找第一个符合条件的商品索引

假设我们有一个商品数组，目标是找到价格大于 100 的第一个商品的索引：

const products = [
  { id: 1, name: 'Laptop', price: 90 },
  { id: 2, name: 'Phone', price: 120 },
  { id: 3, name: 'Tablet', price: 150 }
];

const index = products.findIndex(product => product.price > 100);
console.log(index); // 输出: 1

在这个例子中，findIndex() 方法返回了第一个价格超过 100 的商品的索引，即 Phone，它在数组中的索引是 1。

5. 注意事项

返回 -1 时需要检查：如果没有找到符合条件的元素，findIndex() 会返回 -1。因此，在使用时要确保对返回结果进行检查，以避免出现不必要的错误。

例如：
```
const numbers = [1, 3, 5];
const index = numbers.findIndex(num => num > 10);
console.log(index); // 输出: -1
```
性能考虑：findIndex() 方法会遍历数组直到找到第一个符合条件的元素，因此它的时间复杂度是 O(n)，在处理大数组时要注意性能问题。
与 find() 方法的对比：findIndex() 和 find() 方法相似，区别在于：
- find() 返回符合条件的元素本身。
- findIndex() 返回符合条件的元素的索引。
如果你只关心元素的位置而不关心元素本身，findIndex() 更适合。