JavaScript 数组 findIndex() 方法

JavaScript findIndex() 语法

findIndex() 是 JavaScript 数组的一个方法，它用于找出数组中满足测试函数的第一个元素对应的下标。

语法：

arr.findIndex(callbackFn, thisArg)

说明：

findIndex() 方法接收以下 2 个参数。

• callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
• thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数只接收以下 3 个参数。

• element（必选）：当前处理的数组元素。
• index（可选）：当前处理的数组元素的索引。
• array（可选）：当前操作的数组。

findIndex() 会访问数组中的所有索引，包括空槽元素（即没有值的数组元素）。对于空槽元素，callbackFn 接收到的 element 值为 undefined。

findIndex() 一旦找到满足条件的元素就会停止遍历，这在处理大型数组或需要快速查找第一个匹配项的索引时非常高效。

JavaScript findIndex() 摘要

JavaScript findIndex() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript findIndex() 方法是如何使用的。

示例 1：简单数组使用 findIndex()

const arr = [1, 3, 5, 7, 9];
const result = arr.findIndex(function(element) {
    return element > 5;
});
console.log(result);

运行结果如下。

3

分析：

在这个例子中，findIndex() 方法用于找出第一个大于 5 的数组元素的下标，也就是 7 对应的下标。需要清楚的是，findIndex() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。

在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 findIndex() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
const result = arr.findIndex(function (element) {
    return element > 5;
});

// 方式2：使用箭头函数
const result = arr.findIndex(element => element > 5);

示例 2：复杂数组使用 findIndex()

const fruitArr = [
    { name: "apple", price: 8.5 },
    { name: "banana", price: 15.8 },
    { name: "cherry", price: 29.8 }
];
const result = fruitArr.findIndex((element) => {
    return element.price > 20;
});
console.log(result);

运行结果如下。

2

分析：

在这个例子中，数组 fruitArr 的每一个元素都是一个对象。findIndex() 方法用于找出第一个 price 属性大于 20 的数组元素的下标，也就是 {name: "cherry", price: 29.8} 的下标。

当然了，如果你熟悉箭头函数，上面例子还可以进一步简写。下面两种方式是等价的：

// 方式1
const result = fruitArr.findIndex((element) => {
    return element.price > 20;
});

// 方式2
const result = fruitArr.findIndex(element => element.price > 20);

只不过当 return 的内容比较复杂时，方式 2 的可读性可能没有方式 1 的好。

find() 与 findIndex() 的区别

ES6 新增了 2 个用于查找数组元素的方法：find() 和 findIndex()，它们之间的区别如下。

• find()：用于查找数组中符合条件的 “元素”。
• findIndex()：用于查找数组中符合条件的 “元素的索引”。

简单点来说，find() 查找的是 “元素的值”，findIndex() 查找的是 “元素的位置（下标）”。

示例 3：find() vs findIndex()

const arr = [21, 31, 57, 64, 80];

// 使用find()
const resultValue = arr.find((element) => {
    return element % 2 === 0;
});
console.log(resultValue);

// 使用findIndex()
const resultIndex = arr.findIndex((element) => {
    return element % 2 === 0;
});
console.log(resultIndex);

运行结果如下。

64 
3

4 种方法总结

find()、findIndex()、findLast()、findLastIndex() 这 4 种方式一看就是 “亲兄弟”，它们都是通过回调函数来找出元素或下标。很多小伙伴都会把它们搞混，下面总结对比一下。