使用Object.assign合并Chart.js配置对象时出现覆盖问题求助

我之前在处理Chart.js配置合并的时候也踩过这个坑！咱们先理清楚问题出在哪：

为什么Object.assign会导致覆盖？ #

Object.assign() 是浅拷贝方法，它只会合并对象的第一层属性。如果你的 xOptions 和 yOptions 是嵌套结构（比如都包含 scales 下的轴配置），当两个对象有同名的嵌套属性时，后面的对象会直接替换掉前面的，而不是递归合并内部的属性。

举个例子，假设你的配置是这样的：

const xOptions = {
  scales: {
    x: {
      title: {
        display: true,
        text: '用户输入的X轴标签',
        font: { size: 16 }
      }
    }
  }
};

const yOptions = {
  scales: {
    y: {
      title: {
        display: true,
        text: '用户输入的Y轴标签',
        font: { size: 14 }
      }
    }
  }
};

// 用Object.assign合并，scales会被yOptions的scales完全覆盖
const chartOptions = Object.assign({}, xOptions, yOptions);
// 此时chartOptions.scales里只有y轴的配置，X轴的配置丢了！

解决方案：深合并对象 #

要解决这个问题，我们需要深合并——也就是递归合并所有层级的对象属性，而不是只替换顶层属性。你提到的jQuery $.extend(true, {}, xOptions, yOptions) 就是完美的方案：

• 第一个参数 true 开启深拷贝/深合并模式
• 第二个参数 {} 是目标空对象，避免修改原有的 xOptions 和 yOptions
• 后续参数是要合并的源对象，会按顺序递归合并到目标对象中

代码示例：

// 深合并后，scales里会同时保留x和y轴的配置
const chartOptions = $.extend(true, {}, xOptions, yOptions);

// 然后把chartOptions赋值给Chart.js的options
const myChart = new Chart(ctx, {
  type: 'line', // 你的图表类型
  data: chartData,
  options: chartOptions
});

如果项目里没有引入jQuery，也可以自己实现一个简单的深合并函数，或者使用lodash的 _.merge() 方法，效果是一样的。

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