jQuery源码分析之$.map函数

<pre name="code" class="javascript">// 传入一个空函数作为参数，返回一个空数组// 空函数的返回值为undefined，而null或undefined值会被$.map()忽略掉。看最后的判断if(value!=null)var result = $.map( [1, 2, 3], $.noop );document.writeln( result.length ); // 0

测试代码1：

 var a = {'1':'gg','2':'love','4':'meimei',length:5};//打印true，length是5alert(Array.prototype.slice.call(a) instanceof Array);//打印undefinedalert(Array.prototype.slice.call(a)[0]);

测试代码2：

//callback可以多于两个参数var result=$.map([1,2],function(ele,index,input){// alert(input+"第三个参数的值："+arguments[2]) if(ele<=2)return "返回值"+ele;},0)alert(result instanceof Array);//打印true，map返回Array类型。如果把上面if语句修改为if(elem<2)那么result只有一个结果"返回值1"alert(result[0]+result[1]);//打印"返回值1" "返回值2"

测试代码3：

function Test(){alert("invoked!");}alert( Test());//返回值是undefined，也就是没有new对象的情况下，直接调用没有返回值的函数，返回undefined//$.map函数也只是返回符合条件的结果，否则没有返回值，那么调用callback就会返回undefined//alert(undefined!=null)//返回false，也就是当callback函数没有返回值的情况下，if(value!=null)是false，那么不会添加到数组中//否者value不是undefined，if条件满足了，直接添加进去

测试代码4：

//如果是对象该如何迭代呢?请看下面var obj={name:"xx",sex:"female"};//for(var i in obj){alert(i+"->"+obj[i])}//输出name->xx；sex->femalealert($.map(obj,function(elem,index,input){//alert(elem+"->"+elem[index]);//输出xx->undefined和female->undefined//如果是对象，那么就是拿着obj[i]来调用function这个函数，所以elem就是obj[i];//同时如下源码可以看出：第二个参数就是obj对象的属性名称，而不是属性值，所以index就是属性名称//for ( i in elems ) {//value = callback( elems[ i ], i, arg );// }       },12))//如果是迭代数组呢？请看下面var arr=[1,2,3]$.map(arr,function(elem,index){alert(elem+"->"+index);//1->0,2->1，3->2。index就是下标，而elem就是arr[index].所以对于map函数来说第一个参数是值，第二个是键!})

测试代码5：

$.map( [0,1,2], function(n){ return [ n, n + 1 ];});//输出：[0, 1, 1, 2, 2, 3]//源码如果是return ret的话，输出将会是：[[0,1], [1,2], [2,3]]//上面就是为什么源码要用concat的原因，因为他可以结合多个数组.（有元素才有下标所以元素在前，下标在后；同时map有return）var arr=[[0,1], [1,2], [2,3]];//打印6alert(Array.prototype.concat.apply([],arr).length);

$.map源码：

// arg is for internal usage onlymap: function( elems, callback, arg ) {var value,i = 0,length = elems.length,//必须是类数组，返回值为true或者false。拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，//这里你可以当做是个非负整数串来理解)。不具有数组所具有的方法,这就是类数组!                  isArray = isArraylike( elems ),ret = [];// Go through the array, translating each of the items to their new values//如果是数组类型，从0开始遍历，对每一个对象单独调用callback函数，callback(elementOfArray,indexInArray)if ( isArray ) {for ( ; i < length; i++ ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret.push( value );}}// Go through every key on the object,} else {for ( i in elems ) {value = callback( elems[ i ], i, arg );//第一个是键值，第二个是键名！if ( value != null ) {ret.push( value );}}}return concat.apply( [], ret );}

总结：

（1）在JS原生的map方法中也是有return语句的（forEach没有），原生的js中回调函数第一个参数是键值，第二个参数是键名，第三个参数是原生的数组。在jQuery中由于主要的代码为callback.call(elem[i],i,args)也就是说他的第一个参数也是键值，第二个参数也是键名，第三个参数是额外的参数（说明第三个参数有区别）。同时this也是有区别的，在JS的map中this指向map调用时候传入的第二个参数,如果传入为undefined或者null那么就是window，但是这里的this如果没有指定就是指向window对象!

在实例next，prev等方法的构建中有这样一句代码，对于理解jQuery.map方法特别有用：

var ret = jQuery.map( this, fn, until );

其中的fn中用了三个参数来接受jQuery.map给该函数fn传入的参数，第一个是DOM，第二个是下标，第三个就是这里的until，表示同方向进行遍历的时候判断结束的元素

nextUntil: function( elem, i, until ) {return jQuery.dir( elem, "nextSibling", until );}

用这个额外的参数实现了如prevUntil,nextUntil,parentUntil实例函数的构建。同时还有一个问题，如果我们遍历调用对象的所有的parentNode,那么对于每一个调用对象的DOM都会形成一个DOM集合，那么返回的结果应该是[[elem],[elem],[elem]]类型，那么这部分的功能又是通过jQuery.map来完成的

 var arr=[[1,2],[3,4]]; var result=[].concat.apply([],arr); //打印[1, 2, 3, 4] console.log(result);

（2）可以用Array.prototype.concat.apply([],arr)合并多个数组成为一个数组对象!

（3）map函数强调的是修改数组元素(只有返回值不是undefined才会放入结果数组中)，grep强调的是筛选(和第三个参数比较，看返回值是true还是false)，each强调的是遍历(用return false结束循环)