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

最新推荐文章于 2024-07-09 12:32:15 发布

我在在啦我让让啦

最新推荐文章于 2024-07-09 12:32:15 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Annexiaobin/article/details/121014331

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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

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)
            }
        }
    }
}