JQuery map vs Javascript map vs For-loop

时间:2011-07-01 17:15:59

标签: javascript jquery

我正在实现一些自然适合地图的代码。但是,我在列表中有大量的对象,我将要迭代,所以我的问题是哪个是最好的方法:

var stuff = $.map(listOfMyObjects, someFunction())

var stuff = listOfMyObjects.map(someFunction())

或只是

var stuff = new Array(); 
for(var i = 0; i < listOfmyObjects.length; i++){
    stuff.push(someFunction(listOfMyObjects[i]));
}

5 个答案:

答案 0 :(得分:11)

后者(for循环)要快得多。我记得在某个地方看到了一个基准,但我似乎无法找到这个链接。

如果性能真的是一个问题,那么我会使用for循环。它并没有真正掩盖代码。

答案 1 :(得分:11)

这是在jsben.ch中完成的测试用例:http://jsben.ch/#/BQhED

它表明for循环地图比jquery地图快(至少在chrome中)。

答案 2 :(得分:6)

首先,true Objects没有本地.map()方法,也没有.length属性。所以我们要么谈论Arrays要么Array-like-objects(例如jQuery对象)。

但是,与使用原生forwhiledo-while循环相比,迭代的方式并不快。所有其他功能操作都会为每次迭代执行一个函数(猜测是什么)。

当一个对象传递给它时,jQuerys的.each()只会执行一个for-in循环。这是循环对象的最快方法。您可以自己使用for-in并节省开销呼叫。

就可读性而言,另一种“好”方式是使用.keys().map()等ES5功能。例如:

var myObj = {
    foo:  'bar',
    base:  'ball',
    answer: 42,
    illuminati: 23
};

Object.keys( myObj ).map(function( prop ) {
    console.log( myObj[ prop ] );
});

我认为这在可读性,便利性和表现方面是一个非常好的交易。当然,你应该为旧的浏览器使用ES5抽象库。

但同样,在性能方面无法击败原生循环。

答案 3 :(得分:2)

+1给Emil的“测试它”答案:)这总是正确的答案。

但是,原生循环获胜,你可以通过缓存长度来做得更好,这样每次迭代都不会评估.length引用。

for(var i = 0, l = list.length; i < l; i++)

或通过向后执行来避免额外的变量

for(var i = list.length-1; i >= 0; i--)

并且,如果你可以'内联''someFunction',那将会更快。基本上,尽可能避免函数调用和引用。但这只是在你真正关注细节的时候。像这样的优化不太可能很重要。总是测试找到你的瓶颈。

答案 4 :(得分:1)

使用您的html / javascript代码在jsperf创建测试用例。

您将能够看到最有效的方法,以及不同浏览器执行循环的速度。

我会把钱花在本机JavaScript循环上,但你永远不会知道。