之前的文章梳理了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"]
