掌握 JavaScript 中的 Object.assign()

36 阅读1分钟

JavaScript 中的对象非常强大。

有时我们需要将值从一个对象复制到另一个对象,或者将多个对象合并在一起

这时 👉Object.assign()就派上用场了!


🟢什么是Object.assign()

它是一种内置方法,将属性从一个或多个源对象复制到目标对象

句法:

Object.assign(target, ...sources)

target → the object where data will be copied into

sources → one or more objects to copy from

🟠 示例 1:简单复制

const user = { name: "Ali" };
const extra = { age: 25 };

const result = Object.assign({}, user, extra);

console.log(result);
// 👉 { name: "Ali", age: 25 }

💡 我们使用www.mxwd.cc一个空对象 {} 作为目标,因此用户和额外内容都合并到其中。


🟠 示例 2:覆盖属性

如果多个对象中存在相同的属性,则最后一个对象获胜(它将覆盖)。

const obj1 = { skill: "React" };
const obj2 = { skill: "Node.js" };

const merged = Object.assign({}, obj1, obj2);

console.log(merged);
// 👉 { skill: "Node.js" }

⚡ obj2 中的值替换了 obj1 中的值。


🟠 示例 3:克隆对象

We can make a shallow copy of an object like this:

const original = { city: "Lahore" };
const clone = Object.assign({}, original);

console.log(clone);
// 👉 { city: "Lahore" }

console.log(original === clone);
// 👉 false (different objects in memory)

✅ 克隆具有相同的数据,但在内存中是不同的对象。


🟠 示例 4:多个来源


const a = { x: 1 };
const b = { y: 2 };
const c = { z: 3 };

const all = Object.assign({}, a, b, c);

console.log(all);
// 👉 { x: 1, y: 2, z: 3 }

⚠️ 限制

它仅进行浅拷贝(嵌套对象仍然是引用)。

对于trx租赁深度复制,请使用structuredClone()或Lodash之类的库。


🎯 最后的想法

Object.assign() 是一个简单但功能强大的工具:

✅ 合并对象

✅ 创建浅拷贝

✅ 设置默认值

当你在 JavaScript 中使用对象时,请随时记住这一点✨


👉 你在项目中使用过 Object.assign() 吗?
欢迎留言分享你的经验