map和foreach的用法和区别

foreach和map的不同点：
(1)map()方法会得到一个新的数组并返回，forEach()会修改原来的数组。

map遍历的后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。

(2)forEach()允许callback更改原始数组的元素。map()返回新的数组。

forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化。

map类似下面

         var arr = [1,2,3,4,5,6];
         var new2Arr = arr.map((item,index,array) =>{
            console.log(item);
            console.log(index);
            console.log(array);
            return item *100
        })
        console.log(arr);    //[1, 2, 3, 4, 5, 6]
        console.log(new2Arr);    // [100, 200, 300, 400, 500, 600]

 //整理图片的数据
      skuInfo.skuImageList = imageList.map((item) => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id,
        };
      });

[
    {
        "id": 40,
        "spuId": 6,
        "imgName": "7ecc0b0294ff0bb0.jpg",
        "imgUrl": "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcKAT7UnAAAiW3yrEHc898.jpg",
        "isDefault": 0
    },
    {
        "id": 41,
        "spuId": 6,
        "imgName": "85a8a527ca8eb6da.jpg",
        "imgUrl": "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcKAc66yAAArSXlhsUg866.jpg",
        "isDefault": 0
    }
]

把上面的整理成下面的，map用在循环一些列表数据，之后把需要上传的整理成需要的字段，然后放到需要上传的地方去。

[
    {
        "imgName": "7ecc0b0294ff0bb0.jpg",
        "imgUrl": "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcKAT7UnAAAiW3yrEHc898.jpg",
        "isDefault": 0,
        "spuImgId": 40
    },
    {
        "imgName": "85a8a527ca8eb6da.jpg",
        "imgUrl": "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcKAc66yAAArSXlhsUg866.jpg",
        "isDefault": 0,
        "spuImgId": 41
    }
]

map用法，就是把旧的数组整理成一个新的数组

  if (spuImageResult.code == 200) {
        let listArr = spuImageResult.data;
        listArr.forEach((item) => {
          //由于照片墙显示图片的数据需要数组，数组里面的元素需要有name与url字段
          //需要把服务器返回的数据进行修改
          **//相当于用foreach新增了两个字段name和url,在原来的基础上新增的**
          item.name = item.imgName;
          item.url = item.imgUrl;
        });
        // 数组进行变更或者替换时，name  url这种新增的属性是可以监测到的。
        this.spuImageList = listArr;
        console.log(JSON.parse(JSON.stringify(spuImageResult.data)),'---')
        console.log(JSON.parse(JSON.stringify(listArr)),'listArr')
      }

foreach使用时，主要改变了原数组。从下图看，原来的数和新数一样

foreach的用法，给数据新增字段

    list.forEach((item) => {
          // console.log(JSON.parse(JSON.stringify(item)),'9999999999999999999')
          //设置item.isDefault=0,相当于给list新增了一个属性isDefault，
          item.isDefault = 0;
        });

{
    "id": 42,
    "spuId": 6,
    "imgName": "8932ba2e655a03e4.jpg",
    "imgUrl": "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcKAZ_qwAAAaCuo69pQ498.jpg"
}

新增为如下

在这里插入代码片

id: 34
imgName: "4b990e9437b1a445(4).jpg"
imgUrl: "http://39.98.123.211/group1/M00/02/DB/rBHu8mGxPcCANXGrAAH0CTAPZ8s596.jpg"
isDefault: 0
spuId: 6

好像整理时用foreach，上传时map

在map循环中用item.已经存在的属性值=新的属性值 可以修改成功，这是因为用的引用数据类型。
用item.新属性名=item.旧属性名也可成功