JavaScript Array findLastIndex() 方法（快速上手）

JavaScript Array findLastIndex() 方法

JavaScript Array findLastIndex() 方法是 JavaScript ES2022（ECMAScript 13）引入的新特性，用于查找数组中最后一个满足指定条件的元素的索引。该方法在某些场景下比传统的 findIndex() 更具实用性，尤其是在需要从数组末尾开始查找的场景中。

核心概念

findLastIndex() 的作用是从后往前遍历数组，找到满足回调函数条件的最后一个元素的索引。如果没有找到匹配的元素，则返回 -1。它和 findIndex() 的区别在于遍历方向和返回结果的定位。

类比于查找书籍中某个关键词出现的最后一个位置，findLastIndex() 像是“从书末一页倒着找”，而 findIndex() 则是“从书首一页顺找”。

基础语法

findLastIndex() 的基本语法如下：

array.findLastIndex(callback(element, index, array), thisArg)

• callback：每个元素被检测时执行的函数，接收三个参数：
  • element：当前元素
  • index：当前元素的索引
  • array：调用 findLastIndex() 的数组
• thisArg（可选）：执行 callback 时使用的 this 值

示例 1：查找偶数最后一个出现的索引

const numbers = [2, 4, 6, 3, 8, 4];
const lastIndex = numbers.findLastIndex(num => num % 2 === 0);
console.log(lastIndex); // 输出 5，因为最后一个偶数是 4，索引为 5

示例 2：查找字符串长度为 3 的最后一个元素索引

const words = ['apple', 'cat', 'dog', 'banana', 'hat'];
const index = words.findLastIndex(word => word.length === 3);
console.log(index); // 输出 4，因为 "hat" 是最后一个长度为 3 的字符串

进阶特性

示例：使用 thisArg

function isGreaterThanValue(element) {
  return element > this.value;
}

const data = [10, 20, 30, 20, 10];
const context = { value: 20 };
const index = data.findLastIndex(isGreaterThanValue, context);
console.log(index); // 输出 2，因为 30 > 20，且是最后一个满足条件的

实战应用

应用 1：找到最近一次登录失败的记录索引

假设有一个日志数组，记录用户登录情况，我们需要找到最近一次失败的登录记录的索引：

const logs = [
  { user: 'Alice', status: 'success' },
  { user: 'Bob', status: 'fail' },
  { user: 'Charlie', status: 'success' },
  { user: 'Bob', status: 'fail' },
  { user: 'Alice', status: 'success' }
];

const lastFailedIndex = logs.findLastIndex(log => log.status === 'fail');
console.log(lastFailedIndex); // 输出 3，表示第 4 个记录是最后一次失败

应用 2：过滤并获取最后一个符合条件的对象

在处理数据时，可能需要找到某个字段满足条件的最后一个对象的索引，用于后续处理：

const products = [
  { id: 1, name: 'Phone', category: 'Electronics' },
  { id: 2, name: 'Shirt', category: 'Clothing' },
  { id: 3, name: 'Laptop', category: 'Electronics' },
  { id: 4, name: 'Tablet', category: 'Electronics' },
  { id: 5, name: 'Watch', category: 'Accessories' }
];

const lastElectronicsIndex = products.findLastIndex(product => product.category === 'Electronics');
console.log(products[lastElectronicsIndex].name); // 输出 'Tablet'

注意事项

1. 不改变原数组：findLastIndex() 只是返回索引值，不会对原数组进行修改。
2. 找不到元素返回 -1：如果没有任何元素满足条件，方法返回 -1，不要直接使用返回值作数组访问索引。
3. 不支持 IE：由于是 ES2022 特性，不支持 Internet Explorer，需考虑兼容性或使用 Babel 转译。
4. 避免在回调中修改数组：虽然不会抛出错误，但修改数组可能导致遍历顺序和索引计算错误。

常见问题

Q: findLastIndex() 和 findIndex() 有什么区别？
A: findIndex() 是从前向后查找，返回第一个符合条件的索引；findLastIndex() 则是从后向前查找，返回最后一个符合条件的索引。

Q: 如果数组中没有符合条件的元素，会返回什么？
A: 返回 -1，因此在使用结果前建议先判断是否不等于 -1，例如：if (index !== -1)。

Q: findLastIndex() 是否会跳过空值？
A: 会跳过空值（undefined 或 null）和稀疏数组中的空位，但具体行为依赖于回调函数的条件判断。

Q: 可以用 findLastIndex() 替代 findLast() 吗？
A: 不可以。findLast() 返回的是最后一个符合条件的元素本身，而 findLastIndex() 返回的是元素的索引。

总结

JavaScript Array findLastIndex() 方法提供了一种从数组末尾查找满足条件元素的索引的便捷方式，适合需要反向查找的开发场景。