在Javascript中分配对象内部的数组答案

【问题标题】：Assigning array inside object in Javascript在Javascript中分配对象内部的数组
【发布时间】：2018-11-29 13:45:31
【问题描述】：

我有cart 和products 全局变量。

产品可以有多个属性。

这是一个代码

var products = [
                  {
                    name: 'Table',
                    price: 200,
                    attributes: [
                                  {
                                    name: 'Height',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Width',
                                    type: 'text',
                                    default_value: '',
                                  }
                                ],
                  },
                  {
                    name: 'Chair',
                    price: 150,
                    attributes: [
                                  {
                                    name: 'Height',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Width',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Company',
                                    type: 'text',
                                    default_value: ''
                                  }
                                ],
                  }
              ];

var cart = {
  products: [],
};

//console.log('Initial cart',cart);

//add product to cart
let p = Object.assign({},products[0]);
cart.products.push(p);

//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
//console.log('products',products);
//console.log('second cart',cart);

//change attribute of product
cart.products[0].attributes[0].value = 5;

此代码更改全局 products value 属性而不是购物车属性。

请帮我解决这个问题。

【问题讨论】：

如果你可以使用 lodash，试试lodash.cloneDeep。您仅复制键，并且每个非原始值（例如对象）都通过指针传递（而不是克隆）。深克隆是一种选择，另一种选择，它也可以完成这项工作p = JSON.parse(JSON.stringify(products[0]))

标签： javascript arrays object pass-by-reference pass-by-value

【解决方案1】：

来自MDN

Object.assign() 复制属性值。如果源值是对对象的引用，则它只复制该引用值。

由于products[0] 是您数据中的一个对象，这就是您面临这个浅拷贝问题的原因

你可以使用

let p = JSON.parse(JSON.stringify(products[0]));

var products = [{
        name: 'Table',
        price: 200,
        attributes: [{
                name: 'Height',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Width',
                type: 'text',
                default_value: '',
            }
        ],
    },
    {
        name: 'Chair',
        price: 150,
        attributes: [{
                name: 'Height',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Width',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Company',
                type: 'text',
                default_value: ''
            }
        ],
    }
];

var cart = {
    products: [],
};

//console.log('Initial cart',cart);

//add product to cart
let p = JSON.parse(JSON.stringify(products[0]));
 
cart.products.push(p);

//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
console.log('products',products);
console.log('second cart',cart);

【讨论】：

那我该怎么办？ @GeorgeBailey

【解决方案2】：

您只使用 Object.assign 创建浅拷贝，这会导致通过复制引用访问内存中的相同对象。

如果我需要修改通过引用传递的对象或全局对象，并且我不想为所有其他函数/代码部分改变它，我使用这个：https://lodash.com/docs/4.17.10#cloneDeep

let p = _.cloneDeep(products[0]);

【讨论】：