数组遍历
前言
上一篇 《数组的遍历一：遍历次数的对比》 介绍了遍历次数的比较，本篇介绍遍历性能的对比。
遍历性能对比
题目背景：填充一个固定长度的数组，数组每一项为一个对象，包含一个 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<string, Node> 的数据，查找时使用 Map 的 API 也会快很多。
完
