• 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个参数:
    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"]
    
  • 相关阅读:
    C#--SqlDependency监控数据库表的变化
    C#--尝试读取或写入受保护的内存,这通常指示其他内存已损坏。
    C#--lock线程锁
    C#--抽象类(转载)
    ArrayList源码分析
    多线程编程bug起源分析
    Linux-CentOS-Nginx安装
    记一次springMVC的跨域解决方案
    Linux下压缩工具gzip和归档工具tar及其实战shell应用
    Docker在Centos 7上的部署
  • 原文地址:https://www.cnblogs.com/yangshifu/p/7415105.html
Copyright © 2020-2023  润新知