1 使用 Object.assign()
Object.assign() 方法可以用来合并一个或多个对象到目标对象中。它的第一个参数是目标对象，后面的参数都是源对象。
<script>window.onload = function () {const obj1 = { a: 1, b: 2 };const obj2 = { b: 3, c: 4 };const mergedObj = Object.assign({}, obj1, obj2);console.log(mergedObj); }</script>输出结果为: { a: 1, b: 3, c: 4 }，如下图：
注意：如果目标对象和源对象有相同的键，那么源对象的键值会覆盖目标对象的键值。
2 使用扩展运算符 (...)
ES6 引入了扩展运算符，它可以用来复制可枚举的属性到新的对象中。
<script>window.onload = function () {const obj1 = { a: 1, b: 2 };const obj2 = { b: 3, c: 4 };const mergedObj = { ...obj1, ...obj2 };console.log(mergedObj)}</script>结果如下：
3 使用 Object.assign() 和扩展运算符组合
如果你想要合并的对象中有方法或者需要保持原有对象不变，你可以使用 Object.assign() 和扩展运算符的组合：
<script>window.onload = function () {const obj1 = { a: 1, b: 2, method: function() { console.log('method from obj1'); } };const obj2 = { b: 3, c: 4, method: function() { console.log('method from obj2'); } };// 使用 Object.assign 来合并方法const mergedObj = Object.assign({}, obj1, obj2, { ...obj1, ...obj2 });console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4, method: [Function (anonymous)] }// 或者使用扩展运算符const mergedObj2 = { ...obj1, ...obj2, ...obj1 };console.log(mergedObj2); // 输出: { a: 1, b: 2, c: 4, method: [Function (anonymous)] }}</script>结果如下：
4 注意事项
- 如果对象中有相同的键，那么后一个对象的值会覆盖前一个对象的值。
- 使用 Object.assign() 和扩展运算符时，默认只会浅拷贝第一层属性。如果对象包含嵌套的对象，你需要进行深拷贝。
- 如果你希望进行深拷贝，可以考虑使用第三方库如 lodash 的 _.merge() 方法。