Object.assign 无法正确复制

Question

I'm working with VueJS.

I have a Method that receives a Object as argument.

Then I clone this Object with Object.assign() .

Component.vue

export default {
  // ...
  methods: {
    // ...
    activateEditMode (item) {
      this.editItemIndex = this.travelItinerary.indexOf(item)
      this.editItem = Object.assign({}, item)
      // ...
    }
  }
}

The original Object at this.roteiroCompleto[0] :

But when I edit the clone Object this.itemEditado :

the original Object this.roteiroCompleto[0] changes too.

I tried to copy each key and value, copy only the Array with .slice() , .map(a=>a) , and nothing works. The two objects keep binding.

When I console.log(this.itemEditado) , I get this:

The strange thing is, in another Vue Component, I use the same strategy, and it works.

Answer 1

Object.assign only does a shallow copy of the keys and values, meaning if one of the values in the object is another object or an array, then it is the same reference as was on the original object.

var x = { a: 10, b: { c: 100 } };
var y = Object.assign({}, x);

y.a = 20;
console.log( x.a, y.a ); // prints 10 20

y.b.c = 200;
console.log( x.b.c, y.b.c ) // prints 200 200

To deep copy an object, you can using something like the cloneDeep function in lodash or take an uglier approach using built in functions with JSON.parse( JSON.stringify( obj ) ) .

Note that the second option will only work with primitive types that are supported by JSON.

Answer 2

If the methods you used isn't working well with objects involving data types, try this

import * as _ from 'lodash';

Deep clone object

myObjCopy = _.cloneDeep(myObj);

Answer 3

来自MDN的解决方案

 Object.assign(this.editItem, JSON.parse(JSON.stringify(item)))

Answer 4

In 2022, to deep clone objects natively on JavaScript you can use structuredClone

The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.

MDN structuredClone()

Answer 5

You don't have to use a library, unless you really need a deep copy (I did not need one). Just do this:

this.editItem = {...item};

The ... operator will decompose item into its keys and values, and since you're doing that in an object literal (the { } ), it uses those as the keys and values of the new object.

Might be helpful to other people who, like me, don't need a deep copy. Object.assign just straight-up doesn't work, and this does.