在JavaScript的世界里，操作对象简直是家常便饭。而如果你想让代码写得更“丝滑”，那Object.assign绝对是你不容错过的神兵利器！不管是合并对象、克隆对象，还是设置默认值，Object.assign都能让你事半功倍。这篇文章我就来和大家聊聊，如何在实际开发中用好这个工具，让你的代码不仅高效，还能更优雅。
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就像是把“个人信息”和“工作信息”这两个拼图拼成了一个新的完整档案。
属性冲突，结果会怎样？
但如果这两个盒子里有相同的拼图碎片呢？比如说两个盒子里都有“名字”这个属性，Object.assign会优先保留后面的拼图碎片。你可以想象成在拼图时，新拼上的碎片会覆盖旧的。
来看下面的例子，如果两个对象都有“name”这个属性，结果会怎么样：
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把来自“jobInfo”的名字覆盖了“personalInfo”里的名字。
应用场景：用Object.assign一键应用多个样式想象一下，你正在开发一个网页，在页面上有一个展示欢迎语的div元素。现在，你希望用户点击按钮时，这个div能瞬间“换装”，变得更加醒目。如果我们逐个设置样式，代码会很繁琐。不过，使用Object.assign，我们可以轻松实现这个效果，让代码变得更简洁。
以前的写法
<!-- HTML --><div id="welcomeMessage">Welcome to Our Site!</div><button id="changeStyleButton">Make It Pop!</button>// JavaScriptconst 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进行改写
现在，我们通过Object.assign一次性应用所有的样式：
<!-- HTML --><div id="welcomeMessage">Welcome to Our Site!</div><button id="changeStyleButton">Make It Pop!</button>// JavaScriptconst welcomeMessage = document.getElementById("welcomeMessage");const changeStyleButton = document.getElementById("changeStyleButton");changeStyleButton.addEventListener("click", () => { Object.assign(welcomeMessage.style, { color: "white", backgroundColor: "green", padding: "15px", borderRadius: "8px" });});在这个版本中，我们用Object.assign把所有的样式一次性赋值给welcomeMessage，使代码更简洁易懂。
你可以想象，用户点击“Make It Pop!”按钮后，原本普通的欢迎语突然变得生动起来，背景变成了绿色，文字变成了白色，还多了些圆角和内边距，这种视觉效果立马让页面更具吸引力。
通过Object.assign，我们不仅让样式应用变得更加方便，还提升了代码的可维护性。这个技巧在你需要动态改变多个样式时尤其有用，可以帮助你节省大量时间，同时保持代码的整洁和可读性。
结束 ✅Object.assign 是一个非常强大的工具，能够让你的JavaScript代码更加简洁高效。不管是合并对象，还是一次性应用多个样式，Object.assign都能帮你轻松搞定。掌握并善用这个方法，不仅能让你的代码看起来更整洁，还能提升你的开发效率。
