之前的文章梳理了JS数组与对象属性的遍历方法,本文介绍专门用以遍历并处理数据的map()方法。
一、原生map()
map()是数组的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map()里面的处理函数接受三个参数,分别指代当前元素、当前元素的索引、数组本身。(IE9以下不支持,对老旧浏览器的兼容性方法参考这里)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /**** 原生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 开始,该函数也支持遍历对象。它接受两个参数,分别是要处理的数组/对象和处理函数,其处理函数也接受键值和键名两个参数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /**** 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"] |