JavaScript的Object.assign方法怎么合并对象？-html教程-PHP中文网

JavaScript的Object.assign方法怎么合并对象？

星降

发布： 2025-07-09 17:16:01

原创

633人浏览过

object.assign()用于合并对象，通过将源对象属性复制到目标对象实现。1. 它修改目标对象并返回，如不想修改可传空对象作为新目标；2. 性能方面，在处理大量对象时效率下降，优化方式包括减少对象数量、避免冗余属性复制、使用手动赋值或第三方库；3. object.assign执行浅拷贝，若需深拷贝可用json.parse(json.stringify())、递归实现或lodash的clonedeep；4. 与扩展运算符区别在于object.assign会修改原对象，而扩展运算符生成新对象，两者均是浅拷贝且覆盖同名属性，但扩展运算符处理null/undefined时转为空对象。

JavaScript的Object.assign方法怎么合并对象？

Object.assign() 方法通过复制一个或多个源对象的所有可枚举自有属性到目标对象，来合并对象。它会修改目标对象，并返回修改后的目标对象。简单来说，就是把几个东西拼到一起。

Object.assign(target, ...sources)

登录后复制

解决方案

Object.assign() 接收两个或多个参数。第一个参数 target 是目标对象，后续的参数 sources 是源对象，可以有多个。Object.assign() 会将 sources 中的属性复制到 target 中。

立即学习“Java免费学习笔记（深入）”；

举个例子：

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

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

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

登录后复制

注意，target 对象本身被修改了，并且 returnedTarget 实际上就是 target。如果不想修改原始的 target 对象，可以创建一个新的空对象作为 target：

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

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

console.log(target); // 输出: { a: 1, b: 2 }  (未修改)
console.log(newTarget); // 输出: { a: 1, b: 4, c: 5 }

登录后复制

这样，target 对象就不会被修改了。

Object.assign的性能如何？合并大量对象时有什么优化技巧？

Object.assign 在处理少量对象时性能尚可，但合并大量对象时，性能会明显下降。这主要是因为每次复制属性都需要遍历源对象。

优化技巧：

减少对象数量： 尽量减少需要合并的对象数量。如果可以将多个小对象预先合并成一个大对象，就先做这一步。
避免不必要的属性复制： 如果某些属性不需要合并，就不要包含在源对象中。可以使用 delete 操作符移除不需要的属性，或者在创建源对象时就避免添加这些属性。
使用循环和手动赋值： 在某些情况下，使用 for...in 循环和手动赋值可能比 Object.assign 更快。但这通常只在非常极端的情况下才有效，并且代码可读性会降低。例如：
```
function customAssign(target, ...sources) {
    for (const source of sources) {
        for (const key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
            }
        }
    }
    return target;
}
```
登录后复制
需要注意的是，这种方法需要处理原型链上的属性，所以需要使用 hasOwnProperty 进行判断。

法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情
使用第三方库： 一些第三方库提供了更高效的对象合并方法。例如，Lodash 的 _.merge 函数在某些情况下可能比 Object.assign 更快。

深拷贝与浅拷贝：Object.assign是深拷贝还是浅拷贝？如何实现深拷贝？

Object.assign 执行的是浅拷贝。这意味着它只会复制源对象的属性值，而不会复制属性值指向的对象。如果属性值是一个对象，那么 target 对象和 source 对象中的该属性将指向同一个对象。修改其中一个对象，另一个对象也会受到影响。

深拷贝是指创建一个完全独立的副本，修改副本不会影响原始对象。

实现深拷贝的方法：

JSON.parse(JSON.stringify(obj))： 这是最简单的一种深拷贝方法，但有一些限制：
- 不能拷贝函数。
- 不能拷贝 RegExp、Date、Set、Map 等特殊对象。
- 会忽略 undefined。
- 如果对象中存在循环引用，会报错。
```
 const obj = { a: 1, b: { c: 2 } };
 const deepCopy = JSON.parse(JSON.stringify(obj));

 deepCopy.b.c = 3;

 console.log(obj.b.c); // 输出: 2
 console.log(deepCopy.b.c); // 输出: 3
```
登录后复制

递归实现深拷贝： 这种方法可以处理更复杂的情况，但需要手动处理循环引用。

 function deepClone(obj, map = new WeakMap()) {
     if (typeof obj !== 'object' || obj === null) {
         return obj;
     }

     if (map.has(obj)) {
         return map.get(obj); // 处理循环引用
     }

     const newObj = Array.isArray(obj) ? [] : {};
     map.set(obj, newObj);

     for (let key in obj) {
         if (obj.hasOwnProperty(key)) {
             newObj[key] = deepClone(obj[key], map);
         }
     }

     return newObj;
 }

登录后复制

这个函数使用 WeakMap 来存储已经拷贝过的对象，以防止循环引用导致无限递归。

使用第三方库： Lodash 的 _.cloneDeep 函数提供了更强大和可靠的深拷贝功能。

Object.assign与扩展运算符（...）在对象合并上的区别？

Object.assign 和扩展运算符 (...) 都可以用于对象合并，但它们之间有一些区别：

修改目标对象： Object.assign 会修改目标对象，而扩展运算符会创建一个新的对象。
浅拷贝： 它们都执行浅拷贝。
属性覆盖： 如果源对象和目标对象有相同的属性，Object.assign 会用源对象的属性值覆盖目标对象的属性值，扩展运算符也是如此。
处理 null 和 undefined： Object.assign 会跳过 null 和 undefined 源对象，而扩展运算符会将它们转换为对象 {}。

示例：

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

// 使用 Object.assign
const assignedTarget = Object.assign({}, target, source);
console.log(assignedTarget); // 输出: { a: 1, b: 4, c: 5 }

// 使用扩展运算符
const spreadTarget = { ...target, ...source };
console.log(spreadTarget); // 输出: { a: 1, b: 4, c: 5 }

登录后复制

总的来说，如果需要修改原始对象，可以使用 Object.assign。如果需要创建一个新的对象，可以使用扩展运算符。扩展运算符通常更简洁易读。

以上就是JavaScript的Object.assign方法怎么合并对象？的详细内容，更多请关注php中文网其它相关文章！