合并对象 3 种方式

目录

方式一：扩展运算符 ...

方式二：Object.assign(目标对象，来源对象) 合并对象

方式三：for...in

---

• 扩展运算符和 Object.assign() 只能合并简单数据类型，引用数据类型当属性名相同时，属性值不会进行合并，只会返回后面的属性值；引用数据类型当属性名不同时，直接合并返回
• 合并对象有 2 种方式：扩展运算符和 Object.assign()
• 扩展运算符和 Object.assign() 里面的第一级属性深拷贝，以后级别属性浅拷贝
• Object.assign() 支持多个对象合并，如果不想修改目标对象，可以将目标对象改成空对象 {}
• Object.is() 判断 2 个值是否相等属于严格比较

方式一：扩展运算符 ...

• 扩展运算符合并对象当键名（属性名）相同时后面替换前面的

const x = {
  a: 3,
  b: 4,
}
const y = {
  b: 5,
  d: 6,
}
const res = {...x, ...y}
console.log(res) // {a: 3, b: 5, d: 6}

• 深拷贝修改数据不会互相影响

const x = {
  a: 3,
  b: 4
}
const y = {...x} // 拷贝一个对象
y['c'] = 5
console.log(x) // {a: 3, b: 4}
console.log(y) // {a: 3, b: 4, c: 5}

• 第一级属性深拷贝，以后级别属性浅拷贝
• 浅拷贝修改数据互相影响

const x = {
  a: 3,
  b: {
	c: 4,
  }
}
const y = {...x}
y['b']['c'] = '数字4'
console.log('x', x) // {a: 3, b: {c: '数字4'}}
console.log('y', y) // {a: 3, b: {c: '数字4'}}

• Object.is() 判断 2 个值是否相等属于严格比较

const x = {
  a: 3,
  b: 4
}
const y = {...x} // 拷贝一个对象
const isEqual1 = Object.is(x, y)
console.log(isEqual1) // false

const z = x // 简单赋值
const isEqual2 = Object.is(x, z)
console.log(isEqual2) // true

方式二：Object.assign(目标对象，来源对象) 合并对象

• 来源对象往目标对象合并，返回目标对象
• 如果目标对象、来源对象第一级属性名相同（键名）时，来源对象中的属性会替换目标对象中的属性，可以理解成后面替换前面属性中相同的键

const x = {
  a: 3,
  b: 4,
}
const y = {
  b: 5,
  d: 6,
}
const res1 = Object.assign(x, y)
console.log(res1) // {a: 3, b: 5, d: 6}
console.log(x) // {a: 3, b:5, d: 6}

const res2 = Object.is(x, res1)
console.log(res2) // true

• Object.assign() 支持多个对象合并，如果不想修改目标对象，可以将目标对象改成空对象 {}

const res = Object.assign({}, source1，source2)

• source1 和 source2 之间普通数据类型相同属性名直接覆盖
• source1 和 source2 之间引用数据类型相同属性名，不会对对象属性进行合并，直接返回后面属性对象

const source1 = {
  a: 3,
  b: {
	c: 4,
	d: {
	  f: 5
	},
	h: 6
  }
}
const source2 = {
  a: 3,
  b: {
	c: 44,
	d: {
	  e: 55
	}
  }
}
const res = Object.assign({}, source1, source2)
console.log(res) // {a: 3, b: {c: 44, d: {e: 55}}}

• 第一级属性深拷贝，以后级别属性浅拷贝

// 深拷贝
const x = {
  a: 3,
  b: 4
}
const res  = Object.assign({}, x)
res['c'] = 5
console.log('res', res) // {a: 3, b: 4, c: 5}
console.log('x', x) // {a: 3, b:4}

// 浅拷贝
const x = {
  a: 3,
  b: {
	c: 4,
  }
}
const res = Object.assign({}, x)
res['b']['c'] = '44'
console.log(res) // {a: 3, b: {c: 4}}
console.log(x) // {a: 3, b: {c: 4}}

• 深拷贝建议使用深拷贝函数，不建议使用扩展运算符和 Object.assign()
• 如果使用扩展运算符和 Object.assign() 对第一层以后的对象进行深拷贝需要一层一层展开，比较麻烦容易蒙圈，拷贝的不彻底

方式三：for...in

• 简单数据类型合并

const x = {
  a: 3,
  b: 4,
}
const y = {
  b: 5,
  d: 6,
}
for(let key in y){
	x[key] = y[key]
}
console.log('x', x, 'y', y)

 

 

•  引用数据类型合并

const source1 = {
  a: 3,
  b: {
		c: 4,
		d: {
			f: 5
		},
		h: 6
  }
}
const source2 = {
  a: 3,
  b: {
		c: 44,
		d: {
			e: 55
		}
  }
}
for(let key in source2){
	source1[key] = source2[key]
}
console.log('source1', source1, 'source2', source2)

 

递归实现深拷贝_taoqidejingling的博客-CSDN博客使用递归实现深拷贝，JSON.stringify()和JSON.parse()组合也可以实现深拷贝；基本数据类型和引用数据类型。https://blog.csdn.net/taoqidejingling/article/details/122716725