10 秒内优化您的 JS 代码

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

性能是任何 JavaScript 应用的命脉，对用户体验和整体成功有着深远的影响。它不仅仅关乎速度，更关乎响应速度、流畅性和效率。性能卓越的 JS 应用能够提升加载速度，提供更流畅的交互体验，并吸引更多用户。用户期望获得无缝体验，而性能优化正是确保应用满足用户期望的关键。性能提升还能带来更好的 SEO 排名、更高的转化率和更强的用户留存率。它是用户满意度的基石，因此，优先考虑并持续优化 JavaScript 应用的性能至关重要。

让我们开始解决问题吧！

问题一：数组函数的组合

我这辈子已经审核过无数的 PR（Pull Request，拉取请求），其中有一个问题我见过很多次。当有人像这样以任意顺序将`.map`与`.filter`或`.reduce`结合使用时，就会出现这个问题：

arr.map(e => f(e)).filter(e => test(e)).reduce(...)

当这些方法结合起来使用时，它们会遍历所有元素几次。对于少量数据来说，这几乎没什么区别，但当数组变大时，计算时间就会更长。

简易解决方案

仅使用reduce该方法reduce是同时需要映射和过滤时的最佳解决方案。它只需遍历数组一次即可同时执行这两个操作，从而节省时间和迭代次数。

例如，这个：

arr.map(e => f(e)).filter(e => test(e))

将转变为：

arr.reduce((result, element) => {
    const mappedElement = f(element)
    if(test(mappedElement)) result.push(mappedElement)
    return result
}, [])

问题二：无用的参考更新

如果你在使用React.js或任何其他对响应式和重新渲染要求不可变性的库，就会出现这个问题。当你更新组件的状态/属性时，使用展开运算符创建新引用是很常见的操作：

...
const [arrState, setArrayState] = useState()
...
...
setArrayState([...newArrayState])
...

然而，将.map、.filter和其他函数的结果分散到一个新数组中以供新引用是没有意义的，因为你只会创建一个指向结果的新引用数组，而这个新引用本身就是一个包含新结果的新数组：

...
const [arrState, setArrayState] = useState()
...
...
setArrayState([...arrState.map(e => f(e))])
...

解决方案

使用时只需移除无用的扩展运算符：

• 。地图
• 。筛选
• .reduce - 使用新的数组累加器结果
• .reduceRight - 使用新的数组累加器结果
• 。平坦的
• .flatMap
• .concat
• .toReversed
• .toSorted
• .toSpliced

欢迎在评论区分享你所知道的其他 JS 反模式，我会把它们都添加到文章中！

请务必关注我的dev.to 博客和Telegram 频道；很快会有更多内容发布。