每個 React 開發(fā)者都使用這種模式：這是一個性能陷阱
我在排查一個“神秘卡頓”的 React 聊天應(yīng)用時，發(fā)現(xiàn)了一個有意思的問題。罪魁禍?zhǔn)准炔皇菭顟B(tài)管理，也不是大量重渲染，而是：我定位“最后一條未讀消息”的方式。
我用的是大家都很熟的 reverse().find() 套路，這會帶來不必要的開銷。后來我了解了 ES2023 的 findLast() 和 findLastIndex()，一切就不一樣了。
這兩個方法并非“錦上添花”，而是能直接消掉瓶頸的“對癥工具”。
一個人人會碰到、卻常被忽略的問題
設(shè)想你在做聊天界面，用戶需要一鍵跳到最后一條未讀。第一直覺大概是這樣寫：
// 我們常掉進的性能坑
const lastUnreadMessage = messages.reverse().find(msg => !msg.read);
const scrollToIndex = messages.reverse().findIndex(msg => !msg.read);這確實能跑，但做了兩件“重活”：
- reverse()原地翻轉(zhuǎn)數(shù)組（會改變原數(shù)據(jù)順序；如果你還想保留原順序，往往被迫先復(fù)制一份再翻轉(zhuǎn)）。
- find() 在翻轉(zhuǎn)后的數(shù)組上再次從頭掃描。
在一份有 10,000 條消息的列表上？你先翻轉(zhuǎn)了 10,000 個元素，然后可能又遍歷了成千上萬次。
這就是你在每次查詢時承擔(dān)的隱性成本。
ES2023 的解法
ES2023 的 findLast() 和 findLastIndex() 天生就是為“從尾部找最后一個匹配項”設(shè)計的。寫法更簡、意圖更清晰、性能更穩(wěn)。
不再需要復(fù)制數(shù)組，也不用堆臨時變量。
// 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夠直觀吧？從末尾開始，命中即停，省去你額外的流程控制。
注意點：稀疏數(shù)組（Sparse Arrays）
稍微有點繞的是稀疏數(shù)組（中間有“空洞”）的處理方式：
// 在索引 1 與 2 處有“空洞”
const sparse = [1, , , 4, 5];
// findLast 把空洞當(dāng)作 undefined 處理
const result = sparse.findLast(x => x === undefined); // undefined
const index = sparse.findLastIndex(x => x === undefined); // 2（最后一個空洞）如果你的邏輯高度依賴索引，務(wù)必校對一遍：有時你需要先填補空位（如 array.map(x => x ?? default)），或者采用另一種數(shù)據(jù)結(jié)構(gòu)。 要點是：這兩個方法會找到真實的 undefined，也會把空洞視作 undefined 來遍歷，但兩者語義并不完全相同。
真實影響：數(shù)據(jù)不會說謊
我在不同數(shù)組規(guī)模下對兩種寫法做了基準(zhǔn)對比，結(jié)論非常直觀：
圖片
一張對比圖：findLast() 相比 reverse().find() 在不同數(shù)組規(guī)模下穩(wěn)定帶來約 ~50% 的性能提升。
這不是“玄學(xué)優(yōu)化”，而是把時間砍半的直接收益。
在消息頻繁刷新、滾動密集的聊天應(yīng)用中，這會轉(zhuǎn)化為：更順滑的滾動、更快的定位、更好的整體體驗。
上手遷移：一步到位的替換
好消息是：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);從性能敏感路徑開始替換：
- 聊天消息定位
- 日志尾部掃描
- 表單校驗中“最近一次錯誤/變更”的查找 效果立竿見影且可量化。
為什么這對企業(yè)級 React 很重要？
在大規(guī)模 React 應(yīng)用里，這類“微優(yōu)化”會不斷疊加：大量狀態(tài)更新、實時數(shù)據(jù)流、復(fù)雜交互……每一次節(jié)省都很關(guān)鍵。
而且，findLast() / findLastIndex() 不只是快，還更可讀： “找到最后一個匹配元素”的代碼，永遠比“先反轉(zhuǎn)再查第一個”更容易維護。
結(jié)論
這兩個看似“很小”的新方法，在實時與數(shù)據(jù)密集型應(yīng)用里，往往能帶來巨大的性能收益。
