jquery中使用each()和for循环哪个好些

Posted 2023-05-13

jquery的each比原生的for循环慢很多！！为什么？

其实查看jQuery的源代码，发现each的代码很简单，但为什么性能和原生的for循环相差几十倍呢？

jquery的each的核心代码

for (; i < length; i++)   
         value = callback.call(obj[i], i, obj[i]);  
         if (value === false)   
             break;  
           
     

看着很简单，但为什么会慢很多呢？

编写测试代码如下：

var length=300000;  
 function GetArr()   
     var t = [];  
     for (var i = 0; i < length; i++)   
         t[i] = i;  
       
     return t;  
   
  
 function each1(obj, callback)   
     var i = 0;  
     var length = obj.length  
     for (; i < length; i++)   
         value = callback(i, obj[i]);  
         /* if ( value === false ) 去掉了判断 
              break; 
          */  
       
   
 function each2(obj, callback)   
     var i = 0;  
     var length = obj.length  
     for (; i < length; i++)   
         value = callback(i, obj[i]);/*去掉了call*/  
         if (value === false)   
             break;  
           
       
   
 function each3(obj, callback)   
     var i = 0;  
     var length = obj.length  
     for (; i < length; i++)   
         value = callback.call(obj[i], i, obj[i]);/*自己写的call*/  
         if (value === false)   
             break;  
           
       
   
  
 function Test1()   
     var t = GetArr();  
     var date1 = new Date().getTime();  
     var lengtharr = t.length;  
     var total = 0;  
     each1(t, function (i, n)   
         total += n;  
     );  
     var date12 = new Date().getTime();  
     console.log("1Test" + ((date12 - date1)));  
   
 function Test2()   
     var t = GetArr();  
     var date1 = new Date().getTime();  
     var total = 0;  
     each2(t, function (i, n)   
         total += n;  
     );  
     var date12 = new Date().getTime();  
     console.log("2Test" + ((date12 - date1)));  
   
 function Test3()   
     var t = GetArr();  
     var date1 = new Date().getTime();  
     var total = 0;  
     each3(t, function (i, n)   
         total += n;  
     );  
     var date12 = new Date().getTime();  
     console.log("3Test" + ((date12 - date1)));  
   
 function Test4()   
     var t = GetArr();  
     var date1 = new Date().getTime();  
     var total = 0;  
     $.each(t, function (i, n)   
         total += n;  
     );  
     var date12 = new Date().getTime();  
     console.log("4Test" + ((date12 - date1)));  
 

运行测试，发现，第一个和第二个相差不是很大，这说明由于break这个判断导致的性能差异很少，

但第二个和第三个，第四个偏差就就不止一倍了，而第二个和第三个唯一的区别就是调用了call，看来call会导致性能损失，因为call会切换上下文，当然jQuery的each慢还有其他原因，它还在循环中调用了其他的方法，call只是一个原因罢了。

因此可以说call，和apply都是js中比较消耗性能的方法，在性能要求严格时，建议少用。

参考技术A $.each()
中的参数可以直接在bind
等方法中使用。for的话。需要用参数传递过去。
如果for循环中药使用
item的id就需要如下写法，否则可能会传递不过去。
tempALL.find("#depTag").bind("click","id":item.id,function(event)
toMore(event.data.id,0);
).
如果是each
就可以直接
tempALL.find("#depTag").bind("click",function(event)
toMore(item.id,0);
). 参考技术B each是jquery封装的迭代器， 使用场景和范围更广， 处理起来会更简便，语法也相对优雅。
for循环由于是系统源生语法，性能上肯定比each要强， 但只能处理特定的数据类型，并且根据业务需求使用起来可能会复杂不少。 参考技术C 具体场景
each跳不出循环，只能等全部循环完成
for可以自定义跳出循环但是写起来代码量多 参考技术D each是 jq 的，for循环是 js 的，不过for也可以用到JQ上！
具体看情况，如果each不能用就用for，
类似each循环的还有
parent() 遍历祖先
children();遍历后代
siblings(）遍历同辈

jQuery中each的用法之退出循环和结束本次循环

jQuery中each类似于javascript的for循环 
但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想要实现类似的功能就只能用return,
break           用return false
continue      用return ture