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

Posted 2023-02-25

【中文标题】在Javascript中分配对象内部的数组

【英文标题】：Assigning array inside object in 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]))

【参考方案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]);