请问这段js代码从性能角度上怎么优化

Question

请问下面这段js代码从性能角度上怎么优化
sortBy和findIndex来组lodash

dataHandle(data) {
    return sortBy(data, obj => findIndex(this.extendForm, (i) => i.assetsId === obj.assetsId));
}

data和this.extendForm都为数组,data要根据this.extendForm的顺序排序
这段代码作用是为数组排序,根据两个数组中共有的assetsId进行排序

Answer 1

引自免费微信小程序：皆我百晓生

针对您提供的JavaScript代码片段，为了提高性能，我们可以采用以下方式进行优化：

1. 减少函数调用次数：在当前实现中，sortBy 对于每个 data 中的对象都会执行一次 findIndex。这会带来较高的时间复杂度。我们可以通过预处理 this.extendForm 以构建一个查找表（映射 assetsId 到其索引），从而将查找操作的时间复杂度从 O(n) 降低到接近 O(1)。

   const extendFormMap = this.extendForm.reduce((acc, item, index) => {
     acc[item.assetsId] = index;
     return acc;
   }, {});
   
   dataHandle(data) {
     return data.sort((a, b) => extendFormMap[a.assetsId] - extendFormMap[b.assetsId]);
   }
   

2. 利用原生 sort 方法：这里我们直接使用 JavaScript 的 Array.prototype.sort() 方法，并提供比较函数，而不是使用 lodash 的 sortBy 函数，进一步减少函数调用开销。

3. 异常处理：在实际应用中，可能存在的问题是 data 中的元素不一定能在 this.extendForm 中找到对应的 assetsId，此时我们需要添加异常处理机制。若不关心缺失的情况，可以赋予一个较大的值作为默认索引。

   const extendFormMap = this.extendForm.reduce((acc, item, index) => {
     acc[item.assetsId] || (acc[item.assetsId] = index);
     return acc;
   }, {});
   
   dataHandle(data) {
     return data.sort((a, b) => {
       const aIndex = extendFormMap[a.assetsId] || Number.MAX_SAFE_INTEGER;
       const bIndex = extendFormMap[b.assetsId] || Number.MAX_SAFE_INTEGER;
       return aIndex - bIndex;
     });
   }
   

通过以上优化，性能得到了提升，但需要注意的是，如果数据量非常大，内存消耗可能会增加，因为我们需要额外存储查找表。另外，如果 this.extendForm 的顺序频繁变化，每次排序前都需要重新构建查找表。对于这种情况，可以根据具体需求权衡是否值得预先计算查找表以换取排序性能的提升。