码迷,mamicode.com
首页 > 编程语言 > 详细

js map()处理数组和对象数据

时间:2017-08-24 01:03:30      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:传递   梳理   blank   blog   处理对象   gnu   参数   数组元素   zh-cn   

    之前的文章梳理了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各参数:
["1", "2", "3.5"].map(parseInt);  // 结果不是[1, 2, 3],而是[1, NaN, NaN]
["1", "2", "3.5"].map(parseInt,10);   //得到正确结果[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"]

 

js map()处理数组和对象数据

标签:传递   梳理   blank   blog   处理对象   gnu   参数   数组元素   zh-cn   

原文地址:http://www.cnblogs.com/yangshifu/p/7415105.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!