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

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

  1. js怎样得出数组中某个数据最大连续出现的次数

     1:js怎样得出数组中某个数据最大连续出现的次数 var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;    var j  = 0 ;    var max  ...

  2. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  3. js 判断空数组,空对象!

    var attr1 = [ ]; var obj1 = { }; console.log(isEmpty(attr1)); console.log(isEmpty(obj1)); function i ...

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

    我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝 ...

  5. JS中深拷贝数组、对象、对象数组方法(转载)

    我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝 ...

  6. js循环遍历数组(对象)

    1,for循环 对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构. let arr = [a,b,d];for (let i=0; i<arr.length; i++){ consol ...

  7. js在类似数组的对象中使用push

    let obj = { "2": "a", "3": "b", length: 3, push: Array.proto ...

  8. 我总结的js变量、数组、对象等基础知识

    我的第一篇博客 ——JS的那些基础概念 第一次写,也不知道有没有什么套路,需不需要注意文采之类的.不管了,我就直接写主要内容吧!下面是我总结的一些关于JS的基础概念: [变量]从字面上面,变量是可变的 ...

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

    数组的拷贝 > 数组的深拷贝,两层 var arr = [[1,2,3],[4,5,6],[7,8,9]]; var arr2 = []; 循环第一层数组 for(var i=0,len=arr ...

随机推荐

  1. spring基础回顾

    1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...

  2. 数据?算法-> which is important?

    谷歌的强不是强在 PageRank 算法,而在于它是第一个在排名时把链接——而不只是文字和标题——考虑进去的.又以自己教的数据挖掘课为例.他让学生以 Netflix 用户对一万八千多部电影的打分为基础 ...

  3. Storm累计求和Demo并且在集群上运行

    打成jar包放在主节点上去运行. import java.util.Map; import backtype.storm.Config; import backtype.storm.StormSubm ...

  4. 忘记mysql密码的解决办法--针对windows系统

    C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.5\bin C:\Program Files\MySQL\MySQ ...

  5. PHP PSR 标准

    引用他人文章:http://www.cnblogs.com/52php/p/5852572.html PHP中PSR-[0-4]代码规范 PHP-FIG 在说啥是PSR-[0-4]规范的之前,我觉得我 ...

  6. spring整合elasticsearch之环境搭建

    推荐一个非常好的博客: 点我 // 测试使用docker下启动的es不管用, 在linux下或者windows下运行的es可用 // 进一步测试docker下启动的es链接时, 开启嗅探也链接不上, ...

  7. select样式

    select设置了宽高: 样式是这样的: 如果在select的标签内部加入size="2"    size的值只要大于1,select的设置大小会起作用 样式是这样的: 3.点击中 ...

  8. jsonp跨域简单应用(一)

    转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer   -- 一年前学的JSONP 跨域,一年 ...

  9. EnyimMemcached(64位)使用实例

    1.安装:http://www.cnblogs.com/dudu/archive/2009/07/19/1526669.html 2.使用 using Enyim.Caching.Configurat ...

  10. Telnet 模拟邮件发送过程

    Telnet 模拟邮件发送过程 windows要提前开启Telnet客户端的功能,再按照下面步骤完成邮件发送: 1.通过 cmd 进入命令窗口 2.连接要发送邮件的服务器:telnet smtp.al ...