65.解决循环数组后push到新数组的都是同一组数据问题

前言:有一个新功能,就是需要做到表格里每选择一条数据,在上方就添加该条数据对应的柱形-折线图,但是我在做这个功能时,遍历数据后,最后总是添加一条后就变成两个一样的了,后来经过一系列百度修改,找到问题所在了。

1.原理

因为Object对象是地址引用传递的,c对象在循环外声明时,每次a.push(c)添加的c都是同一个对象。就是说a[0],a[1],a[2]中存放的都是同一个对象的引用地址,在修改这个对象的属性后,所有存放这个对象引用的地方都会受到影响。

2.解决问题过程

 (1)刚开始,我将创建的对象放在循环体外,在循环体内判断数据对对象进行修改后再push进一个新数组后,最后数组里得到的几条数据都是相同的。

frontData:{
    handler(newVal){
        let _this = this
        _this.transArr = []
        let channelObj = {
            legend:[......],
            xAxis:[......],
            series:[
                {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                {name:"..",data:[1,2,3....],itemColor:"#33eeff"}
            ]
        }
        for(let item of newVal){
            if(item.checked == true){
                channelObj.series[0].data[0] = item.except - 50
                channelObj.series[1].data[0] = item.process - 50
                _this.transArr.push(channelObj)
            }
        }
    }
}

(2)最后,找到了问题所在,我把对象放在循环体里,就解决好了

frontData:{
    handler(newVal){
        let _this = this
        _this.transArr = []
        for(let item of newVal){
            let channelObj = {
                legend:[......],
                xAxis:[......],
                series:[
                    {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                    {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                    {name:"..",data:[1,2,3....],itemColor:"#33eeff"},
                    {name:"..",data:[1,2,3....],itemColor:"#33eeff"}
                ]
            }
            if(item.checked == true){
                channelObj.series[0].data[0] = item.except - 50
                channelObj.series[1].data[0] = item.process - 50
                _this.transArr.push(channelObj)
            }
        }
    }
}

3.还有一个问题,最开始,循环第二次会增加2条,循环第三次会增加3条

解决方法 是在最开始 设置:let _this = this

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值