JQuery源码浅析之工具-each

1.介绍

  each是jQuery中一个重要的工具方法.用来遍历数组或者对象,并且执行回调.

2.使用方法

each( obj, callback, args )

obj: 数组或者普通对象(可以认为是一个集合)

callback:回调函数, 遍历obj中的每一个元素就会把该元素作为参数(作为回调函数的this)调用回调函数,callback可以这样写,

             function callback(objItem) {

                     console.log(objItem);

             }

args: 调用回调callback的附加参数,可以这样写回调

             function callback(objItem, args) {

                     console.log(objItem + '   ' + args );

             }

demo:

//each接受2个参数， 数组[1,2,3],回调函数
$.each([1,2,3], function(key, value){
  console.log("[" + key + "]=" + value);
  return false;
});
//输出：
[0]=1
[1]=2
[2]=3
[1,2,3]
//可以看到回调函数具有两个参数，key是数组的索引，value是对应的元素
 
//each接受3个参数， 数组[1,2,3],回调函数，一个额外的参数数组args=[4,5]
$.each([1,2,3], function(arg1, arg2){
  console.log(this + "," + arg1 + "," + arg2);
}, [4, 5]);
//输出：
1,4,5
2,4,5
3,4,5
[1,2,3]
//可以看到回调函数的两个参数就是each的第三个参数args，在函数里边的this就是遍历元素自己

3.jQuery源码

jQuery.extend({
	//...省略其他
	// args is for internal usage only
	each: function( obj, callback, args ) {
		var value,
			i = 0,
			length = obj.length,
			//判断obj是不是数组,数组和普通对象的遍历不一样,在js中数组使用下标遍历array[index],
            //普通对象使用obj[attribute] -> value,有点类似Java 的Map的意思. 
			//在最新的JS版本中将列入新的集合规范,其中就包括Map,当前,js不存在Map集合对象
			isArray = isArraylike( obj );

		if ( args ) {
			if ( isArray ) {
				for ( ; i < length; i++ ) {
					value = callback.apply( obj[ i ], args );

					if ( value === false ) {
						break;
					}
				}
			} else {
				for ( i in obj ) {
					value = callback.apply( obj[ i ], args );

					if ( value === false ) {
						break;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isArray ) {
				//含简单,数组按照下标遍历数组元素
				for ( ; i < length; i++ ) {
					value = callback.call( obj[ i ], i, obj[ i ] );

					if ( value === false ) {
						break;
					}
				}
			} else {//如果是对象,则遍历对象中的属性,例如json格式的数据解析,[{id:001, name:zhangsan}, {id:002, name:lisi}]
				for ( i in obj ) {
					value = callback.call( obj[ i ], i, obj[ i ] );
                    //在回调函数中每一次调用返回false,会结束后面的元素遍历
					if ( value === false ) {
						break;
					}
				}
			}
		}

		return obj;
	},
	//...省略其他
});