javascript 遍历数组的性能比较

常用的数组遍历方法有for,foreach,for in ,for of ,map,some,filter,reduce等，后面3个还没写进去哈，另外浏览器安装的不是很多，后续可以更全面点。

这里只简单列举几个数据，更严谨的方法应该是每种方法使用一定数据量来修正，但是这次目的并不是为了得出准确的平均值，只是为了比较。

 

代码：

function byFor(arr) {
        var tb=new Date().getTime();
        for(var i=0;i<arr.length;i++){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log('byFor Time:'+(te-tb))
    }
    function byForLength(arr) {
        var tb=new Date().getTime();
        var l=arr.length;
        for(var i=0;i<l;i++){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log('byForLength Time:'+(te-tb))
    }
    function byMap(arr) {
        var tb=new Date().getTime();
        arr.map(item=>{
            return item+1;
        });
        var te=new Date().getTime();
        console.log('byMap Time:'+(te-tb))
    }
    function byForIn(arr) {
        var tb=new Date().getTime();
        for(var i in arr){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log('byForIn Time:'+(te-tb))
    }

    function byForeach(arr) {
        var tb=new Date().getTime();
        arr.forEach(i=>{
            arr[i]=i+1;
        });
        var te=new Date().getTime();
        console.log('byForeach Time:'+(te-tb))
    }
    function byForOf(arr) {
        var tb=new Date().getTime();
        for(var value of arr){
            arr[0]=value;
        }
        var te=new Date().getTime();
        console.log('byForOf Time:'+(te-tb))
    }
    
    function getArrByFor(num) {
        var arr=[];
        var tb=new Date().getTime();
        for(var i=0;i<num;i++){
            arr.push(i);
        }
        var te=new Date().getTime();
        console.log(num+' getArrByFor Time :'+(te-tb));
        return arr;
    }
   

    // 获得1000数量级的数组
    var arr_1000=getArrByFor(1000);
    byFor(arr_1000);
    byForLength(arr_1000);
    byForIn(arr_1000);
    byMap(arr_1000);
    byForOf(arr_1000);
    byForeach(arr_1000);

    // 获得100000数量级的数组
    var arr_100000=getArrByFor(100000);
    byFor(arr_100000);
    byForLength(arr_100000);
    byForIn(arr_100000);
    byMap(arr_100000);
    byForOf(arr_100000);
    byForeach(arr_100000);

 // 获得100000 数量级的数组
    var arr_100=getArrByFor(1000000);
    byFor(arr_100);
    byForLength(arr_100);
    byForIn(arr_100);
    byMap(arr_100);
    byForOf(arr_100);
    byForeach(arr_100);

运行结果

chorm:

360:

opera:

edge:

		测试环境
数量级	循环方法	win7+chrom74	win7+360（8.1+45）	欧朋58	IE Edge
1000	for	0	0	0	0
	加强版for	0	0	0	1
	for in	0	0	0	0
	map	0	0	0	0
	for of	0	0	0	无法支持
	foreach	0	0	0	0
100000	for	0	1	0	9
	加强版for	0	1	0	4
	for in	10	29	8	16
	map	4	2	23	5
	for of	1	6	0	无法支持
	foreach	2	2	2	4
1000000	for	3	2	8	85
	加强版for	3	2	3	35
	for in	189	291	261	174
	map	19	44	212	63
	for of	29	69	26	无法支持
	foreach	15	36	21	45

for in不管在哪个数量级，哪个浏览器中，效率是最低的，从表格可以粗略看出，

for和加强版的for除了在ie中，其他都相差不多，应该是浏览器做过优化

for in和for of的效率并没有for好，而map 表现一般

ie下的for循环和foreach是有性能区别的，如果说循环体里还有其他操作，这个时间量级可能会翻天覆地