let arrs = new Array(100000);
console.time('for');
for (let i = 0; i < arrs.length; i++) {
};
console.timeEnd('for');
console.time('forEach');
arrs.forEach((arr) => {
});
console.timeEnd('forEach');
for: 2.263ms
forEach: 0.254ms
在10萬這個級別下,forEach 的性能是 for 的十倍
for: 1.703857421875ms
forEach: 0.239013671875ms
在100萬這個量級下,forEach 的性能是和 for 一致的。
for: 2.302001953125ms
forEach: 2.081787109375ms
在1000萬級以上的量級上 , forEach
的性能遠遠低於for
的性能。
for: 7.581787109375ms
forEach: 22.27978515625ms
那其實在 https://jsperf.com/ 裏面測試,還是 for 的性能更好一些(10萬次內)。
個人理解:
在 forEach 的語法上:
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
可以看到 forEach 是有回調的,它會按升序爲數組中含有效值的每一項執行一次 callback,且除了拋出異常以外,也沒有辦法中止或者跳出 forEach 循環。那這樣的話執行就會額外的調用棧和函數內的上下文。
而 for 循環則是底層寫法,不會產生額外的消耗。
那在實際業務中沒有很大的數組時,for 和 forEach 的性能差距其實很小,forEach 甚至會優於 for 的時間,且更加簡潔,可讀性也更高,一般也會優先使用 forEach 方法來進行數組的循環處理。
在兼容性上,肯定是 for 循環的兼容優於 forEach 的了。