复杂对象的扩展语法答案

【问题标题】：Spread syntax for complex objects复杂对象的扩展语法
【发布时间】：2019-08-26 11:33:33
【问题描述】：

假设我有一个这样的对象

let store = {
  "articles": [{...}, {...}, ...],
  "errors": { "p1": { "myNewObject":0 }, "p2": {...}, ...}
}

我想利用Spread syntax 返回此对象的克隆，其中store.errors.p1 是一个新对象。以下是最简单的方法吗？

let newStore = { ...store, ...{ errors: { ...store.errors, p1: { "myNewObject":1 } } } }

【问题讨论】：

是的。 ---
@x539，不，不是，errors 周围的展开和括号可以去掉
@jo_va 你的权利，一定有监督

标签： javascript spread-syntax ecmascript-2018

【解决方案1】：

不，克隆您的商店并深拷贝p1 并不是最简单的语法，但它非常接近：

let newStore = { ...store, ...{ errors: { ...store.errors, p1: { myNewObject: 1 } } } }
//                         ^^^^                                                     ^
//                           |_______ not necessary ________________________________|

您可以删除errors 周围的多余展开和括号。

const store = { articles: [{ a: 1 }], errors: { p1: { myNewObject: 0 }, p2: { a: 1 } } }

const newStore = { ...store, errors: { ...store.errors, p1: { myNewObject: 1 } } }

console.log(JSON.stringify(store))
console.log(JSON.stringify(newStore))

【讨论】：

【解决方案2】：

如果您觉得这不可读，那么您可以使用 reduce 迭代 errors 对象并首先更新该对象，然后使用扩展语法。它可能会增加一些代码行，但会为了可读性而偏移。

const updatedkey = "p1";
const updatedData = {
  "myNewObject": 1
};
const store = {
  "articles": [{
    ...
  }, {
    ...
  }],
  "errors": {
    "p1": {
      "myNewObject": 0
    },
    "p2": {
      ...
    },
  }
};
const updatedErrors = Object.keys(store.errors).reduce((acc, key) => {
  const acc[key] = store.errors[key];

  if (key === updatedkey) {
    acc[key] = {
      ...acc[key],
      ...updatedData
    }
  }

  return acc;
}, {});

const newStore = {
  ...store,
  errors: updatedErrors
};

【讨论】：

【解决方案3】：

您也可以使用 lodash.clonedeep，然后只需使用 store.errors.p1 = { "myNewObject": 1} 更改该属性。

或者，如果您愿意，您可以创建一个函数 assocIn（受 clojue 启发），以更惯用的方式执行此操作：

const assocIn = (obj, [key, ...rest], value) => 
    ({...obj, [key]: rest.length == 0 ? value : assocIn(obj[key], rest, value)});
store = assocIn(store, ['errors', 'p1'], { "myNewObject": 1})

【讨论】：