如何使用 JS 动态合并两个对象的属性

作者：Abhilash Kakumanu

译者：前端小智

来源：stackak

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

我们可以使用扩展操作符(...)将不同的对象合并为一个对象，这也是合并两个或多个对象最常见的操作。

这是一种合并两个对象的不可变方法，也就是说，用于合并的初始两个对象不会因为副作用而以任何方式改变。最后，我们得到了一个新对象，它由这两个对象构造而成，而它们仍然保持完整。

我们创建两个对象并合并它们：

const person = {

name: “前端小智”,

age: 24

}

const job = {

title: “前端开发”,

location: “厦门”

}

const employee = {…person, …job};

console.log(employee);

运行结果：

{

name: ‘前端小智’,

age: 24,

title: ‘前端开发’,

location: ‘厦门’

}

注意：如果这两个对象之间有共同的属性，例如它们都有location，则第二个对象（job）的属性将覆盖第一个对象（person）的属性：

const person = {

name: “前端小智”,

location: “北京”

}

const job = {

title: “前端开发”,

location: “厦门”

}

const employee = {…person, …job};

console.log(employee);

运行结果：

{

name: ‘前端小智’,

location: ‘厦门’,

title: ‘前端开发’

}

如果要合并两个以上的对象，最右边的对象将覆盖左边的对象。

使用 Object.assign() 合并JavaScript对象

并两个或多个对象的另一种常用方法是使用内置的Object.assign()方法：

Object.assign(target, source1, source2, …);

此方法将一个或多个源对象中的所有属性复制到目标对象中。就像扩展操作符一样，在覆盖时，将使用最右边的值:

const person = {

name: “前端小智”,

location: “北京”,

};

const job = {

title: “前端开发”,

location: “厦门”,

};

const employee = Object.assign(person, job);

console.log(employee);

运行结果：

{

name: ‘前端小智’,

age: 24,

location: ‘厦门’,

title: ‘前端开发’

}

同样，请记住employee引用的对象是一个全新的对象，不会链接到person或job引用的对象。

浅合并和深合并

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?