uni/JS 购物车结算过滤多维数组与数组赋值改变原数组的一些问题

灰太狼 2022-12-03 02:26 117阅读 0赞

在做购物车结算的时候，使用filter对购物车商品数组过滤选中商品，对单个数组十分简单，如：

list：[
     	{ 
     		id:0,
     		check:false
     	},
     	{ 
     		id:1,
     		check:true
     	}
     ]
     
     const arry = this.list.filter(function(item) { 
    		return item.check === true;
     })
    console.log(arry); //list:[{id:1,check:true}]

但是当数组为多维数组时，这样？：

goodlist:[
    	{ 
    		shopID:0,
    		good:[
    			{ 
    				goodsID:1001,
    				goodsName:'上衣',
    				select:false
    			}
    		]
    	},
    	{ 
    		shopID:1,
    		good:[
    			{ 
    				goodsID:1011,
    				goodsName:'鞋子',
    				select:true
    			},
    			{ 
    				goodsID:1002,
    				goodsName:'袜子',
    				select:false
    			}
    		]
    	}
    ]
    
    const payArry=this.goodlist.filter(function(item){ 
    	return item.good.filter(function(item1){ 
    		return item1.select===true
    	})
    })

双重return？我们的第一反应肯定是这样做，但是很显然不行，返回的结果是全部数据。

当你的购物车为单一商品，即每个商品独立开来，不是以店铺为模块时，可使用：

const payArry=this.goodlist.filter(function(item){ 
    	return item.good[0].select===true
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center]  
因为它只能拿到数组指定位置的数据，那一个模块多个商品怎么办呢？我用的是遍历数组，但在这有几个问题：

var arry=[]
    //过滤出选中的商品
    this.goodlist.forEach((shopGoods,index)=>{ //店铺商品，索引
    	arry[index]=shopGoods
    	arry[index].good=shopGoods.good.filter(function(item){ 
    		return item.select===true
    	})
    })
    console.log(arry);

问题1：对多维数组内部数组进行过滤时 ，过滤了未选中商品，但该商品的店铺头还在，导致该对象长度不为空。  
我的解决方法：对该结果进行二次过滤

//过滤掉没有选中商品的店铺
    const payArry=shopcartGoods.filter(function(item){ 
    	return item.good.length!=0
    })
    				
    onsole.log(payArry);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center 1]

问题2：对数组进行过滤时，尽管新定义了新数组，但是因为指向的是同一地址，原数组也跟着改变了。  
如：

//普通数组,未切断关联时，改变b的值，a也跟着改变
    var a = [1];
    var b= [];
    b = a;
    b[1]=2;
    console.log(a);//a=[1,2]
    console.log(b);//b=[1,2]

要实现改变b数组而不改变a数组，就得进行深拷贝，使用扩展运算符…进行复制，或者是用concat或者slice赋值。

var b = [...a];
    //var b = [].concat[a];
    //var b = a.slice();
    b[1]=2;
    console.log(a);//a=[1]
    console.log(b);//b=[1,2]

但这种方法只适用于普通数组，当数组类型是\[Object(Array)\]类型时，仍会影响原数组。所以购物车结算时我用循环创建出新数组：

//过滤出选中的商品
    var arry =[]
    this.goodlist.forEach((shopGoods,index)=>{ //店铺商品，索引
    	var cart=[]
    	cart.push(shopGoods)
    	arry[index]=cart
    	// arry[index]=shopGoods
    	arry[index].good=shopGoods.good.filter(function(item){ 
    		if(item.select===true){ 
    			arry[index].storeName=shopGoods.storeName
    		}
    	return item.select===true
    	})
    })
    // console.log(arry);
    //过滤掉没有选中商品的店铺
    const payArry=arry.filter(function(item){ 
    	return item.good.length!=0
    })
    console.log(payArry);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center 2]

后续更改：

//过滤出选中的商品
    var isgoods=true; //商品数量是否存在为空值（商品数为可输入，可能为空）
    var payArry=[] //准备结算的商品列表
    this.goodlist.forEach((shopGoods,index)=>{ //店铺商品，索引
    	var arry ={ }// 确保每次循环都创建一个新对象
    	var a=[].concat(shopGoods)
    	console.log(a);
    	var good=a[0].good.filter(function(item){ 
    		console.log(item);
    		if(item.select===true){ 
    			if(item.goodnum==''){ 
    				isgoods=false //选中的商品数量有为空的
    				return ;
    			}
    			let storeName='storeName'
    			arry[storeName]=a[0].storeName
    		}
    		return item.select===true
    	})
    	if(good.length!=0){ 
    		let goods='goods'
    		arry[goods]=good
    		payArry.push(arry)
    	}
    					
    					
    })
    				
    console.log(payArry);
    console.log("最后结算的数据: " + JSON.stringify(payArry));
    				
    if (payArry.length == 0 || isgoods==false) { 
    	uni.showToast({ 
    		title: "您还没有选中要结算的商品或商品数量为空",
    		icon: "none"
    	});
    	return
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8a686d1e163047d4b5a0b04e74d4b067.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/bafc3f0bc6b74448b445c85c7f0656d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/b1b5831ee62e4fc28d02abd3eaa78aea.png