我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

我在排查一个“神秘卡顿”的 React 聊天应用时，发现了一个有意思的问题。罪魁祸首既不是状态管理，也不是大量重渲染，而是：我定位“最后一条未读消息”的方式。

我用的是大家都很熟的 reverse().find() 套路，这会带来不必要的开销。后来我了解了 ES2023 的 findLast() 和 findLastIndex()，一切就不一样了。

这两个方法并非“锦上添花”，而是能直接消掉瓶颈的“对症工具”。

一个人人会碰到、却常被忽略的问题

设想你在做聊天界面，用户需要一键跳到最后一条未读。第一直觉大概是这样写：

// 我们常掉进的性能坑
const lastUnreadMessage = messages.reverse().find(msg => !msg.read);
const scrollToIndex     = messages.reverse().findIndex(msg => !msg.read);

这确实能跑，但做了两件“重活”：

1. reverse()原地翻转数组（会改变原数据顺序；如果你还想保留原顺序，往往被迫先复制一份再翻转）。

2. find() 在翻转后的数组上再次从头扫描。

在一份有 10,000 条消息的列表上？你先翻转了 10,000 个元素，然后可能又遍历了成千上万次。

这就是你在每次查询时承担的隐性成本。

ES2023 的解法

ES2023 的 findLast() 和 findLastIndex() 天生就是为“从尾部找最后一个匹配项”设计的。写法更简、意图更清晰、性能更稳。

不再需要复制数组，也不用堆临时变量。

// ES2023 的方式：干净、迅速、语义明确
const lastUnreadMessage = messages.findLast(msg => !msg.read);
const scrollToIndex     = messages.findLastIndex(msg => !msg.read);

工作原理

• findLast()：返回最后一个满足条件的元素。

• findLastIndex()：返回最后一个满足条件的元素索引。 二者都会从尾到头遍历，一旦命中立即停止，非常适合“查最后一条”的场景。

const array = [1, 2, 3, 4, 5];
const lastEven      = array.findLast(num => num % 2 === 0);      // 4
const lastEvenIndex = array.findLastIndex(num => num % 2 === 0); // 3

够直观吧？从末尾开始，命中即停，省去你额外的流程控制。

注意点：稀疏数组（Sparse Arrays）

稍微有点绕的是稀疏数组（中间有“空洞”）的处理方式：

// 在索引 1 与 2 处有“空洞”
const sparse = [1, , , 4, 5];

// findLast 把空洞当作 undefined 处理
const result = sparse.findLast(x => x === undefined);       // undefined
const index  = sparse.findLastIndex(x => x === undefined);  // 2（最后一个空洞）

如果你的逻辑高度依赖索引，务必校对一遍：有时你需要先填补空位（如 array.map(x => x ?? default)），或者采用另一种数据结构。 要点是：这两个方法会找到真实的 undefined，也会把空洞视作 undefined 来遍历，但两者语义并不完全相同。

真实影响：数据不会说谎

我在不同数组规模下对两种写法做了基准对比，结论非常直观：

一张对比图：findLast() 相比 reverse().find() 在不同数组规模下稳定带来约 ~50% 的性能提升。

这不是“玄学优化”，而是把时间砍半的直接收益。

在消息频繁刷新、滚动密集的聊天应用中，这会转化为：更顺滑的滚动、更快的定位、更好的整体体验。

上手迁移：一步到位的替换

好消息是：findLast() / findLastIndex() 几乎可以作为 reverse().find() / reverse().findIndex() 的直接替代。

// 之前：能用但低效
const result = array.reverse().find(predicate);
const index  = array.reverse().findIndex(predicate);

// 之后：高效且语义更清楚
const result = array.findLast(predicate);
const index  = array.findLastIndex(predicate);

从性能敏感路径开始替换：

• 聊天消息定位

• 日志尾部扫描

• 表单校验中“最近一次错误/变更”的查找 效果立竿见影且可量化。

为什么这对企业级 React 很重要？

在大规模 React 应用里，这类“微优化”会不断叠加：大量状态更新、实时数据流、复杂交互……每一次节省都很关键。

而且，findLast() / findLastIndex() 不只是快，还更可读： “找到最后一个匹配元素”的代码，永远比“先反转再查第一个”更容易维护。

结论

这两个看似“很小”的新方法，在实时与数据密集型应用里，往往能带来巨大的性能收益。

全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。

最后：

20个前端开发者必备的响应式布局

深入React:从基础到最佳实践完整攻略

python 技巧精讲

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集