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;
},
//...省略其他
});