一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

原文链接:https://juejin.cn/post/7312664784070557731 作者:zayyo

(0)
上一篇 2023年12月16日 上午10:32
下一篇 2023年12月16日 上午10:42

相关推荐

发表评论

登录后才能评论