Object.assign이 올바르게 복사되지 않습니다.

Object.assign이 올바르게 복사되지 않습니다.

저는 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에서도 같은 전략을 사용했는데 효과가 있다는 것입니다.

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

객체를 상세하게 복사하려면 lodash에서 cloneDeep 함수 같은 것을 사용하거나 다음과 같은 기능을 사용하여 보다 추악한 접근 방식을 취할 수 있습니다.JSON.parse( JSON.stringify( obj ) ).

두 번째 옵션은 JSON에서 지원되는 기본 유형에서만 작동합니다.

데이터 유형이 포함된 개체에서 사용한 방법이 제대로 작동하지 않는 경우 다음을 수행하십시오.

import * as _ from 'lodash';

딥 클론 오브젝트

myObjCopy = _.cloneDeep(myObj);

정말로 상세한 카피가 필요 없는 한, 라이브러리를 사용할 필요는 없습니다(필요없었습니다).다음 작업을 수행합니다.

this.editItem = {...item};

그...연산자가 분해됩니다.item오브젝트 리터럴로 하고 있기 때문에 (the abject literal){ }） 。이것들을 새 객체의 키와 값으로 사용합니다.

나처럼 복사가 필요 없는 사람들에게 도움이 될 거야 Object.assign그냥 직설적으로만 되는 게 아니라 이건 되는 거야

언급URL : https://stackoverflow.com/questions/50520832/object-assign-does-not-copy-correctly