Object.assign 没有正确复制答案

【问题标题】：Object.assign does not copy correctlyObject.assign 没有正确复制
【发布时间】：2018-05-25 02:53:06
【问题描述】：

我正在使用 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:

原来的 Object this.roteiroCompleto[0] 也发生了变化。

我尝试复制每个键和值，只复制带有.slice()、.map(a=>a) 的数组，但没有任何效果。这两个对象保持绑定。

当我console.log(this.itemEditado) 时，我得到了这个：

奇怪的是，在另一个 Vue 组件中，我使用了相同的策略，并且有效。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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 支持的原始类型。

【讨论】：

谢谢你，阁楼！我使用npm install --save lodash.clonedeep 安装了cloneDeep 函数并将其导入到我的组件中。现在它工作正常！
lodash 太大了。不值得。只需编写一个以 json 为参数的构造函数

【解决方案2】：

如果您使用的方法不适用于涉及数据类型的对象，请试试这个

import * as _ from 'lodash';

深度克隆对象

myObjCopy = _.cloneDeep(myObj);

【讨论】：

【解决方案3】：

您不必使用库，除非您真的需要深拷贝（我不需要）。只需这样做：

this.editItem = {...item};

... 运算符将 item 分解为其键和值，并且由于您在对象字面量（{ }）中执行此操作，因此它将这些作为新对象的键和值。

可能对像我这样不需要深拷贝的其他人有所帮助。 Object.assign 直截了当是行不通的，而这个行不通。

【讨论】：

{ ...item } 与 Object.assign( {}, item ) 相同，因此都是浅拷贝。如果扩展运算符有效但 Object.assign 无效，那么您的代码肯定也发生了其他变化。
“Object.assign 只是直截了当不起作用”这不是真的
扩展复制是浅拷贝，而不是深拷贝。
@letie 对，我就是这么说的。如果您需要深拷贝，请尝试使用库或this.editItem = JSON.parse(JSON.stringify(item))。