$.map() 函數用於使用指定函數處理數組中的每個元素(或對象的每個屬性)，並將處理結果封裝為新的數組返回,該函數有三個參數，如下: elems Array/Object類型 指定的需要處理的數組或對象。 callback 遍歷時執行的回調函數 arg 參數，執行回調函數時傳入的參數 callba ...
$.map() 函數用於使用指定函數處理數組中的每個元素(或對象的每個屬性)，並將處理結果封裝為新的數組返回,該函數有三個參數，如下:
elems Array/Object類型 指定的需要處理的數組或對象。
callback 遍歷時執行的回調函數
arg 參數，執行回調函數時傳入的參數
callback函數執行時可以帶兩個參數，分別是遍歷時對應的值和它的索引(對象來說則是鍵名)，如果有返回值，則將返回值拼湊為一個數組
$.fn.map()返回值是一個jQuery對象，它也是調用$.map()來實現的，返回的數組最後又調用pushStack創建一個jQuery對象而已，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p id="p1">文本1</p> <p id="p2">文本2</p> <h1 id="h1">標題1</h1> <h1 id="h2">標題2</h1> <script> var arr=[11,12,13,14]; var a =$.map(arr,function(element,index){return index;}); console.log(a); //輸出:Array [ 0, 1, 2, 3 ] var b =$.map([p1,p2,h1,h2],function(elem,i){ console.log(elem,i) //分別輸出:<p id="p1">(這是節點的引用) 0、<p id="p1"> 1、<h1 id="h1"> 2、<h1 id="h2"> 3 return elem.parentNode; }) console.log(b) //輸出:Array [ body, body, body, body ] var c = $('p').map(function(i,elem){return elem.parentNode}); console.log(c.length) //輸出:2 console.log(c[0]===c[1]) //輸出:true console.log(c[1]===document.body) //輸出:true </script> </body> </html>
源碼分析
writer by:大沙漠 QQ:22969969
和$.each()一樣，$.map()也是通過$.extend()掛載到$.fn上的，如下:
map: function( elems, callback, arg ) { //對數組中的每個元素或對象的每個屬性調用一個回調函數，並將回調函數的返回值放入一個新的數組 var value, key, ret = [], //ret存儲最後的結果 i = 0, length = elems.length, // jquery objects are treated as arrays isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; //isArray表示參數elems是否是數組 // Go through the array, translating each of the items to their if ( isArray ) { //對於數組或類數組對象，則通過for 迴圈遍歷下標， for ( ; i < length; i++ ) { value = callback( elems[ i ], i, arg ); //執行callback函數，參數分別是當前Object,當前Object的次序和arg if ( value != null ) { //如果回調函數的返回值不是null 和undefined，則把返回值放入結果集ret。 ret[ ret.length ] = value; } } // Go through every key on the object, } else { //對於對象，則通過for-in 迴圈遍歷 for ( key in elems ) { value = callback( elems[ key ], key, arg ); if ( value != null ) { ret[ ret.length ] = value; } } } // Flatten any nested arrays return ret.concat.apply( [], ret ); //調用方法concat()將ret轉換為一個數組，並返回 },
對於$.fn.map()來說，它是調用$.map來實現的，如下:
map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { //內部通過靜態方法jQuery.map()和原型方法.pushStack()實現， return callback.call( elem, i, elem ); })); },
pushStack之前已經介紹過了，就是創建一個新的jQuery對象而已，我們可以指定其中的DOM元素和selector屬性。
