JavaScript，在不丢失引用的情况下覆盖对象

Question

申请

我正在开发一个构建在 AngularJS 之上的简单 Web 应用程序。该应用程序应该能够离线和在线工作。当用户离线时，对数据的更改存储在本地。因此，此应用程序在离线模式下使用的 ID 只是临时 ID，上传到服务器时会被替换

问题

应用程序中使用的数据由复杂的对象(与其他对象的关系/引用)组成。当我保存到服务器时，我希望 View 使用新的“真实”ID 进行更新。然而，由于 JavaScript 使用对象作为引用，我无法做我想做的事情:$scope.data = newdata这不是覆盖 $scope.data 而是创建一个新对象。对旧数据的旧引用仍然存在。

简化示例

var x = {id: 1, name: "myObject"}
var c = x    // c = {id: 1, name: "myObject"}
x = {id: 2, name: "myNewObject"} 
// c = {id: 1, name: "myObject"}

如您所见，c 仍然是对旧对象的引用。实际上，这会导致我的视​​图未使用新数据更新，因为它仍然绑定(bind)到旧数据。我需要做的是覆盖 x 的属性，在这个例子中。我需要递归地执行此操作，因为我的真实对象很复杂，但是它不应该输入任何循环引用，因为这可能会导致堆栈溢出。如果我用 b 覆盖 a 并且 a 具有 b 没有的属性，则应删除这些属性。

我需要什么

我需要某种函数来用 b(新对象)中的属性覆盖 a(旧对象)中的所有属性。应删除存在于 a 但不存在于 b 中的所有属性。

Answer 1

如果您的环境支持 ECMAScript 2015，您可以使用 Object.assign() :

'use strict'

let one = { a: 1, b: 2, c: 3 };
let two = { b: 20, c: 30, d: 40 };

let three = Object.assign({}, one, two);

console.log(three);

// will output: Object {a: 1, b: 20, c: 30, d: 40}

(let 是 ECMAScript 2015 中 var 的新本地范围版本)more.. .

---

所以对于您的简单示例:

var x = { id: 1, name: "myObject" };
Object.assign(x, { id: 2, name: "myNewObject" });

console.log(x);

// will output: Object {id: 2, name: "myNewObject"}