通过合并对象，我发现了Object.assign的更多用法

关联精彩文章：# 改进tabs组件切换效果，丝滑的动画获得一致好评~

对象合并

��端开发过程中，我们经常会遇到需要合并对象的地方，比如把下面两个对象进行合并

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

前端新手的我，通过循环遍历对象的键值对，高难度复杂的完成了这个需求

function mergeObjects(target, ...sources) {
  sources.forEach(source => {
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        target[key] = source[key];
      }
    }
  });
  return target;
}

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = mergeObjects({}, obj1, obj2);
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

同事看到我的代码，也为竖起了大拇指，然后给我说了很多简单方案

使用扩展运算符

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

使用 Object.keys 和 forEach 方法

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = {};
Object.keys(obj1).forEach(key => {
  mergedObject[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
  mergedObject[key] = obj2[key];
});

console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

使用 Object.assign

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = Object.assign({}, obj1, obj2);
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

上面的方法都很不错，我学到了很多，但我对Object.assign情有独钟，我决定研究一番！

Object.assign的用法及使用场景

Object.assign用法简介

Object.assign() 官方是这么介绍的：它用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

简单来说就是：它可以用于复制对象的属性，合并对象，以及创建对象的浅拷贝。

它的语法如下

Object.assign(target, ...sources)

• target：目标对象。
• sources：源对象。
• 返回值：目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const newTarget = Object.assign(target, source);

console.log(target);
// { a: 1, b: 4, c: 5 }

console.log(newTarget);
//  { a: 1, b: 4, c: 5 }

Object.assign 会将源对象（source）的属性复制到目标对象（target），并返回目标对象。因此，target 和 newTarget 会指向同一个对象，并且这个对象包含合并后的属性。

注意事项

• 浅拷贝 ：Object.assign 执行的是浅拷贝，即如果属性值是对象，则只复制对象的引用。
• 目标对象的修改 ：目标对象（target）会被修改，原来的属性值会被覆盖。

使用场景

除了用来简单的合并对象，我发现了它还有下面的一些使用场景

为对象添加属性

你可以使用 Object.assign 为一个对象添加新的属性或方法。

const person = { name: '快乐就是哈哈哈' };

Object.assign(person, { age: 18, profession: 'Engineer' });
console.log(person); // 输出: { name: '快乐就是哈哈哈', age: 18, profession: 'Engineer' }

创建对象的浅拷贝

你可以使用 Object.assign 创建对象的浅拷贝。注意，这只是浅拷贝，嵌套的对象仍然会共享引用。

const original = { a: 1, b: { c: 2 } };

const copy = Object.assign({}, original);
console.log(copy); // 输出: { a: 1, b: { c: 2 } }

// 修改原对象中的嵌套对象会影响到拷贝对象
original.b.c = 3;
console.log(copy.b.c); // 输出: 3

合并多个源对象

你可以使用 Object.assign 将多个源对象的属性合并到目标对象中。

const target = {};
const source1 = { a: 1 };
const source2 = { b: 2 };
const source3 = { c: 3 };

Object.assign(target, source1, source2, source3);
console.log(target); // 输出: { a: 1, b: 2, c: 3 }

为对象设置默认值

你可以使用 Object.assign 为一个对象设置默认值。如果目标对象中已经存在某个属性，它将不会被覆盖。

const settings = { volume: 5, brightness: 70 };
const defaultSettings = { volume: 10, brightness: 50, contrast: 100 };

const mergedSettings = Object.assign({}, defaultSettings, settings);
console.log(mergedSettings); // 输出: { volume: 5, brightness: 70, contrast: 100 }

总结

在前端开发中，合并对象是常见需求。这篇文章中，我们介绍了使用扩展运算符、Object.keys 与 forEach 以及 Object.assign 来实现合并。同时，详细介绍了Object.assign 的使用。

Object.assign 方法将一个或多个源对象的属性复制到目标对象，常用于添加属性、创建浅拷贝、合并多个源对象和设置默认值。它执行浅拷贝，会修改目标对象并返回目标对象，原有属性值会被覆盖。

了解这些方法和场景可以极大提升我们的学习效率~

是小姐姐，不是小哥哥