浅谈jQuery源码（二）——$.each

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

 

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;
},