js对象修改引用传递采坑

今天踩了一个坑，只怪自己学艺不精。在此记录一下。

有问题的代码：

let GoodsObject = {
    goodsStarLists: [],
    productStarLists: {},
    init: function(){
        GoodsObject.initStar();
        GoodsObject.getProduct();
    },
    initStar: function(){
        let goodsStarLists = [];
        for(let i = 1;i <= 2;i++){
            goodsStarLists.push({
                starId: i,
                starScore: i * 2,
            });
        }
        GoodsObject.goodsStarLists = goodsStarLists;
    },
    getProduct: function(){
        let productIds = [525,526];
        let productStarLists = {};
        for(let i = 0;i < productIds.length;i++){
            let productId = productIds[i];
            productStarLists[productId] = GoodsObject.goodsStarLists;
        }
        GoodsObject.productStarLists = productStarLists;
    },
    updateStar: function(productId){
        let productStarLists = GoodsObject.productStarLists;

        Object.keys(productStarLists).forEach(function(key){
            if(productId == key){
                for(let i = 0;i < productStarLists[key].length;i++){
                    let productStarList = productStarLists[key][i];
                    productStarList.starScore = 10;
                }
            }
        });

        GoodsObject.productStarLists = productStarLists;
    }
};

GoodsObject.init();
GoodsObject.updateStar(525);
console.log(GoodsObject.productStarLists);

//输出：> {"525":[{"starId":1,"starScore":10},{"starId":2,"starScore":10}],"526":[{"starId":1,"starScore":10},{"starId":2,"starScore":10}]},我的本意是修改525这个商品，但526也被修改了。

我的目的是根据不同的商品id修改starScore。但结果确是不管我传什么productId,都会把所有的starScore修改掉。思考之后发现是js对象是引用传递的造成的问题。我先定义了数组goodsStarLists并且初始化了，然后又赋值给了对象productStarLists，虽然对象productStarLists的key是不同的，但他们却指向了同一个数据源(goodsStarLists),因此，后面在修改productStarLists时会直接把数据源里的数据修改掉。解决方法也很简单，就是不要单独定义goodsStarLists，让productStarLists的每一个key指向一个单独的数据源即可。废话不多说，看代码：

let GoodsObject = {
    productStarLists: {},
    init: function () {
        GoodsObject.getProduct();
    },
    getProduct: function () {
        let productIds = [525, 526];
        let productStarLists = {};
        for (let i = 0; i < productIds.length; i++) {
            let productId = productIds[i];

            let goodsStarLists = [];
            for (let i = 1; i <= 2; i++) {
                goodsStarLists.push({
                    starId: i,
                    starScore: i * 2,
                });
            }

            productStarLists[productId] = goodsStarLists;
        }
        GoodsObject.productStarLists = productStarLists;
    },
    updateStar: function (productId) {
        let productStarLists = GoodsObject.productStarLists;

        Object.keys(productStarLists).forEach(function (key) {
            if (productId == key) {
                for (let i = 0; i < productStarLists[key].length; i++) {
                    let productStarList = productStarLists[key][i];
                    productStarList.starScore = 10;
                }
            }
        });

        GoodsObject.productStarLists = productStarLists;
    }
};

GoodsObject.init();
GoodsObject.updateStar(525);
console.log(GoodsObject.productStarLists);

//输出：{"525":[{"starId":1,"starScore":10},{"starId":2,"starScore":10}],"526":[{"starId":1,"starScore":2},{"starId":2,"starScore":4}]}，这里的结果就是我们想要的，只修改了525，526的数据并没有被修改