Object.assign的用法

概念

Object.assign就像是一个“粘贴板”，可以把一个或多个对象的属性“粘贴”到另一个对象上。你可以把它想象成在做拼图，把不同的碎片（对象属性）拼到一起，最终形成一个完整的拼图（目标对象）。这个方法非常适合用来合并对象、复制对象，或者为对象设置默认属性

简单实例 合并两个对象

举个简单的例子，假设你有两个盒子，一个装着个人信息，另一个装着工作信息，现在你想把它们合并成一个完整的档案。Object.assign就是那个帮你把两个盒子里的内容拼到一起的工具

const personalInfo = { name: "Xiaoming", age: 25 };
const jobInfo = { job: "Developer", city: "Beijing" };

const fullProfile = Object.assign({}, personalInfo, jobInfo);

console.log(fullProfile);
// 输出: { name: "Xiaoming", age: 25, job: "Developer", city: "Beijing" }
// 把两个对象进行合并

思考 属性冲突，结果会怎样？

但如果这两个盒子里有相同的拼图碎片呢？比如说两个盒子里都有“名字”这个属性，Object.assign会优先保留后面的拼图碎片。你可以想象成在拼图时，新拼上的碎片会覆盖旧的。

const personalInfo = { name: "Xiaoming", age: 25 };
const jobInfo = { name: "Xiaohong", city: "Beijing" };
const fullProfile = Object.assign({}, personalInfo, jobInfo);
console.log(fullProfile);
// 输出: { name: "Xiaohong", age: 25, city: "Beijing" }
// 后来居上，后者取代前者

应用实例场景 用Object.assign一键应用多个样式

想象一下，你正在开发一个网页，在页面上有一个展示欢迎语的div元素。现在，你希望用户点击按钮时，这个div能瞬间“换装”，变得更加醒目。如果我们逐个设置样式，代码会很繁琐。不过，使用Object.assign，我们可以轻松实现这个效果，让代码变得更简洁

之前

<!-- HTML -->
<div id="welcomeMessage">Welcome to Our Site!</div>
<button id="changeStyleButton">Make It Pop!</button>
// JavaScript
const welcomeMessage = document.getElementById("welcomeMessage");
const changeStyleButton = document.getElementById("changeStyleButton");
changeStyleButton.addEventListener("click", () => {
    welcomeMessage.style.color = "white";
    welcomeMessage.style.backgroundColor = "green";
    welcomeMessage.style.padding = "15px";
    welcomeMessage.style.borderRadius = "8px";
});
// 每次设置一个样式属性，代码显得冗长。随着样式需求的增加，代码可能会变得越来越难以维护

用Object.assign进行改写

<!-- HTML -->
<div id="welcomeMessage">Welcome to Our Site!</div>
<button id="changeStyleButton">Make It Pop!</button>
// JavaScript
const welcomeMessage = document.getElementById("welcomeMessage");
const changeStyleButton = document.getElementById("changeStyleButton");

changeStyleButton.addEventListener("click", () => {
    Object.assign(welcomeMessage.style, {
        color: "white",
        backgroundColor: "green",
        padding: "15px",
        borderRadius: "8px"
    });
});