vue：js中合并对象的方法

目前比较常用的一共有三种

1、使用object.assign()

它可以将一个或多个对象的属性复制到目标对象中，第一个参数就是目标对象，这里举个例子：

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '李四', age:23 }
		const obj3 = Object.assign({},obj1,obj2);
		this.data = obj3
	}
    
  },
};
</script>

这个代码的意思就是将obj1和obj2的每个对象通过object.assign()合入第一个空对象赋值给obj3，然后obj3在赋值给data，让data在视图层显示，如果存在属性相同的情况，后面的会覆盖前面的属性

2、通过es6中的解构赋值语法

这个方法主要使用的是扩展运算符，将一个对象解构到另外一个对象中，这里举个例子：

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '男', age:23 }
		const obj3 = {...obj1, ...obj2}
		this.data = obj3
	}
    
  },
};
</script>

输出结果：

这个方法也是和第一个方法一样，如果两个对象有相同的属性时，后面的属性会覆盖前面的属性。

3、遍历对象获取到对象的属性赋值给新的对象

这里也是举个例子：

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '男', age:23 }
		const obj3 = {}
		for(const key in obj1){
			obj3[key] = obj1[key]
		}
		for(const key in obj2){
			obj3[key] = obj2[key]
		}
		this.data = obj3
	}
    
  },
};
</script>

然后把遍历到的属性手动赋值到obj3上。

总结：

大多数使用合并对象的方法主要是object.assign()、es6中的解构赋值语法、以及循环遍历，原理都是获取每个对象的属性合入新的对象中。只是方法不同。