代码片段分享：我在JavaScript项目中这样用Object.assign

前端达人

发布于 2024-11-25 04:29:50

23500

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

在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>

// 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进行改写

现在，我们通过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"
    });
});