鍍金池/ 問答/HTML/ js數(shù)組遍歷性能比較問題

js數(shù)組遍歷性能比較問題

閑來無聊想看看數(shù)組各個(gè)遍歷的方法性能如何
不跑不知道一跑嚇一跳

var nativeMap = function (arr, callback) {
    return arr.map(callback);
};
var customMap = function (arr, callback) {
    var ret = [];
    for (var i = 0; i < arr.length; i++) {
        ret.push(callback(arr[i], i, arr));
    }
    return ret;
};

var forMap = function (arr, callback) {
    var ret = [];
    for(let elem of arr){
        ret.push(callback(elem))
    }
    return ret;
};

var run = function (name, times, fn, arr, callback) {
    // var start = (new Date()).getTime();
    console.time('遍歷時(shí)長(zhǎng)');
    let newArr;
    for (var i = 0; i < times; i++) {
        newArr = fn(arr, callback);
    }
    console.log(name);
    console.timeEnd('遍歷時(shí)長(zhǎng)');
};

var callback = function (item) {
    return item+'qwe';
};
let testArr = ['b','c','d','e','f','d','e','f','d','e','f','d','e','f','d','e','f','d','e','f'];
let length = testArr.length;
run('map遍歷', length, nativeMap, testArr, callback);
run('for循環(huán)', length, customMap, testArr, callback);
run('for-of循環(huán)', length, forMap, testArr, callback);
map遍歷
遍歷時(shí)長(zhǎng): 1.491ms
for循環(huán)
遍歷時(shí)長(zhǎng): 0.249ms
for-of循環(huán)
遍歷時(shí)長(zhǎng): 0.268ms

map遍歷比for循環(huán)慢我也忍了。為啥es6定義的for-of循環(huán)比for循環(huán)還慢。
讓我很費(fèi)解

回答
編輯回答
忘了我

clipboard.png

這么短的時(shí)間是不準(zhǔn)的

2017年3月21日 12:50
編輯回答
不二心

樓上說得對(duì),時(shí)間太短,后兩個(gè)的性能很難區(qū)分。其次同樣因?yàn)闀r(shí)間太短,還可能因?yàn)?code>callback里干的事不一樣,所以map的耗時(shí)看起來更多。當(dāng)你試圖提升某個(gè)東西的性能時(shí),一般都需要額外的開銷,當(dāng)你用這些開銷換來的性能提升不足以抵消開銷時(shí),性能就反而會(huì)下降;當(dāng)負(fù)載提上去時(shí)性能提升就會(huì)大于開銷,這時(shí)就會(huì)有明顯的性能提升。我曾經(jīng)用for循環(huán)遍歷一個(gè)幾千個(gè)元素的數(shù)組進(jìn)行分揀歸類,瀏覽器直接就卡死了,還吃掉了2G+的內(nèi)存,換了map后幾秒鐘就遍歷完了。

2017年9月16日 12:13
編輯回答
骨殘心

這么短的時(shí)間進(jìn)行比較是不準(zhǔn)確的,另外這也只是一次執(zhí)行的結(jié)果吧

2017年5月24日 06:19