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.旧属性名也可成功