从另一个对象创建新对象而不进行持久更改答案

【问题标题】：Creating new object from another object without persisting changes从另一个对象创建新对象而不进行持久更改
【发布时间】：2018-01-25 18:06:32
【问题描述】：

我使用 Array 作为一些基本样板对象的容器，这些样板对象可以复制并添加到另一个 Array 中，然后进行修改。问题是当我分配对象的新数组所有权时，任何更改都会持续到原始对象（不应更改）。

一个例子：

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = [];

notOriginal.push(originals[0]);

// THIS GIVES ME - notOriginal = [{ name: "One", value: 1 }];

notOriginal[0].name = "Uno";

// THIS RESULTS IN - originals = [{ name: "Uno", value: 1 },...];

我正在尝试保持“原始”变量相同 - 它不应该改变。

我已经用谷歌搜索了很多东西并尝试了一些方法，但不知道在哪里可以找到解决方案。

具体来说，这发生在 VueJS 中，而对象在我的 data() 中

【问题讨论】：

JavaScript - copy array of objects and make changes without modifying original array的可能重复

标签： javascript vue.js

【解决方案1】：

使用JSON.parse & JSON.stringify对其进行深层复制

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(JSON.parse(JSON.stringify(originals[0])));



notOriginal[0].name = "Uno";
console.log(originals)

【讨论】：

【解决方案2】：

您可以使用Object.assign 来制作对象的副本。

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(Object.assign({}, originals[0]));

notOriginal[0].name = "Uno";

console.log(originals);

【讨论】：

【解决方案3】：

Objects are passed by reference.

为了复制一个对象，您可以使用Object.assign({}, obj)，它将返回一个具有 obj 中重复属性的新对象。

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = originals.map(obj => Object.assign({}, obj));

notOriginal[0].name = "bart";
console.log(originals[0], notOriginal[0]);

【讨论】：

【解决方案4】：

我通过使用 jQuery.extend(true, {}, myObj); 找到了解决方案；但仍然想知道这叫什么，以便我能更好地理解这种反应性。

谢谢

【讨论】：