闲来无聊想看看数组各个遍历的方法性能如何
不跑不知道一跑吓一跳
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('遍历时长');
let newArr;
for (var i = 0; i < times; i++) {
newArr = fn(arr, callback);
}
console.log(name);
console.timeEnd('遍历时长');
};
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循环', length, customMap, testArr, callback);
run('for-of循环', length, forMap, testArr, callback);
map遍历
遍历时长: 1.491ms
for循环
遍历时长: 0.249ms
for-of循环
遍历时长: 0.268ms
map遍历比for循环慢我也忍了。为啥es6定义的for-of循环比for循环还慢。
让我很费解
楼上说得对,时间太短,后两个的性能很难区分。其次同样因为时间太短,还可能因为
callback
里干的事不一样,所以map
的耗时看起来更多。当你试图提升某个东西的性能时,一般都需要额外的开销,当你用这些开销换来的性能提升不足以抵消开销时,性能就反而会下降;当负载提上去时性能提升就会大于开销,这时就会有明显的性能提升。我曾经用for
循环遍历一个几千个元素的数组进行分拣归类,浏览器直接就卡死了,还吃掉了2G+的内存,换了map
后几秒钟就遍历完了。