Object.assign не копирует правильно

Question

Я работаю с VueJS.

У меня есть метод, который получает объект в качестве аргумента.

Затем я клонирую этот объект с Object.assign().

Component.vue

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

Исходный объект в this.roteiroCompleto[0]:

Но когда я редактирую клон объекта this.itemEditado:

оригинальный объект this.roteiroCompleto[0] тоже меняется.

Я попытался скопировать каждый ключ изначение, скопируйте только массив с .slice(), .map(a=>a), и ничего не работает.Два объекта продолжают связываться.

Когда я console.log(this.itemEditado), я получаю это:

Странная вещь в другомVue Component, я использую ту же стратегию, и она работает.

Answer 1

Вам не нужно использовать библиотеку, если вам действительно не нужна глубокая копия (она мне не нужна).Просто сделайте это:

this.editItem = {...item};

Оператор ... разложит item на его ключи и значения, и, поскольку вы делаете это в литерале объекта ({ }), он использует текак ключи и значения нового объекта.

Может быть полезным для других людей, которым, как и мне, не нужна глубокая копия.Object.assign просто прямолинейность не работает, и это работает.

Answer 2

Object.assign делает только поверхностную копию ключей и значений, то есть если одно из значений в объекте является другим объектом или массивом, то это та же ссылка, что и на исходный объект.

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

Для глубокого копирования объекта вы можете использовать что-то вроде функции cloneDeep в lodash или использовать более уродливый подход, используя встроенные функции с JSON.parse( JSON.stringify( obj ) ).

. Обратите внимание, чтоВторой вариант будет работать только с примитивными типами, которые поддерживаются JSON.