jquery源码解析：each，makeArray，merge，grep，map详解

jQuery的工具方法，其实就是静态方法，源码里面就是通过extend方法，把这些工具方法添加给jQuery构造函数的。

jQuery.extend({

　　......　　　　

　　each: function( obj, callback, args ) { //$.each(arr , function(i,value){}),第三个参数用于内部调用。此方法就是来遍历数组的，然后取数组中的值进行显示。不能改变原数组arr，跟map一样，但是map返回新数组，而each返回原数组。这里跟原生的forEach和map的回调方法参数不一样，原生的回调方法中，第三个参数是原数组，可以在回调方法中改变原数组的值。但jQuery的回调方法，不会传第三个参数。
　　　　var value,
　　　　　　i = 0,
　　　　　　length = obj.length,
　　　　　　isArray = isArraylike( obj ); //是否是类数组或数组，json（不包括jQuery这种对象形式）返回false

　　　　if ( args ) { //jQuery内部使用
　　　　　　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;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　}

　　　　else { //我们在外面调用时，执行的代码
　　　　　　if ( isArray ) { //如果是类数组
　　　　　　　　for ( ; i < length; i++ ) {
　　　　　　　　　　value = callback.call( obj[ i ], i, obj[ i ] ); //回调方法返回false就停止循环

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

　　　　　　else {
　　　　　　　　for ( i in obj ) { //如果是json对象
　　　　　　　　　　value = callback.call( obj[ i ], i, obj[ i ] );

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

　　　　return obj;
　　},　

　　trim: function( text ) { //core_trim是字符串的trim方法
　　　　return text == null ? "" : core_trim.call( text );
　　},　

　　makeArray: function( arr, results ) { //把所有东西转换成数组，$.makeArray(json) -> []，第二个参数是给内部用的
　　　　var ret = results || [];

　　　　if ( arr != null ) {
　　　　　　if ( isArraylike( Object(arr) ) ) {

　　　　　　//如果arr为数字123，这里会返回false，因为number不是类数组。但是如果是字符串"hello"，Object会把它转成具有length的json对象，所以就返回true。字符串是有length属性的。
　　　　　　　　jQuery.merge( ret,
　　　　　　　　　　typeof arr === "string" ?
　　　　　　　　　　　　[ arr ] : arr
　　　　　　　　);
　　　　　　}

　　　　　　else { //如果传入123，就执行这里，把123push到数组中。假设有第二个参数，$.makeArray(123,{length:0}) ,那么就会出现[].push.call({length:0},123)，这里我做了测试，是没有任何问题的，会变成{length:1,0:123}

　　　　　　　　core_push.call( ret, arr );
　　　　　　}
　　　　}

　　　　return ret;
　　},

　　inArray: function( elem, arr, i ) { //元素是否在arr数组中，从i位置开始找。core_indexOf=[].indexOf
　　　　return arr == null ? -1 : core_indexOf.call( arr, elem, i );
　　},　

　　merge: function( first, second ) { //合并数组
　　　　var l = second.length,
　　　　　　i = first.length,
　　　　　　j = 0;

　　　　if ( typeof l === "number" ) { //第二个参数，可能不是数组或类数组，特殊json。第一个参数必须是。
　　　　　　for ( ; j < l; j++ ) {
　　　　　　　　first[ i++ ] = second[ j ];
　　　　　　}
　　　　}

　　　　else {
　　　　　　while ( second[j] !== undefined ) { //普通json的情况，{0:"0",1:"1"}，但必须是0,1，2...这种
　　　　　　　　first[ i++ ] = second[ j++ ];
　　　　　　}
　　　　}

　　　　first.length = i; //当第一个参数，不是数组时，比如是{0:"0",1:"1",length:2}，length就需要手动改变

　　　　return first;
　　},　　　

　　grep: function( elems, callback, inv ) {

　　//过滤得到一个新数组，$.grep(arr,function(value,index){ return value>2})，arr数组中大于2的，才会返回生成数组。也就是返回true时，才会返回此值生成数组，第三个参数，true，就代表相反的（小于等于2）返回生成数组

　　　　var retVal,
　　　　　　ret = [],
　　　　　　i = 0,
　　　　　　length = elems.length;
　　　　inv = !!inv; //转换成true or false，不传的时候是undefined，就会变成fase.

　　　　for ( ; i < length; i++ ) {
　　　　　　retVal = !!callback( elems[ i ], i ); //转换成true or false
　　　　　　if ( inv !== retVal ) {
　　　　　　　　ret.push( elems[ i ] );
　　　　　　}
　　　　}

　　　　return ret;
　　},

　　map: function( elems, callback, arg ) { //支持普通json,数组，类数组，特殊json（jQuery对象形式）

　　//$.map(arr,function(value,index){ return })，通过回调，把返回的值组成一个全新的数组，返回全新的数组。第三个参数内部调用
　　　　var value,
　　　　　　i = 0,
　　　　　　length = elems.length,
　　　　　　isArray = isArraylike( elems ), //数组和类数组都可以，jQuery对象形式也可以
　　　　　　ret = [];

　　　　if ( isArray ) {
　　　　　　　　for ( ; i < length; i++ ) {
　　　　　　　　　　value = callback( elems[ i ], i, arg );

　　　　　　　　　　if ( value != null ) { //回调返回的值不是null或者undefined，就存入新数组中
　　　　　　　　　　　　ret[ ret.length ] = value;
　　　　　　　　　　}
　　　　　　　　}

　　　　}

　　　　else { //普通json就执行这里，比如：{name:"chaojidan",age:25}
　　　　　　　　for ( i in elems ) {
　　　　　　　　　　value = callback( elems[ i ], i, arg );//callback("chaojidan",name)

　　　　　　　　　　if ( value != null ) {
　　　　　　　　　　　　ret[ ret.length ] = value;
　　　　　　　　　　}
　　　　　　　　}
　　　　}

　　　　return core_concat.apply( [], ret );

　　　　//core_concat=[].concat，以防回调方法返回的是数组形式，那么就会出现复合数组，比如:ret = [[1],[2],[3]],通过concat([1],[2],[3])，合并，返回[1,2,3]
　　},

　　......

})

加油！

巴特西

jquery源码解析：each，makeArray，merge，grep，map详解

最新文章

热门文章