用另一个javascript对象替换一个对象

Question

在页面加载时，我创建了两个JavaScript对象：objDemo1和objDemo1Backup，其中后者只是第一个对象的精确副本。

例如：

objDemo1 { 
    sub_1 = { something: 123, somethingElse: 321 },
    sub_2 = { something: 456, somethingElse: 654 }
}

我可以修改sub_中的值，还可以添加/删除新的sub_，但是我只编辑的对象是objDemo1。也就是说，我从不更改objDemo1Backup。

我有一个重置按钮，当单击时，将objDemo1重置为页面最初加载时的状态（即objDemo1 = objDemo1Backup）。这就是我的问题所在。

如何将objDemo1设置为objDemo1Backup？

我尝试过：

objDemo1 = objDemo1Backup;

和

objDemo1 = null;
var objDemo1 = objDemo1Backup;

......以及类似的变体，但似乎都不起作用。有什么想法吗？

• 注意：我可以确认在重置的时候，objDemo1Backup与我创建它时完全相同，而objDemo1已经发生了变化。
• 我的代码肯定会触发“重置”功能，在那里我尝试过 objDemo1 = objDemo1Backup ...我只是无法弄清楚替换对象的语法。

- Adam Tomat

---

我假设发生的情况是由于objDemo1和objDemo1Backup同时指向同一对象，因此当您更改其中一个时，两个都会被更改。这可能看起来不太直观，但这是Javascript的工作方式。请谷歌搜索“javascript克隆对象”了解更多详情。 - Shmiddty

你正在使用对象引用，而不是克隆它。你应该使用克隆对象而不是使用 = 进行赋值。 - LittleSweetSeas

Answer 1

我正在使用 angularjs，花费了一些时间才发现如何将一个对象复制到另一个对象。通常情况下，您可以通过调用 clone 或者在 Angular 中使用 copy来获得对象的克隆：

var targetObj = angular.copy(sourceObj);

这将为您提供源对象的新克隆实例（具有新引用）。但是，快速查看文档会揭示copy的第二个参数：

angular.copy(sourceObj, targetObj)

通过这种方式，您可以使用源对象的字段和方法覆盖目标对象，同时保留目标对象的引用。

- schmijos

---

正是我正在寻找的。我不知道 angular.copy 可以使用目标对象。谢谢！ - Scotty Waggoner

此问题中没有AngularJS标签。 - Michał Perłakowski

Answer 2

在 JavaScript 中，对象是通过引用传递的，而不是通过值传递的。因此：

var objDemo, objDemoBackup;
objDemo = {
    sub_1: "foo";
};
objDemoBackup = objDemo;
objDemo.sub_2 = "bar";
console.log(objDemoBackup.sub_2);   // "bar"

要获取一份副本，您必须使用复制函数。JavaScript 本身没有这个功能，但是这里有一个 clone 实现：如何正确地克隆 JavaScript 对象？

var objDemo, objDemoBackup;
objDemo = {
    sub_1: "foo";
};
objDemoBackup = clone(objDemo);
objDemo.sub_2 = "bar";
console.log(objDemoBackup.sub_2);   // undefined

- Halcyon

---

所以，如果我想将 objDemo 重置为克隆点 objDemoBackup 的内容，我会这样做：objDemo = clone(objDemoBackup); - Adam Tomat

是的，你必须再次克隆它，否则你会得到一个引用 :) - Halcyon

Answer 3

你可以使用 Object.assign。最初的回答已经包含了你需要的信息。

ObjectConstructor.assign(target: T, source: U): T & U

它需要两个参数：目标和源。函数完成后，目标对象的所有内部都将附加上源对象的内容。"最初的回答"

- ivanjermakov

---

不完全相同，这是合并而不是替换。在您链接中的MDN示例中，更新的目标具有属性“a”，而源没有。在OP的示例中，属性具有相同的名称，因此这不是问题。 - Alien Technology

正如@AlienTechnology所述，Object.assign不会创建新实例。 - José Salgado

Object.assign 不会替换对象，而是与其合并。 - keyboard-warrior