呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #JavaScript #ES2023 #前端 #新特性
虽然但是,传统是这么做的吗(?)
Stop using .reverse().find(): meet findLast() - Matt Smith

AI 摘要:本文介绍了 JavaScript 新增的 findLast() 与 findLastIndex(),它们能高效地从数组末尾开始查找元素,解决传统 .slice().reverse().find() 的性能与可读性问题。文章展示了实际应用场景(如日志查找、消息列表、React 组件状态管理等),并详细说明了使用注意事项、最佳实践和浏览器支持情况。


author Matt Smith
#优质博文 #JavaScript #React #ES2023 #前端 #新特性
Finally, safe array methods in JavaScript - Matt Smith

AI 摘要:传统的 JavaScript 数组方法如 .sort() 、 .reverse() 和 .splice() 会直接修改原数组,可能带来难以排查的 bug,尤其在 React 等依赖 不可变数据 (immutability) 的框架中。ES2023 新增了 toSorted() 、 toReversed() 和 toSpliced() ,它们返回新数组而不会变异原始数据,从而提升代码可维护性和安全性。这一细小的语法改进带来了巨大的开发体验优化,特别是在现代前端应用中。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 新的不可变 (non-mutating) 方法
• toSorted():返回排序后的新数组,允许自定义比较函数
• toReversed():返回反转后的新数组,避免破坏原数组
• toSpliced():返回元素增删后的新数组,保持原数组不变

2. 在 React 中的应用场景
• 保证状态不可变性,触发正确的重新渲染
• 常见用法:展示反向排序的任务列表、根据条件生成新数组
• 避免额外的深拷贝操作(如 structuredClone())

3. 浏览器与环境支持
• Chrome/Edge 110+、Safari 16+、Firefox 115+、Node.js 20+ 原生支持
• 旧环境可依赖 core-js 提供 polyfill
• 与其他 ES2023 特性互补,如 optional chaining、top-level await


author Matt Smith
 
 
Back to Top