vue：js中合并对象的方法

对象的方法"/>

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中的解构赋值语法、以及循环遍历，原理都是获取每个对象的属性合入新的对象中。只是方法不同。