Object.assign 多级对象合并技巧
时间:2026-05-20 13:15:14 427浏览 收藏
本文深入解析了JavaScript中Object.assign在多级对象合并时的局限性——它仅执行浅拷贝,导致嵌套对象被完全覆盖而非递归合并,并手把手带你实现安全可靠的deepAssign函数,涵盖null、数组、日期及__proto__等关键边界处理;同时推荐现代环境下的structuredClone+递归方案提升安全性与不可变性,最后指出复杂场景下应优先选用lodash.merge等成熟库,避免自行实现埋下原型污染或类型误判等隐患。

Object.assign 不能直接处理多级嵌套合并
它只会做浅拷贝,遇到对象属性时直接覆盖而非递归合并。比如 Object.assign({a: {x: 1}}, {a: {y: 2}}) 结果是 {a: {y: 2}},x 丢了。这不是配置合并想要的行为——你通常希望 a.x 和 a.y 同时保留。
用 Object.assign + 手动递归实现基础多级合并
可以封装一个 deepAssign 函数,在遇到同为对象的属性时递归调用自身,其他情况交给 Object.assign 处理。注意要跳过 null、数组、日期等非 plain object 类型:
function deepAssign(target, ...sources) {
sources.forEach(source => {
if (source == null) return;
Object.keys(source).forEach(key => {
const targetVal = target[key];
const sourceVal = source[key];
if (
targetVal != null &&
typeof targetVal === 'object' &&
sourceVal != null &&
typeof sourceVal === 'object' &&
!Array.isArray(targetVal) &&
!Array.isArray(sourceVal)
) {
deepAssign(targetVal, sourceVal);
} else {
target[key] = sourceVal;
}
});
});
return target;
}
使用示例:deepAssign({}, {db: {host: 'localhost', port: 5432}}, {db: {port: 5433, ssl: true}}) → {db: {host: 'localhost', port: 5433, ssl: true}}
常见坑:原型链污染与不可枚举属性
Object.assign只复制可枚举自有属性,但你的配置对象若来自Object.create(null)或带自定义toString等方法,可能漏掉关键字段- 如果源对象有
__proto__或constructor字段(尤其从 JSON 解析或用户输入来),直接合并可能触发原型链污染 —— 建议在递归前过滤掉这些危险键名 - 别把
Date、RegExp当普通对象递归,它们的typeof也是'object',但没keys可遍历,会报错
更稳妥的替代方案:用 structuredClone + 自定义逻辑
现代环境(Chrome 98+、Node.js 17+)可用 structuredClone 先深拷贝目标,再逐层 Object.assign,避免修改原对象;但要注意它不支持函数、undefined、循环引用。对于配置合并这类纯数据场景够用:
function safeDeepMerge(target, ...sources) {
const result = structuredClone(target);
sources.forEach(src => {
Object.keys(src).forEach(key => {
const t = result[key];
const s = src[key];
if (t && s && typeof t === 'object' && typeof s === 'object' && !Array.isArray(t) && !Array.isArray(s)) {
result[key] = safeDeepMerge(t, s);
} else {
result[key] = s;
}
});
});
return result;
}
真正复杂配置(如含函数、Symbol、特殊类实例)建议用专门库如 lodash.merge,自己手写容易漏边界条件。
今天关于《Object.assign 多级对象合并技巧》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于的内容请关注golang学习网公众号!
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
326 收藏
-
462 收藏
-
358 收藏
-
101 收藏
-
419 收藏
-
434 收藏
-
330 收藏
-
293 收藏
-
tbody标签用于定义表格的主体部分,通常包含表格的数据行。在HTML中, 标签的作用是将表格内容划分为不同的部分,以便更好地进行样式化、脚本操作或滚动处理。tbody 的主要作用:结构清晰: 用于包裹表格中的数据行(即
元素),与表头 和表尾 分离,使 HTML 结构更清晰。这种结构有助于提高可读性和可维护性。支持滚动:在需要201 收藏357 收藏300 收藏380 收藏课程推荐更多>-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习