JavaScript：反向对象解构/重构代码以更新对象

Question

TLDR: 如何使用解构加速一个对象基于同一接口的另一个对象的部分更新？

我想使用新的 ECMA2015 - 2017 JavaScript 来重构我的代码。

为简单起见，假设我有一个对象，如下所示：

export interface myObj {
  name:           string;
  id:             number;
  description:    string;
  someBool:       boolean;
  anotherBool:    boolean;
}

（导出界面有效，因为我在 Angular 中使用 Typescript 工作）。

这是旧的 es5 函数：

updateMyObj = function(oldObj, newObj) {
  var someBoolSaved = oldObj.someBool;
  var anotherBoolSaved = oldObj.anotherBool;
  oldObj = newObj;
  oldObj.someBool = someBoolSaved;
  oldObj.anotherBool = anotherBoolSaved;
}

如您所见，该函数应该更新 oldObj 的某些部分，但也保留某些部分。

这是我重构代码的尝试：

updateObj(oldObj, newObj) {
  let {someBool, anotherBool} = oldObj;
  oldObj = newObj;
  // Here is the part where I don't know how to proceed.
}

但我不知道，我现在如何将 oldObj 的布尔值分配给保存的布尔值。

一种不优雅的方式是

oldObj.someBool = someBool;
oldObj.anotherBool = anotherBool;

在这个例子中就可以了。但是在我的实际任务中，这会花费很多行代码，这就是我要重构的原因。

我只是想不出正确的语法。

我的编码尝试类似于这样：

oldObj = {someBool, anotherBool}

但这行不通。

Answer 1

const newObj = { ...oldObject, someBool: true, anotherBool: false};

编辑：

更新旧对象真的是您想做的吗？

在您的原始代码中，您将 oldObj 变异为函数的 side-effect。这通常被认为是不好的做法。下面是一个没有副作用的纯函数的例子。

const firstObj = { name: 'hi', someBool: true, anotherBool: true };
const secondObj = { name: 'bye', someBool: false }; 
const thirdObj = mergeObjects(firstObj, secondObj);
// work with thirdObj from now on

function mergeObjects(firstObj, secondObj): myObj {
  return { 
    ...secondObj,
    firstObj.someBool,
    firstObj.anotherBool 
  }
}

Answer 2

如果要将解构后的值赋给属性，可以通过在解构中 : 的 right-hand 侧指定属性来实现.

例如：下面将newObj.a和newObj.c分配给oldObj.a和oldObj.c：

({a: oldObj.a, c: oldObj.c} = newObj);
//   ^^^^^^^^-----^^^^^^^^---- destinations for a and c

（() 是必需的，否则开头的 { 看起来就像块的开头。如果我们已经在表达式上下文中，则不需要它们。）

const oldObj = {a: "old a", b: "old b"};
const newObj = {a: "new a", c: "new c"};
({a: oldObj.a, c: oldObj.c} = newObj);
console.log(oldObj);

正如 Bergi 在对该问题的评论中指出的那样，它并没有真正让你买多少

oldObj.a = newObj.a;
oldObj.c = newObj.c;

这就是各种 pick notations 流行起来的原因之一（最近才看到 activity）。如果该提案被接受（它甚至还没有冠军，所以不要屏住呼吸），你将有 oldObj.{a, c} = newObj;.

JavaScript：反向对象解构/重构代码以更新对象

JavaScript: Reverse object destructuring / refactoring code to update object

javascript

refactoring

destructuring

ecmascript-6

object-destructuring