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

Question

我有 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 属性而不是购物车属性。

请帮我解决这个问题。

Answer 1

来自MDN

Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

并且由于 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);

Answer 2

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

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

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

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

Assigning array inside object in Javascript

javascript

arrays

object

pass-by-reference

pass-by-value