jsmap遍历修改对象⾥⾯的值_jsmap()处理数组和对象数据之前的⽂章梳理了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){原生js和js的区别
return key;
}
})
// oldMan -> ["bobo"]