Question

：）

TLDR ：如何使用解构来加速基于同一界面的另一个对象更新一个对象的部分？

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

为简单起见，我可以说我有一个对象，看起来像这样：

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

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

这是旧的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的bool分配给已保存的bool。

蹩脚的方式是

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

在这个例子中没问题。但是在我的实际任务中，这需要花费很多行代码，这就是我想重构的原因。

我无法弄清楚正确的语法。

我对此编码的尝试看起来像这样：

oldObj = {someBool, anotherBool}

但这不起作用。

感谢您的帮助！

Answer 1

如果要将结构化值分配给属性，可以通过在解构中指定:右侧的属性来实现。

例如：以下内容将newObj.a和newObj.c分配给oldObj.a和oldObj.c：

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

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

＆＃13;

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);

＆＃13;

正如Bergi在对这个问题的评论中指出的那样，它并没有真正为你买单

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

这是各种pick notations被踢的原因之一（最近一次看到的活动）。如果该提议被接受（并且它甚至还没有冠军，那么请不要屏住呼吸），你就有oldObj.{a, c} = newObj;。

Answer 2

const newObj = {... oldObject，someBool：true，anotherBool：false};

编辑：

是否真的要更新旧对象？

在原始代码中，您将oldObj变为函数的副作用。这通常被认为是不好的做法。以下是没有副作用的纯函数示例。

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 
  }
}

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

2 个答案: