JavaScript 数组 findLastIndex() 方法

JavaScript findLastIndex() 语法

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

findLastIndex() 会从数组的末尾（右侧）开始向前（左侧）查找。如果能找到一个元素使得回调函数返回 true，则 findLastIndex() 会立即停止迭代并返回该元素的索引。如果找不到元素，则会返回 -1。

语法：

arr.findLastIndex(callbackFn, thisArg)

说明：

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

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

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

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

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

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

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

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

JavaScript findLastIndex() 摘要

JavaScript findLastIndex() 示例

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

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

const arr = [3, 9, 1, 12, 50, 21];
const result = arr.findLastIndex(function(element) {
    return element > 10;
});
console.log(result);

运行结果如下。

5

分析：

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

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

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

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

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

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

运行结果如下。

2

分析：

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

findLast() 与 findLastIndex() 的区别

findLast() 和 findLastIndex() 这两个方法非常相似，它们之间的区别如下。

• findLast()：用于查找数组中符合条件的 “元素”。
• findLastIndex()：用于查找数组中符合条件的 “元素的下标”。

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

示例 3：findLast() vs findLastIndex()

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

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

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

运行结果如下。

80
4

4 种方法总结

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