数组遍历

前言

数组的遍历方法有很多, 哪一种比较好呢？不同的遍历方法之间性能有差异吗？哪些方法可以提前退出遍历呢？本文用两个简单的 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 之间的差异，以便在不同的场景下选择最适合的方法。

下一篇 数组的遍历二：遍历性能的对比