map真比forEach要快?

114 阅读1分钟

相信在各位前端小伙伴们面试的时候经常会被问到map和forEach的区别,偶尔面试官追问一下哪个效率更快一点,小伙伴们去百度搜一下第一个答案也是这样的:

image.png

下次再问到的时候理所当然会说:map运行的更快。

事实究竟是这样吗?

怎么想都觉得一个额外开空间和调用栈的东西不太可能会比不开的还要快,于是亲自试了一下分别使用for,forEach,map进行1亿次循环的耗时:

const arr = Array.from({length : 100000000})

function calc(val) {
    let a = val/2
    return a + val
}


// 测试for循环
const for_t1 = new Date().getTime()
for (let i = 0; i < 100000000; i++) {
    calc(i)
}
const for_t2 = new Date().getTime()

console.log("for:",for_t2 - for_t1);

// 测试forEach
const forEach_t1 = new Date().getTime()
arr.forEach((item, idx) => {
    calc(idx)
})
const forEach_t2 = new Date().getTime()

console.log("forEach:",forEach_t2 - forEach_t1);


// 测试map
const map_t1 = new Date().getTime()
arr.map((item, idx) => {
    calc(idx)
})
const map_t2 = new Date().getTime()

console.log("map:",map_t2 - map_t1);

最后的运行结果是这样的:

node:

image.png

chrome:

image.png

真相大白,forEach和map的效率其实并没有差很多,而且很符合直觉的是forEach循环在我的机器环境下甚至比map还要快一点!

关于循环/迭代的效率,掘金上还有大佬发了其他更专业的文章分析了一下,大家可以去找一找~

所以最后还是鼓励大家觉得不对的地方多去写代码证实一下,也许就发现不知道的东西了~