for、for...of、forEach、for...in、map数组遍历性能比较

先上结果：

性能: for循环遍历 > for…of遍历 > forEach遍历 > for…in遍历 > map遍历

注：filter、every、some跟forEach/map相近，不常用所以本次不加入比较。

1、对比方案

本次采用最直观的方式进行对比：通过对高数量级数组的遍历时间进行比较。

1.1 数组arr:

let arr = Array(10000).fill(0);

1.2 对比函数:

function getAverageTime (cb) {
    let _start = +new Date();

    for (let k = 0; k < 20; k++) {
        cb();   //  遍历函数
    }

    return (+new Date() - _start) / 20 + 'ms'
}

其中cb为遍历函数。 我们通过20次求平均值的方式来推算遍历的时间，以此作为比较依据。

2.比较

1.1 经典的for循环遍历

getAverageTime(function () {
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        // ...
    }
})

结果： 6.3ms

1.2 for…of遍历

getAverageTime(function () {
    for (let item of arr) {
        // ...
    }
})

结果： 129.5ms

1.3 forEach遍历

getAverageTime(function () {
    arr.forEach(item => {})
})

结果： 190.75ms

1.4 for…in遍历

getAverageTime(function () {
    for (let i in arr) {
        let item = arr[i];
        // ...
    }
})

结果： 1539.45ms

1.5 map遍历

getAverageTime(function () {
    arr.map(item => {})
})

结果： 2014.65ms

3. 结果分析

通过对比可知，遍历时间

for循环遍历 < for...of遍历 < forEach遍历 < for...in遍历 < map遍历

3.1 为何for… in会慢？

因为for … in语法是第一个能够迭代对象键的JavaScript语句，循环对象键（{}）与在数组（[]）上进行循环不同，引擎会执行一些额外的工作来跟踪已经迭代的属性。

4. 因此可以大致可以得出以下几点：

1. 数据量大时，遍历性能的差距尤为明显；
2. for系遍历总体性能好于forEach、map等数组方法 你大爷毕竟是你大爷，性能最佳的还是经典的for循环遍历
3. forEach性能优于map
4. 遍历的性能可以作为以后开发的参考，毕竟数据量不大的时候差异可忽略不计，更多的可以根据实际作用来考虑遍历方式，比方说for系遍历可以break中途退出而forEach/map不行。