js map()處理數組和對象數據


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM