升级 npm 包后功能变慢

Question

我已经将一个使用 vue/vuex/vuetify 的应用程序升级到了最新的 npm 包（实际上是从 Vuetify 1.5 到 2.0，而对于其他包来说只是次要版本），虽然它可以工作，但 vuex 商店中的一个功能使用reduce() 似乎已经从 500ms 减慢到了将近 10s。

时间来自 Chrome DevTools -> 性能。

我已将 reduce() 替换为 forEach() 循环，这样可以像以前一样加快它的速度。但是，我似乎无法找出为什么它首先变慢了？我怀疑编译过程发生了某种变化？

vuex存储慢码（升级后才可以）：

 var x = items.reduce((acc, item) => { 
    return {[item.id]: item, ...acc}
 });

两种情况下的快速代码：

 items.forEach(el => {
     x[el.id] = el;
 });

Answer 1

.reduce() 代码在每次迭代时都会创建一个新对象，并从之前的累加器对象中复制所有属性。如果有很多很多项，那就是大量的工作；这就是你所说的 O(n²) 算法。

可以向现有对象添加新属性，而不是创建新对象：

var x = items.reduce((acc, item) => { 
    acc[item.id] = item;
    return acc;
}, {});

这是一个 O(n) 过程（n 是数组中的项目数）。