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

Question

如题所述

Answer 1

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中比较消耗性能的方法，在性能要求严格时，建议少用。

Answer 2

$.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);
}).

Answer 3

each是jquery封装的迭代器， 使用场景和范围更广， 处理起来会更简便，语法也相对优雅。
for循环由于是系统源生语法，性能上肯定比each要强， 但只能处理特定的数据类型，并且根据业务需求使用起来可能会复杂不少。本回答被网友采纳

Answer 4

具体场景
each跳不出循环，只能等全部循环完成
for可以自定义跳出循环但是写起来代码量多

Answer 5

each是 jq 的，for循环是 js 的，不过for也可以用到JQ上！
具体看情况，如果each不能用就用for，
类似each循环的还有
parent() 遍历祖先
children();遍历后代
siblings(）遍历同辈本回答被网友采纳