5分钟，让你的JavaScript代码性能提升10倍

众所周知，网站的成功与失败在很大程度上取决于其性能表现。然而，性能并非仅指网站加载速度，它还涵盖了响应性、流畅度和效率等方面。影响网站性能快慢的因素多种多样，包括但不限于页面渲染速度、网络传输速度、服务器响应时间等。然而，在这些因素中最为重要且关键的是JavaScript 的执行速度。

让我们继续探讨一些经常影响 JavaScript 执行速度的常见问题！

问题一、数组和函数的组合写法

我看过很多初学或者刚入职场的新人写的一些代码，发现他们经常会犯同一个问题。就是随意的将 .map 与 .filter 或 .reduce 结合在一起，进行链式调用：

例如：

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

尽管在处理少量数据时可能看起来没有问题，并且这样编写代码也能够满足业务需求。然而，当我们随意地组合这些方法来处理数据时，它们可能会多次遍历所有元素。随着数据量的增大，当涉及到数以千计甚至数以万计的条目时，JavaScript 代码的执行速度会变得极慢，这将直接影响整体性能。

解决方案

当我们需要对拿到的数据进行映射和过滤时,只使用 reduce 方法。reduce 是在解决我们的需求的通顺性能最好的选择。

你可能会问为什么呢？

因为reduce 方法只会遍历一次数组，并同时执行映射和过滤两种操作，它帮助我们节省运行的时间和迭代的次数。

例如：

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

将转换为：

// 使用 reduce 方法对数组进行映射和过滤操作，初始值为空数组 []
arr.reduce((result, element) => {
    // 对数组每个元素执行映射操作，将结果存储在 mappedElement 变量中
    const mappedElement = f(element);
    // 检查映射后的元素是否符合条件
    if (test(mappedElement)) {
        // 若符合条件，则将映射后的元素添加到结果数组 result 中
        result.push(mappedElement);
    }
    // 返回结果数组 result，供下一次迭代使用
    return result;
}, []);

问题二 代码中没意义的的引用更新

如果我们使用的是React.js 或任何其他重视不可变性的库，那么使用扩展运算符创建新引用是一个常见的操作，当我们更新组件的状态/属性时： 例如

// 创建名为 arrState 的状态值和用于更新该状态值的函数 setArrayState，初始值为 undefined
const [arrState, setArrayState] = useState();

// 使用展开运算符 [...] 创建新数组的副本，并将其作为参数传递给 setArrayState 函数
setArrayState([...newArrayState]);

我们可能在编写代码时，经常会这样来进行引用更新，但是对于使用 .map、.filter 和其他函数的结果进行扩展到新数组来说这样写是毫无意义的，因为我们只是创建了一个具有新引用的数组，而使用 .map、.filter 和其他函数返回的结果却是一个新的数组

示例：

// 创建名为 arrState 的状态值和用于更新该状态值的函数 setArrayState，初始值为 undefined
const [arrState, setArrayState] = useState();

// 通过 map 函数对 arrState 数组中的每个元素执行函数 f，并使用展开运算符 [...] 创建新数组的副本，
// 将处理后的新数组作为参数传递给 setArrayState 函数，用于更新状态值 arrState
setArrayState([...arrState.map(e => f(e))]);

解决方案

当我们使用以下方法时，只需要移除没有的的扩展运算符即可：

• .map
• .filter
• .reduce - 使用新数组累加器-结果
• .reduceRight - 使用新数组累加器-结果
• .flat
• .flatMap
• .concat
• .toReversed
• .toSorted
• .toSpliced