浅谈jQuery源码(二)——$.each

jQueryeach()方法使得遍历一个数组或者对象的代码段变得十分的简洁。

 

1、each()的用法:

1) each接受2个参数:数组、回调函数(回调函数具有两个参数,key是数组的索引,value是对应的元素)

$.each([1,2,3], function(key, value) {
  	console.log("[" + key + "]=" + value);
});

输出:

[0]=1

[1]=2

[2]=3

 

2) each接受3个参数:数组、回调函数(回调函数的参数是第三个参数数组的元素,函数里的this就是遍历元素自己)、一个额外的参数数组

$.each([1,2,3], function(arg1, arg2) {
  	console.log(this + "," + arg1 + "," + arg2);
}, [4, 5]);

输出:

1,4,5

2,4,5

3,4,5

 

2、jQuery的each()源码如下:

each: function(obj, callback, args) {
	// obj是需要遍历的数组或者对象
	// callback是处理数组/对象的每个元素的回调函数,它的返回值会中断循环的过程
	var value, i = 0, length = obj.length, isArray = isArraylike(obj);//判断是不是数组
	if (args) {
		if (isArray) { // 数组
			for (; i < length; i++ ) {
				value = callback.apply(obj[i], args); // 若args = [arg1, arg2, arg3],则相当于:callback(args1, args2, args3),callback里边的this指向了obj[i]
				if ( value === false ) // 当callback函数返回值会false的时候,注意是全等!循环结束
					break;
			}
		} 
		else { // 非数组
			for (i in obj) { // 遍历对象
				value = callback.apply(obj[i], args);
				if ( value === false ) 
					break;
			}
		}
	} 
	else {
		if (isArray) {
			for (; i < length; i++) {
				value = callback.call(obj[i], i, obj[i]); // 相当于callback(i, obj[i])。然后callback里边的this指向了obj[i]
				if (value === false) 
					break;
			}
		} 
		else {
			for (i in obj) {
				value = callback.call(obj[i], i, obj[i]);
				if (value === false) 
					break;
			}
		}
	}
	return obj;
},

版权声明:本文为zhouziyu2011原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。