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におけるコールバック関数の1番目のパラメータはキー値、2番目のパラメータはキー名、3番目のパラメータはオリジナルの配列である.jQueryでは主なコードがcallbackである.call(elem[i],i,args)すなわち、彼の最初のパラメータもキー値であり、2番目のパラメータもキー名であり、3番目のパラメータは追加のパラメータである(3番目のパラメータに違いがあることを示す).同時にthisにも違いがあり、JSのmapでthisはmap呼び出し時に渡される2番目のパラメータを指し、undefinedまたはnullに渡されるとwindowになりますが、ここでthisが指定されていない場合はwindowオブジェクトを指します!
インスタンスnext,prevなどのメソッドの構築には,jQueryを理解するためのコードがある.mapメソッドは特に有用です.
		var ret = jQuery.map( this, fn, until );
のfnでは、jQueryを受け入れるために3つのパラメータが使用する.mapはこの関数fnに伝達するパラメータを与え,1つ目はDOM,2つ目は下付き,3つ目はここの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)は複数の配列を結合して1つの配列オブジェクトになります!
(3)map関数は配列要素の修正を強調し(戻り値がundefinedでない場合にのみ結果配列に入れられる)、grepはフィルタリングを強調し(3番目のパラメータと比較して戻り値がtrueかfalseか)、eachは遍歴を強調し(return falseでループを終了する)