JavaScript专题之jQuery通用遍历方法each的实现 about blog HOT 12 OPEN

纠正一个小细节：
`
var arr = Array.from({length: 1000000}, (v, i) => i);

console.time('for')
var i = 0;
for (; i < arr.length; i++) {
i += arr[i];
}
console.timeEnd('for')
`
这里循环内i跳步了，实际上没有循环1000000次。for用时大概在37ms左右，而不是0.04。

from blog.

平时用forEach很少 我才知道forEach 不能跳出循环 以前没有注意

from blog.

 function each(obj, callback) {
	    var i = 0;
	    var length = obj.length
	    for (; i < length; i++) {
	        value = callback(i, obj[i]);
	    }
	}
     
     function eachWithCall(obj, callback) {
	    var i = 0;
	    var length = obj.length
	    for (; i < length; i++) {
	        value = callback.call(obj[i], i, obj[i]);
	    }
	}
     
     function eachWithApply(obj, callback) {
     	var i = 0;
     	var length = obj.length;
     	for(; i < length; i ++) {
     		value = callback.apply(obj[i], [i,obj[i]]);
     	}
     }
     
     var arr = Array.from({length: 10000000}, (v, i) => i)
	 
	    console.time('each')
		var i = 0;
		each(arr, function(index, item){
		    i += item;
		})
		console.timeEnd('each')
		
		
		console.time('eachWithCall')
		var j = 0;
		eachWithCall(arr, function(index, item){
		    j += item;
		})
		console.timeEnd('eachWithCall')
		
		console.time('eachWidthApply')
		var i = 0;
		each(arr, function(index, item){
		    i += item;
		})
		console.timeEnd('eachWidthApply')
		
		//each: 815.879150390625ms
		//eachWithCall: 308.455078125ms
		//eachWidthApply: 828.31591796875ms

这里我的打印的each比eachWithCall慢？？？，博主能给我说说吗？

from blog.

感谢作者分享哈！

但是因为 $("p").each() 方法是定义在 jQuery 函数的 prototype 对象上面的，而 $.data()方法是定义 jQuery 函数上面的，调用的时候不从复杂的 jQuery 对象上调用，速度快得多。所以我们推荐使用第一种写法。

这里是不是笔误了, $.data() 应该是 $.each

from blog.

@ArthurFree 哈哈，感谢指出~ o(￣▽￣)ｄ

from blog.

刚看到博主的文章，正在学习阶段，非常受益，还有一个小问题想请教一下，就是each传递的第三个参数是什么情况，不太明白，

from blog.

@eva1963 第三个参数就是额外参数的意思了，你看下面使用到的 callback.apply。

from blog.

问题

这个地方试了下感觉下面两个没啥区别。。不知道是哪里没 get 到，郁闷

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

for (; i < length; i++) { callback.call(obj[i], i, obj[i]) ) }

有什么区别呢

$.each( [0, 1, 2, 3, 4, 5], function(i, n){
    // 这里判断也会 return，多个break 是为了什么？求解 
    if (i > 2) return false; 
    console.log( "Item #" + i + ": " + n );
 });

break是为了for循环不再向下执行了，跟callback没有关系了

from blog.

if (i > 2) return false;
i大于2后 出现return 后面console.log不再执行 但是each的for循环还在持续不过不再有输出
目的是i > 2后不再输出
所以用break直接跳出each的for循环 从而结束each 省去了后面的循环
@zouxiaomingya

from blog.

@blue1314

 function each(obj, callback) {
	    var i = 0;
	    var length = obj.length
	    for (; i < length; i++) {
	        value = callback(i, obj[i]);
	    }
	}
     
     function eachWithCall(obj, callback) {
	    var i = 0;
	    var length = obj.length
	    for (; i < length; i++) {
	        value = callback.call(obj[i], i, obj[i]);
	    }
	}
     
     function eachWithApply(obj, callback) {
     	var i = 0;
     	var length = obj.length;
     	for(; i < length; i ++) {
     		value = callback.apply(obj[i], [i,obj[i]]);
     	}
     }
     
     var arr = Array.from({length: 10000000}, (v, i) => i)
	 
	    console.time('each')
		var i = 0;
		each(arr, function(index, item){
		    i += item;
		})
		console.timeEnd('each')
		
		
		console.time('eachWithCall')
		var j = 0;
		eachWithCall(arr, function(index, item){
		    j += item;
		})
		console.timeEnd('eachWithCall')
		
		console.time('eachWidthApply')
		var i = 0;
		each(arr, function(index, item){
		    i += item;
		})
		console.timeEnd('eachWidthApply')
		
		//each: 815.879150390625ms
		//eachWithCall: 308.455078125ms
		//eachWidthApply: 828.31591796875ms

这里我的打印的each比eachWithCall慢？？？，博主能给我说说吗？

我用博主一模一样的代码 大部分测试的结果跟博主的结果是一样的，但是也有个例，会出现call慢的情况
我觉得应该call没有性能问题，数据量都这么大的情况下，相关ms数也很小，说明没有明显的性能问题

from blog.

each方法，个人感觉这么写更酷一些：

function each(obj, callback) {
  const arraySw = isArrayLike(obj);
  for (let i in obj) {
    i = arraySw ? Number(i) : i;
    if (arraySw && isNaN(i)) {
      continue;
    }

    if (callback.call(obj[i], i, obj[i]) === false) {
      break;
    }
  }

  return obj;
}

from blog.

性能比较时， 普通for 循环和 each 函数的差异是否源于each函数会用多的执行上下文呢？

from blog.