数组遍历
前言
数组的遍历方法有很多, 哪一种比较好呢？不同的遍历方法之间性能有差异吗？哪些方法可以提前退出遍历呢？本文用两个简单的 demo 来对比一下数组的各种遍历方法，同时也回答一下上述的疑问。
遍历次数对比
题目背景：从 [1, 2, 3, 4, 3, 2, 1] 这个数组中查找是否存在元素 3 。
这里用到2个函数，用来记录遍历的次数和重置遍历的次数，根据打印的遍历次数就能知道是否提前退出了遍历，同时也打印出了遍历结束后返回值。
const array = [1, 2, 3, 4, 3, 2, 1];
console.log('源数组长度 >> ', array.length);
// 记录遍历次数
let count = 0;
// 重置 count
function resetCount(api) {
console.log(' ');
console.log(`${api} 遍历次数 >> ${count}`);
count = 0;
}
// 更新 count
function recordCount() {
count++;
}
-
for： 原生for循环
// for循环
for (let i = 0; i < array.length; i++) {
recordCount();
const item = array[i];
if (item === 3) {
break;
}
continue;
}
resetCount('for');
-
map： 遍历数组每一项，返回一个新的数组
// map
const mapResult = array.map((v) => {
recordCount();
return v === 3;
});
resetCount('map');
console.log(mapResult);
-
forEach：遍历数组每一项，无返回值
// forEach
const forEachResult = array.forEach((v) => {
recordCount();
return v === 3;
});
resetCount('forEach');
console.log(forEachResult);
-
every：检查数组的每一项是否都符合条件，返回true | false
// every
const everyResult = array.every((v) => {
recordCount();
return v === 3;
});
resetCount('every');
console.log(everyResult);
-
some：检查数组中是否存在符合条件的元素，返回true | false
// some
const someResult = array.some((v) => {
recordCount();
return v === 3;
});
resetCount('some');
console.log(someResult);
-
filter：检查数组中是否存在符合条件的元素，返回所有符合条件的元素的数组，若无，则返回一个空数组
// filter
const filterResult = array.filter((v) => {
recordCount();
return v === 3;
});
resetCount('filter');
console.log(filterResult);
-
find/findLast：从开头/末尾检查数组中是否存在符合条件的元素，返回第一个符合条件的元素，若无，则返回undefined
// find/findLast
const findResult = array.find((v) => {
recordCount();
return v === 3;
});
resetCount('find');
console.log(findResult);
-
findIndex/findLastIndex：从开头/末尾检查数组中是否存在符合条件的元素，返回第一个符合条件元素的下标，若无，则返回-1
// findIndex/findLastIndex
const findIndexResult = array.findIndex((v) => {
recordCount();
return v === 3;
});
resetCount('findIndex');
console.log(findIndexResult);
总结
结果展示
从上述结果可以看出：
- 能从特定条件提前退出遍历的有：
for、every、some、find、findLast、findIndex、findLastIndex - 无法提前退出遍历的有：
map、forEach、filter
根据这个结论，希望能帮助大家了解这些 API 之间的差异，以便在不同的场景下选择最适合的方法。
下一篇 数组的遍历二：遍历性能的对比
