zoukankan      html  css  js  c++  java
  • js--数组操作:map()方法、forEach()方法

    https://www.cnblogs.com/shewill/p/12594337.html

    1、map():是指“映射”。[].map(); 不改变原数组,基本用法跟forEach方法类似:

    array.map(callback,[ thisObject]);

     callback的参数也类似:

    [].map(function(value, index, array) {
        // ...
    });

     map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:

    var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
      return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16

     callback需要有return值,如果没有,就像下面这样:

    var data = [1, 2, 3, 4];
    var arrayOfSquares = data.map(function() {});
    
    arrayOfSquares.forEach(console.log);

     结果如下图,可以看到,数组所有项都被映射成了undefined

     在实际应用场景中,在便利出的数据需要处理的时候用到map比较多一些,例如商品列表数据回来之后进行展示需要进行另外的操作时,如此不会改变原数组,便可实现效果

     map()方法是不会改变原来的数组,也就是例子中的arr,数据处理之后会返回一个新的数组result,这两者之间没有指向关系

      举个例子:

      let arr = [1,2,3];

      let arrQ = arr.map(item => item * item);

      // arr = [1,2,3];

      // arrQ = [1,4,9]; // map 不修改原数组,需要用一个新数组去接收 数据处理后返回的新数组

    2、forEach():改变原数组

    forEach没有返回值,map返回一个与原数组等长的新数组;
    1)forEach没有返回值,map返回一个与原数组等长的新数组
    ----------------------案例-----------------------
                var arr=[
                {id:1001,name:"电视",price:4500},
                {id:1002,name:"电脑",price:6500},
                {id:1003,name:"冰箱",price:2000},
                {id:1004,name:"洗衣机",price:1000},
                {id:1005,name:"手机",price:5500}
            ];
    //forEach方法
            arr.forEach(function(item,index,arr){
                // 给对象添加num属性,属性值随机从1到9
                item.num=parseInt(Math.random()*9+1);
                // 给对象添加total属性值
                item.total=item.price*item.num;
            })
            console.log(arr);
    //map方法
            var arr1=arr.map(function(item,index,arr){
                item.num=parseInt(Math.random()*9+1);
                item.total=item.price*item.num;
                return item;
            })
            console.log(arr1);
     
  • 相关阅读:
    Mac 终端命令大全
    美女猜拳,破解,麻麻再也不担心单机游戏的内购了
    项目CPU异常高分析
    安卓第三方动态链接库so调用,解决未对java开放的函数调用,解决类名对齐问题
    安卓动态链接库系列-编写so
    web六间房密码加密过程
    某游戏情义触发 自动化测试框架
    安卓hook
    程序安装莫名其妙失败的解决方法,程序未彻底卸载
    偶然的错误发现一个bug,引人深思的null
  • 原文地址:https://www.cnblogs.com/hqq422/p/14376392.html
Copyright © 2011-2022 走看看