常用的数组遍历方式有很多，如最经典的for循环

for (var i = 0; i < arr.length; i++) {}

再者有了for…in

for (var i in arr) {}

forEach

arr.forEach(function (i) {});

map

arr.map(function (i) {});

然后ES6有了更为方便的for…of

for (let i of arr) {}

此篇不考虑作用差异，仅对这些方式的性能做一次比较。

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

1.对比方案

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

1.1 数组arr:

let arr = [];
    for (let i = 0; i < 10000000; i++) {
        arr[i] = i;
    }

    console.log(arr);   // [0, 1, 2, 3, ... , 9999999]

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…in遍历

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

结果：1539.45ms

1.3 forEach遍历

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

结果：190.75ms

1.4 map遍历

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

结果：2014.65ms

1.5 for…of遍历

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

结果：129.5ms

3 结果分析

通过对比可知，遍历时间

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

3.1 *为何for… in会慢？

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

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

数据量大时，遍历性能的差距尤为明显； for系遍历总体性能好于forEach、map等数组方法 你大爷毕竟是你大爷，性能最佳的还是经典的for循环遍历 forEach性能优于map for…of要兼容低版本设备的话还是算了