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);
 
原文地址:https://www.cnblogs.com/hqq422/p/14376392.html