之前的文章梳理了JS數組與對象屬性的遍歷方法,本文介紹專門用以遍歷並處理數據的map()方法。
一、原生map()
map()是數組的一個方法,它創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。map()里面的處理函數接受三個參數,分別指代當前元素、當前元素的索引、數組本身。(IE9以下不支持,對老舊瀏覽器的兼容性方法參考這里)
/**** 原生map() ****/ var arrTmp = [1,2,3]; var arrDouble = arrTmp.map(function(num){ return num*2; }) // arrDouble -> [2,4,6] //注意,使用map()時實際傳遞了3個參數: arr.map(function(currentValue, index, array){ // currentValue -> 數組中正在處理的當前元素 // index -> 數組中正在處理的當前元素的索引 // array -> 指向map方法被調用的數組 }) ["1", "2", "3.5"].map(parseInt); // 結果不是[1, 2, 3],而是[1, NaN, NaN] ["1", "2", "3.5"].map(function(num){ return parseInt(num)}); //得到正確結果[1, 2, 3] //使用map()重組數組 var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]; var reformattedArray = kvArray.map(function(obj) { var rObj = {}; rObj[obj.key] = obj.value; return rObj; }); // kvArray不變,reformattedArray -> [{1: 10}, {2: 20}, {3: 30}],
二、jQuery的$.map()
$.map() 函數用於使用指定函數處理數組中的每個元素(或對象的每個屬性),並將處理結果封裝為新的數組返回。從 1.6 開始,該函數也支持遍歷對象。它接受兩個參數,分別是要處理的數組/對象和處理函數,其處理函數也接受鍵值和鍵名兩個參數:
/**** jQuery $.map() ****/ // 篩選數組元素 var arrTmp = [1,2,3,4,5]; var bigNum = $.map(arrTmp,function(num){ if(num>2){ return num; } }); // bigNum -> [3,4,5] // 處理對象 var person = { jack:{age:9}, tom:{age:20}, bobo:{age:30} } var oldMan = $.map(person,function(value,key){ if(value.age>26){ return key; } }) // oldMan -> ["bobo"]