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各参数:
["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"]
时间: 2024-10-02 06:12:18

js map()处理数组和对象数据的相关文章

XML在java或.NET中转为Json的数组或对象数据时的处理

XML在java和.NET中转为Json数据时会出现这样一个问题,当节点中只有一个节点数据时是转换为对象,有多个节点则是转为数组,为了应对这个问题我们需要在解析的时候进行如下的处理,不然就会报异常: 数据1:数组格式 "Field": [                    {                        "@name": "APPROVE",                        "@title"

JS中的数组与对象

一.数组: 1.数组的基本慨念:       数组是在内存空间中连续存储的一组有序数据的集合      元素在数组中的顺序,成为下标.可以使用下标访问数组的每个元素 2.如何声明一个数组     ① 使用字面量声明:       在JS中,同一数组,可以存储各种数据类型        例如:var reg = [1,"换个影子",true,{},null,func];  //调用数组中的函数:reg[5]();     ②  使用new关键字声明: var reg = new Arra

js中遍历数组、对象的方式

1.标准的for循环遍历数组 var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 2.for in 遍历对象 for in 以任意顺序遍历一个对象的可枚举属性. 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) . 一般常用来遍历非数组的对

JS中深拷贝数组、对象、对象数组方法

我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 "=" 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝的区别. 我们先给出一个数组: var arr = ["a","b"]; 现在怎么创建一份arr数组的拷贝呢?直接执行赋值运算吗?我们来看看输出结果 var arrCopy = arr; arrCopy[1] = "c"; arr

JS中实现数组和对象的深拷贝和浅拷贝

数组的拷贝 > 数组的深拷贝,两层 var arr = [[1,2,3],[4,5,6],[7,8,9]]; var arr2 = []; 循环第一层数组 for(var i=0,len=arr.length;i<len;i++){ 循环第二层数组 for(var k=0,lens=arr[i].length;k<lens;k++){ 把每一个数组的内容添加到数组2中 arr2.push(arr[i][k]); } } console.log(arr2); //[1, 2, 3, 4,

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制假设使用=号来进行复制.那仅仅是浅拷贝. 例如以下图演示: 如上.arr的改动,会影响arr2的值,这显然在绝大多数情况下,并非我们所须要的结果. 因此,数组以及对象的深拷贝就是javascript的一个基本功了. 数组的深拷贝 条条大道通罗马,实现数组的深拷贝.是有好几种方法的.举比例如以下: for 循环实现数组的深拷贝 for循环是很好用的.假设不知道高级方法.通过for循环可以完毕我们

数组方法总结 常用数组方法总结 js的数组或对象常用方法总结

js常用数据类型的方法使用归纳 * String---->是一个对象    * 字符串可以看成是字符组成的数组,但是js中没有字符类型 * 字符是一个一个的,在别的语言中字符用一对单引号括起来 * 在js中字符串可以使用单引号也可以使用双引号 * 因为字符串可以看成是数组,所以,可以通过for循环进行遍历 * 字符串特性:不可变性,字符串的值是不能改变 * 字符串的值之所以看起来是改变的,那是因为指向改变了,并不是真的值改变了 * 字符串的常用属性:     * .length------>字

js中的数组对象排序

一.普通数组排序 js中用方法sort()为数组排序.sort()方法有一个可选参数,是用来确定元素顺序的函数.如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序.如: var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"

js中js数组、对象与json之间的转换

在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ "name": "cxh", "sex": "man" }';JSON对象:var str2 = { "name": "cxh", "sex": "man"