JavaScript中如何将对象属性平铺合并到另一对象（Chart.js场景）

要把公共配置_props的属性直接平铺到dataset对象和label、data同级，直接使用JS的对象展开运算符...即可，这是原生支持的对象属性合并写法，不会产生额外嵌套。

正确写法示例 #

this._props = {
  icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'],
  borderColor: Globals.primary,
  pointBackgroundColor: Globals.primary,
  pointBorderColor: Globals.primary,
  pointHoverBackgroundColor: Globals.foreground,
  pointHoverBorderColor: Globals.primary,
  borderWidth: 2,
  pointRadius: 2,
  pointBorderWidth: 2,
  pointHoverBorderWidth: 2,
  pointHoverRadius: 5,
  fill: false,
};
this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
      label: 'BTC / USD',
      data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
      ...this._props, // 展开公共配置，所有属性自动平铺到当前dataset对象
    },
  ],
});

补充说明 #

• 展开运算符会将this._props的所有可枚举属性浅拷贝到当前对象，最终生成的结构和你手动把所有样式属性逐行写在dataset里完全一致，符合你需要的效果。
• 如果单个图表需要调整公共配置里的某一项，只需要在...this._props之后重写同名属性即可，后写的属性优先级更高，会覆盖公共配置的对应值，非常方便做差异化调整，示例：

{
  label: 'ETH / USD',
  data: [231.2, 235.6, 233.9, 240.1, 238.7],
  ...this._props,
  borderColor: Globals.success, // 单独覆盖当前图表的边框颜色
  pointBackgroundColor: Globals.success
}

• 如果你的项目构建环境过于老旧不支持ES6展开语法，可以使用Object.assign实现完全相同的合并效果，写法如下：

datasets: [
  Object.assign({
    label: 'BTC / USD',
    data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
  }, this._props)
]

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