js对象的深度合并

合并对象的方法

• 使用Object.assign(target, source1, source2)
• 使用拓展运算符{...target, ...source1, ...source2}

	let target = {a: 1, b: 2, obj: {x: 1, y:2}}
	let source = {a: -1, c: 3, obj: {z: 3}}
	let merge = Object.assign(target, source)  // {a: -1, b: 2, c: 3, obj: {z: 3}}
	let merge2 = {...target, ...source}  // {a: -1, b: 2, c: 3, obj: {z: 3}}

目标对象target和源对象source合并时，如果它们具有相同的属性，那么源对象source属性会覆盖目标对象target属性。此时我们发现，目标对象target和源对象source中的obj属性也是一个对象，它并没有合并属性，而是简单的覆盖。
我们需要解决的是，如果对象中的属性值也是一个对象，那么该对象也使用合并规则，而不是替换。

const isObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
const deepMerge = (target, source) => {
  if (isObject(target) && isObject(source)) {
  	// 遍历源对象，将源对象存在但目标对象不存在的属性赋值给目标对象
    for (const key in source) {
      if (!target.hasOwnProperty(key)) {
        target[key] = source[key];
      }
    }
    // 遍历目标对象
    for (const key in target) {
      if (source.hasOwnProperty(key)) {
      	// 判断属性值数据类型，若不是对象类型则赋值给目标对象
        if (!isObject(source[key])) {
          target[key] = source[key];
        } else {
          // 是对象类型则递归调用
          deepMerge(target[key], source[key]);
        }
      }
    }
  }
};

	let target = {a: 1, b: 2, obj: {x: 1, y:2}}
	let source = {a: -1, c: 3, obj: {z: 3}}
	deepMerge(target, source)
	console.log('target', target)  // {a:1, b:2, obj: {x:1, y:2, z:3}}

注意： 该方法会改变原target对象，建议包多一层或者深度克隆一个对象进行接收。

使用场景

封装axios，配置默认的参数；
封装echart组件，比如柱状图，设置默认的配置项属性；传一个新的配置项参数与原默认配置项进行深度合并；

// 柱状图组件默认配置项
let defaultOption = {
		tooltip: {
          show: true,
          trigger: "axis", 
        },
		xAxis: {
		  type: 'category',
		  data: []
		},
		yAxis: {
		  type: 'value'
		},
		series: []
		// 其他配置项...
}

// resXData, resYData为请求接口获取数据
let option = {
	xAxis: {
		data: resXData
	},
	series: [
		{
			data: resYData,
      		type: 'bar',
		}
	]
}
deepMerge(defaultOption , option)
// 合并对象进行后续画图操作