【问题标题】:Replace a one javascript object with another object用另一个对象替换一个 javascript 对象
【发布时间】:2012-12-05 22:20:56
【问题描述】:

在页面加载时,我正在创建两个 Javascript 对象,objDemo1objDemo1Backup,其中后者只是第一个的精确副本。

例如

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...我只是无法弄清楚替换对象的语法。

【问题讨论】:

  • 我假设正在发生的事情是因为objDemo1objDemo1Backup 都指向同一个对象,所以当您更改一个对象时,两者都会更改。这可能看起来不直观,但它是 javascript 的工作方式。 Google “javascript 克隆对象” 了解更多详情。
  • 你在玩对象引用,而不是克隆它。您应该克隆您的对象,而不是使用 = 分配它

标签: javascript reset javascript-objects


【解决方案1】:

在 JavaScript 中,对象是通过引用传递的,而不是通过值传递的。所以:

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

要获得副本,您必须使用复制功能。 JavaScript 本身没有,但这里有一个 clone 实现:How do I correctly clone a JavaScript object?

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

【讨论】:

  • 因此,如果我想将 objDemo 重置为 objDemoBackup 的克隆点,我会这样做:objDemo = clone(objDemoBackup);
  • 是的,你必须再次克隆它,否则你会得到一个参考:)
【解决方案2】:

我正在使用 angularjs,我花了一些时间来了解如何将一个对象复制到另一个对象。通常,您将通过调用 clone 或在此处以角度 copy 获得对象克隆:

var targetObj = angular.copy(sourceObj);

这为您提供了源对象的新克隆实例(带有新引用)。但是快速查看文档会发现 copy 的第二个参数:

angular.copy(sourceObj, targetObj)

这样,您可以使用源的字段和方法覆盖目标对象并且还可以保留目标对象的引用。

【讨论】:

  • 正是我想要的。我不知道angular.copy 可以获取目标对象。谢谢!
  • 本题没有AngularJS标签。
【解决方案3】:

您可以使用Object.assign

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

它占用两个参数:targetsource。当函数完成时,target 对象的所有内部都将附加source 一个。

【讨论】:

  • 不完全是,它是合并而不是替换。在链接中的 MDN 示例中,更新后的目标具有属性“a”,而源没有。在 OP 的示例中,属性具有相同的名称,因此这不是问题。
  • 正如@AlienTechnology 所说 Object.assign 不会创建新实例
猜你喜欢
  • 2018-04-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-01-08
  • 1970-01-01
  • 2020-03-15
  • 2012-07-22
相关资源
最近更新 更多