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,52,4,53,4,5[1,2,3]//可以看到回调函数的两个参数就是each的第三个参数args，在函数里边的this就是遍历元素自己

3.jQuery源码

jQuery.extend({//...省略其他// args is for internal usage onlyeach: 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;},//...省略其他});