数组性能问题分析总结

文章转自豆皮范儿-数组性能问题分析总结

数组的操作避免出现O(n^2)的复杂度

数组用来搜索元素的方法时间复杂度为O(n)。运行时间的增长速度与数据大小的增长速度相同，常用的如下

Array.prototype.every()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.forEach()

Array.prototype.map()

Array.prototype.reduce()

Array.prototype.some()

如果将这些方法用在for循环内，或者两个方法嵌套使用，就会造成O(n^2)的复杂度，造成严重的性能问题。

Case 1 嵌套数组搜索操作

// bad case 嵌套了数组搜索操作

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const result = arrayA.filter((v) => arrayB.every((u) => u !== v));

优化方法：使用Set或者Map方法进行数组的搜索操作

// good case 使用Set.has方法，代替Array.prototype.every()

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const set = new Set(arrayB)

const result = arrayA.filter((v) => !set.has(v));

二者的性能比较：数组大小为10000的时候，二者的性能差距已经有800倍左右

Case 2 concat的性能问题

const arrayA = Array.from({ length: 10000 }, (v, i) => i);

const result = {};

// bad case 每次concat都会新生产一个数组，会有较大的性能消耗

arrayA.forEach((a) => {

result.children = (result.children || []).concat(a);

});

// good case 复用已有的数组

arrayA.forEach((a) => {

if (result.children) {

result.children.push(a);

} else {

result.children = [a];

}

});

二者的性能比较：数组大小为10000的时候，二者的性能差距已经有1600倍

Case 3 创建数组操作的性能比较

几种创建10000个元素数组方法的速度比较

可以看到实际速度最快的还是for循环的方法，其它Array.from、解构等一行实现的方法，实际速度并不快

在线JS性能比较平台

在线比较两段代码的性能，以每秒执行次数（ops/s）为指标 https://jsbench.me

字节跳动数据平台前端团队，在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情，除了数据产品相关的研发外，在数据可视化、海量数据处理优化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和积累，有兴趣可以与我们联系。