TypeScript中如何将对象数组展开合并到已有对象？

你当前通过map生成了一个对象数组：

const calcRowCssClasses = (<string[]>context.dataItem.cssClasses).map(
  (cssClass) => {
    return { [cssClass]: true };
  }
);

得到的结果是：

[
  { "custom-calcrow-1": true },
  { "custom-calcrow-2": true }
]

你尝试用{ calcrow: true, ...calcRowCssClasses }合并时，得到带数组索引键的对象，这是因为展开运算符作用于数组时，会将数组索引作为对象键，数组元素作为对应值，所以才会出现0、1这类键。

下面提供几种解决方法：

方法1：使用Object.assign #

Object.assign可接收多个对象参数，将后续对象的属性合并到第一个对象中。通过展开对象数组，把每个对象作为单独参数传入：

const finalObj = Object.assign({ calcrow: true }, ...calcRowCssClasses);

执行后finalObj即为预期结果：

{
  "calcrow": true,
  "custom-calcrow-1": true,
  "custom-calcrow-2": true
}

方法2：使用数组reduce方法 #

通过reduce遍历对象数组，逐个将对象属性合并到初始对象上：

const finalObj = calcRowCssClasses.reduce((acc, current) => {
  return { ...acc, ...current };
}, { calcrow: true });

这里acc是累加器（初始值为{ calcrow: true }），每次迭代都把当前对象current的属性展开合并到acc中。

方法3：优化初始生成逻辑（一步到位） #

既然最终目标是生成单个对象，可跳过map生成数组的步骤，直接用reduce构建目标对象：

const finalObj = (<string[]>context.dataItem.cssClasses).reduce((acc, cssClass) => {
  acc[cssClass] = true;
  return acc;
}, { calcrow: true });

这种方式更高效，无需额外处理对象数组，直接得到最终结果。

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