数组的遍历二：遍历性能的对比

数组遍历

前言

上一篇 《数组的遍历一：遍历次数的对比》 介绍了遍历次数的比较，本篇介绍遍历性能的对比。

遍历性能对比

题目背景：填充一个固定长度的数组，数组每一项为一个对象，包含一个 id 和 count。 id 为从 1 开始的自增数字，count 为一个随机数，然后遍历查找到数组的最后一项。

如果提前退出遍历，那耗时肯定会比全部遍历要少，所以这里采用查找最后一项是为了保证所有 API 的遍历次数相同，以便于比较。

这里也会用到2个函数，用来记录从遍历开始和到遍历结束所耗费的时间，单位 ms。

let id = 1;
// 源数组
const array = Array.from({ length: 500000 }).map((v) => ({ id: id++, count: parseInt(Math.random() * 1000) }));
id = null;
console.log(' array 的长度 >> ', array.length);

let apiName = '';
// 记录开始时间
function tiemStart(api) {
    apiName = api;
    console.log(' ');
    console.log(`${api} 性能测试`);
    console.time(apiName);
}
// 记录结束时间
function tiemEnd() {
    console.timeEnd(apiName);
    apiName = '';
}
// 目标ID 
const targetId = 500000;

• for： 原生 for 循环

// for循环
tiemStart('for');
for (let i = 0; i < array.length; i++) {
    const item = array[i];
    if (item.id === targetId) {
        break;
    }
    continue;
}
tiemEnd();

• map： 遍历数组每一项，返回一个新的数组

// map
tiemStart('map');
array.map((v) => v.id === targetId);
tiemEnd();

• forEach：遍历数组每一项，无返回值

// forEach
tiemStart('forEach');
array.forEach((v) => v.id === targetId);
tiemEnd();

• filter：检查数组中是否存在符合条件的元素，返回所有符合条件的元素的数组，若无，则返回一个空数组

// filter
tiemStart('filter');
array.filter((v) => v.id === targetId);
tiemEnd();

• find/findLast：从开头/末尾检查数组中是否存在符合条件的元素，返回第一个符合条件的元素，若无，则返回 undefined

// find/findLast
tiemStart('find');
array.find((v) => v.id === targetId);
tiemEnd();

• findIndex/findLastIndex ：从开头/末尾检查数组中是否存在符合条件的元素，返回第一个符合条件元素的下标，若无，则返回 -1

// findIndex/findLastIndex
tiemStart('findIndex');
array.findIndex((v) => v.id === targetId);
tiemEnd();

• every：检查数组的每一项是否都符合条件，返回 true | false

// every
tiemStart('every');
// 为了让 every 也能遍历相同次数，这里直接返回一个 true
array.every((v) => true);
tiemEnd();

• some：检查数组中是否存在符合条件的元素，返回 true | false

// some
tiemStart('some');
array.some((v) => v.id === targetId);
tiemEnd();

完整代码

总结

结果展示

在测试时，我分别试了数组长度为 5000、1w、5w、10w、50w、80w 的耗时对比，50w 以下的数据耗时波动较大，其整体耗时差距并不明显，到 80w 的时候各个 API 的遍历时间才基本稳定，且有一定的差距。因此最终选取了 100w 和 500w 2个量级做了耗时的比较。

demo 里的数据结构相对简单，所以需要较大的数据量才能有明显的对比，实际业务中可能在更小的量级就能有明显的区别。

• 数组长度为 100w 时的耗时：

L8Dg58.png

• 数组长度为 100w 和 500w 各执行 10 次然后取平均值的结果，并做了排序：

L8sSSg.md.png

从上图可以看出原生 for 循环的优势是非常明显的，其次是 forEach，最差的是 map 循环（可能是因为 map需要返回新的数组，所以需要执行更多的操作），其余几个 API 虽然也有排序，但是整体耗时相差很小。

建议

结合上一篇对遍历次数的比较，在实际业务中，当出现数据量较大（至少10w级）的数组时，遍历建议使用 for 循环，查找单个元素时可以使用 for 或 find, 因为本身它们的耗时要优于其他 API，且它们还可以提前退出，查找多个可以使用 for 或 filter。也可以先将数组使用 for 循环转成 Map 的数据，查找时使用 Map 的 API 也会快很多。

完