jquery.map()方法的使用詳解
原型方法map跟each類似調用的是同名靜態(tài)方法，只不過返回來的數據必須經過另一個原型方法pushStack方法處理之后才返回，源碼如下：
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
本文主要就是分析靜態(tài)map方法至于pushStack在下一篇隨筆里面分析；
首先了解下map的使用（手冊內容）
$.map將一個數組中的元素轉換到另一個數組中。
作為參數的轉換函數會為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。
轉換函數可以返回轉換后的值、null（刪除數組中的項目）或一個包含值的數組，并擴展至原始數組中。
參數
arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject:數組或者對象。
為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。
函數可返回任何值。
另外，此函數可設置為一個字符串，當設置為字符串時，將視為“l(fā)ambda-form”（縮寫形式？），其中 a 代表數組元素。
如“a * a”代表“function(a){ return a * a; }”。
示例1：
//將原數組中每個元素加 4 轉換為一個新數組。
//jQuery 代碼:
$.map( [0,1,2], function(n){
return n + 4;
});
//結果:
[4, 5, 6]
示例2：
//原數組中大于 0 的元素加 1 ，否則刪除。
//jQuery 代碼:
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
//結果:
[2, 3]
示例3：
//原數組中每個元素擴展為一個包含其本身和其值加 1 的數組，并轉換為一個新數組
//jQuery 代碼:
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
//結果:
[0, 1, 1, 2, 2, 3]
可以看出map方法跟each方法類似通過循環(huán)每個對象或者數組的“項”執(zhí)行回調函數來實現對數組或者對象的操作，但是這兩個方法也有很多不同點
比如each()返回的是原來的數組，并不會新創(chuàng)建一個數組，而map則會創(chuàng)建新的數組，；each遍歷是this指向當前數組或對象值，map則指向window，因為在源碼中并不像each那樣使用對象冒充；
例如：
var items = [1,2,3,4];
$.each(items, function() {
alert('this is ' + this);
});
var newItems = $.map(items, function(i) {
return i + 1;
});
// newItems is [2,3,4,5]
//使用each時，改變的還是原來的items數組，而使用map時，不改變items，只是新建一個新的數組。
var items = [0,1,2,3,4,5,6,7,8,9];
var itemsLessThanEqualFive = $.map(items, function(i) {
// removes all items > 5
if (i > 5)
return null;
return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]
言歸正傳回到map源碼
// arg is for internal usage only
map: function( elems, callback, arg ) {
var value, key, 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 ) ) ;
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
// Go through every key on the object,
} else {
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 );
},
首先還是聲明幾個變量為接下來的遍歷做準備，其中jsArray變量用來簡單區(qū)分對象和數組，這個布爾復合表達式比較長不過只要記住js運算符的有優(yōu)先順序就不難理解了，首先括號優(yōu)先執(zhí)行然后就是邏輯與》邏輯或》全等》賦值，然后就可以分析啦
首先圓括號里先計算然后結果加上 length !== undefined 、 typeof length === "number這兩個必要條件最后的結果再跟elems instanceof jQuery進行邏輯或的運算，簡單的說就是isArray為真的情況有：
1、elems instanceof jQuery 為true 換言之就是jquery對象
2、length !== undefined && typeof length === "number" 和 length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems )這三個至少成立一個
可以拆分為3個小情況
length是存在并且是數字而且待遍歷的數組或者類數組等length屬性大于0 length-1存在 這樣就保證了是能遍歷的，比如對于jquery對象 domList對象等
length是存在并且是數字而且length屬性等于0 如果是0也沒關系就是不會遍歷
length是存在并且是數字而且待遍歷對象是純數組
滿足這些條件之后開始根據isArray的結果分開遍歷，對于“數組”采用for循環(huán)，對于對象采用for...in循環(huán)
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
是數組或者類數組的時候直接把循環(huán)的每一項的值和指針以及arg參數傳入回調函數中執(zhí)行，arg參數是此方法內部使用的參數，跟each以及一些其他jquery方法很相似，只要在執(zhí)行回調函數時不返回null就把執(zhí)行返回的結果添加到新數組中，對象操作亦是如此直接略過
// Flatten any nested arrays
return ret.concat.apply( [], ret );
最后將結果集扁平化，為什么有這一步呢？因為map是可以擴展數組的在前面第3個示例就是如此：
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
如果是這樣使用的話得到的新數組是一個二維數組，所以必須降維
ret.concat.apply( [], ret )等價于[].concat.apply([],ret)關鍵作用的是apply,因為apply的第二個參數把ret的數組分成多個參數傳入給concat把二維數組轉化為一維數組這個用法還是值得收藏的的
map方法簡單分析完畢，能力有限錯誤之處望多多指正。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
相關文章
那些年學習了一些基本的web開發(fā)知識，其中已經有javascript語言了，為什么還要學習Jquery啊2012-03-03
下面小編就為大家分享一篇jquery實現側邊欄左右伸縮效果的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數最高，鼠標離開，恢復之前狀態(tài)2014-11-11
jQuery動態(tài)設置form表單的enctype值(實現代碼)
本篇文章是對在jQuery中動態(tài)設置form表單的enctype值的實現代碼進行了詳細的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了jquery+json實現數據二級聯動的方法,涉及jQuery基于get方法與后臺.net程序傳輸json交互實現二級聯動菜單,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
前不久做項目，要用到大量的頁面圓角的框塊，以前實現的時候都是用圖片做背景之類的方法，那種方法對于少數的還是比較可行的，但是當涉及到整個項目都要用 到這樣的效果時就顯得不夠優(yōu)化和簡練了。2009-12-12
select標簽的外觀問題很惱人，各個瀏覽器都不一致，單單就IE，一個版本就一個長相，還不能用CSS修飾，接下來將本人對select的美化方法共享出來，感興趣的朋友可以參考下2013-04-04
下面小編就為大家?guī)硪黄猨query設置表單元素為不可用的簡單代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了greybox——不開新窗口看新的網頁2007-02-02