如何动态使用Object.assign处理多值对象？

嘿，我来帮你搞定这个问题～ 看得出来你之前只处理了drivers数组里的第一个对象，现在数组里有多个driver条目，想要给每个都通过Object.assign加上enable和checked属性对吧？

核心思路：遍历数组逐个处理 #

直接用数组的map方法遍历整个drivers数组，对每个元素执行Object.assign操作就可以啦，这样就能动态处理所有的driver对象。

修改后的代码长这样：

saveNewDriver() {
  console.log(this.driverForm.value.drivers, 'driver save');
  // 遍历每个driver，合并属性生成新对象
  const submittedForms = this.driverForm.value.drivers.map(driver => 
    Object.assign({}, driver, { enable: true }, { checked: false })
  );
  // 逐个提交每个处理后的driver对象
  submittedForms.forEach(form => {
    this.store.select('drivers').dispatch(new createDriver(form));
  });
  // 要是你的createDriver支持接收数组参数，也可以直接传整个submittedForms，省得遍历
  // this.store.select('drivers').dispatch(new createDriver(submittedForms));
}

为啥这么写？ #

• map会返回一个全新的数组，每个元素都是原driver对象和新增属性合并后的结果（用空对象当第一个参数，是为了不修改原来的driver对象，避免意外副作用）
• 后面的forEach是把每个处理好的对象单独dispatch，如果你的action支持批量处理，直接传整个数组会更高效，根据你的实际业务调整就行

更简洁的写法（可选） #

如果你的项目支持ES6扩展运算符，还可以用更清爽的写法替代Object.assign，效果完全一样：

const submittedForms = this.driverForm.value.drivers.map(driver => ({
  ...driver,
  enable: true,
  checked: false
}));

这种写法也是创建新对象，把原属性和新增属性合并，同样不会改动原数组里的对象。

内容的提问来源于stack exchange，提问作者user2338925