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是5
alert(Array.prototype.slice.call(a) instanceof Array);
//打印undefined
alert(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->female
alert($.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]];
//打印6
alert(Array.prototype.concat.apply([],arr).length);

$.map源码：

// arg is for internal usage only
map: 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结束循环)