JS对象合并方法_Object.assign缺陷

Object.assign存在浅拷贝、忽略null/undefined、不复制不可枚举属性及Symbol处理易被忽视等问题,合并复杂对象时可能引发意外副作用。

js对象合并方法_object.assign缺陷

在JavaScript中,合并对象是一个常见需求,Object.assign 是ES6提供的原生方法之一。虽然它使用方便,但存在一些容易被忽视的缺陷,尤其在处理复杂对象或嵌套结构时可能引发问题。

1. 浅拷贝问题

Object.assign 只执行浅拷贝,这意味着当源对象包含嵌套对象或数组时,只会复制引用,而不是创建新对象。

例如:

const obj1 = { a: 1, nested: { b: 2 } }; const obj2 = { c: 3 }; const merged = Object.assign({}, obj1, obj2); merged.nested.b = 99; console.log(obj1.nested.b); // 输出 99,原始对象被意外修改

由于 nested 是引用类型,Object.assign 没有递归复制其内部属性,导致修改目标对象影响了源对象。

2. 无法处理undefined和null

如果传入 undefinednull 作为源对象,Object.assign 会直接忽略,但在某些场景下这可能掩盖错误。

const result = Object.assign({}, null, { a: 1 }); console.log(result); // { a: 1 },正常 const broken = Object.assign({}, undefined, { a: 1 }); // 同样正常,但可能隐藏参数错误

这种“静默失败”特性不利于调试,特别是当函数参数未按预期传入时。

3. 不会跳过不可枚举属性

Object.assign 只复制可枚举属性,但如果源对象的某些属性是通过 Object.defineProperty 设置为不可枚举,则不会被合并。

const obj = {}; Object.defineProperty(obj, ‘hidden’, { value: ‘secret’, enumerable: false }); const target = Object.assign({}, obj); console.log(target.hidden); // undefined

这可能导致数据丢失,尤其是在处理自定义构造函数或库对象时。

4. 不能正确处理Symbol属性

虽然 Object.assign 支持Symbol作为键(会复制Symbol属性),但开发者常常忽略这一点,导致意外交互。

const s = Symbol(‘key’); const obj1 = { [s]: ‘symbol value’ }; const obj2 = Object.assign({}, obj1); console.log(obj2[s]); // 能访问,但容易被忽视

Symbol属性虽被复制,但由于其唯一性和不可枚举性,在实际合并逻辑中常被误判为“未复制”。

替代方案建议

对于深度合并或更安全的对象合并,推荐以下方式:

使用 Lodash 的 _.merge() 实现深合并 利用展开运算符 {…obj1, …obj2}(仍为浅层) 自定义递归合并函数,控制合并行为 结合 JSON.parse(JSON.stringify())(仅适用于纯数据,不支持函数、Symbol等)

基本上就这些。Object.assign 简单实用,但需清楚它的限制,特别是在处理嵌套结构或不确定输入时,避免产生副作用。

以上就是JS对象合并方法_Object.assign缺陷的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1539171.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 05:45:09
下一篇 2025年12月21日 05:45:23

相关推荐

  • HTML5的WebUSB API有什么用?如何访问USB设备?

    webusb api让网页能直接与usb设备通信,其核心步骤是用户触发动作、浏览器请求权限、javascript通过usbdevice对象实现数据交换。具体流程包括:1. 在https环境下通过用户手势调用navigator.usb.requestdevice()获取设备访问权限;2. 使用devi…

    2025年12月22日 好文分享
    000
  • HTML5的Web Storage是什么?和Cookie有什么区别?

    web storage与cookie的核心差异体现在存储空间、数据发送机制、生命周期和api易用性。首先,存储空间上,cookie仅有4kb左右,而web storage提供5mb到10mb;其次,数据发送机制上,cookie会随每次http请求自动发送,而web storage仅存于客户端,需手动…

    2025年12月22日 好文分享
    000
  • HTML5的Background Sync API有什么用?如何延迟同步任务?

    background sync api通过service worker实现离线任务延迟同步,解决网络不稳定导致的数据丢失问题。其核心流程为:①注册service worker作为后台执行基础;②在主线程调用registration.sync.register()注册带唯一标签的同步任务,并将待处理数…

    2025年12月22日 好文分享
    000
  • HTML表格如何实现数据的同步?有哪些技术?

    html表格数据同步需依赖额外技术实现。解决方案包括:1.ajax轮询,通过定时请求更新数据,适合非实时场景;2.websocket,提供全双工通信,适合高实时性需求;3.server-sent events(sse),适用于服务器向客户端单向推送;4.前端框架如react、vue利用数据绑定简化更…

    2025年12月22日 好文分享
    000
  • 如何为HTML表格添加日志记录?有哪些实现方法?

    { “timestamp”: “2023-10-27T10:30:00Z”, “userId”: “user123”, “tableId”: “product_list”, “actionType”: “edit_cell”, “rowIndex”: 5, “columnId”: “price”, …

    2025年12月22日 好文分享
    000
  • html中href标签的作用 超链接href属性的3个核心功能

    href属性在html中用于指定超链接的目标url或锚点,其核心功能包括:1.导航,允许用户跳转到其他页面或同一页面不同部分;2.资源下载,用户可直接从网页下载文件;3.邮件链接,点击后打开邮件客户端并自动填写收件人地址。使用href属性时,应确保链接文本清晰,避免模糊描述,并根据实际情况优化链接功…

    2025年12月22日
    000
  • html中P标签对应什么 html段落标签P的语义化含义解析

    标签在html中用于表示段落,其作用包括:1.提高网页可读性和结构化;2.增强可访问性,如屏幕阅读器识别;3.提升seo效果。正确使用 标签能创建结构清晰的网页内容。 在HTML中, 标签是用来表示段落的基本元素。它的语义化含义在于,它告诉浏览器和搜索引擎,这是一个独立的文本块,通常用于文章或网页中…

    2025年12月22日
    000
  • HTML锚点链接滚动平滑过渡怎么实现

    实现html锚点链接的平滑滚动过渡可以通过以下两种方法:1. 使用javascript,通过监听锚点链接的点击事件并使用scrollintoview方法实现平滑滚动;2. 使用css,通过设置scroll-behavior属性为smooth来实现全局平滑滚动效果。结合使用这两种方法可以优化用户体验和…

    2025年12月22日
    000
  • html中p标记怎么打 html段落标签P的正确书写格式

    标签的正确书写格式是 这里是段落内容 。使用时应注意:1. 明确写出开始和结束标签;2. 避免嵌套 标签,可用等内联元素;3. 确保内容符合段落语义;4. 使用CSS控制样式;5. 考虑可访问性,如添加ARIA属性。 对于HTML中的 标签,它是用于定义段落的基本元素。它的正确书写格式非常简单,但理…

    2025年12月22日 好文分享
    000
  • 怎样在HTML页面插入代码块并高亮显示

    在html页面中插入并高亮显示代码块,可以通过以下步骤实现:1. 在 部分引入highlight.js的 在这个例子中,我们首先在部分引入了Highlight.js的CSS和JS文件,然后通过hljs.highlightAll();来初始化高亮功能。接着,在部分,我们使用 </code>…

    好文分享 2025年12月22日
    000
  • HTML中JS怎么获取表单数据?getElementsByName与value属性用法

    javascript获取表单数据主要通过getelementsbyname和value属性实现。1. getelementsbyname返回同名元素的集合,需用索引访问具体元素;2. value属性用于读取或设置元素值,但checkbox/radio需结合checked判断是否选中;3. 可使用ge…

    2025年12月22日 好文分享
    000
  • html中li标签的作用 列表项li的嵌套使用技巧

    标签在html中用于定义列表项,是无序和有序列表的基本构建块。1) 标签提升网页的语义结构和可读性。2) 它常与css结合,控制列表项的外观。3) 标签可嵌套使用,创建多层次列表结构,增强用户体验。 HTML中的 标签是列表项的缩写,它在HTML文档中用于定义列表中的每一个项目。无论是无序列表 还是…

    2025年12月22日
    000
  • 如何将HTML转Word?转换工具入门步骤

    将html转换为word需选择合适工具并简化结构。1.选择支持样式保留的在线或编程工具;2.使用内联css并避免复杂嵌套;3.通过python库如beautifulsoup和python-docx解析内容并生成文档;4.转换后手动调整格式并备份原文件。编程处理时需关注样式映射与性能优化,最终根据需求…

    2025年12月22日 好文分享
    000
  • HTML如何用JS修改CSS样式?style属性与classList操作指南

    javascript 修改 html 元素 css 样式主要有两种方式:1. 使用 style 属性直接设置内联样式,适用于简单修改但会覆盖原有样式;2. 使用 classlist 管理 css 类,通过添加、移除或切换类来控制样式,推荐用于更复杂和可维护的场景。style 属性操作更快但影响原有内…

    2025年12月22日 好文分享
    000
  • HTML怎么添加JS代码?JS代码用HTML如何添加详细教程

    在html中添加js代码的方法有两种:直接嵌入或链接外部文件。第一,直接嵌入js代码:在 或中使用标签并写入js内容,适合少量代码但不利于维护和复用;第二,链接外部js文件:将js保存为独立的.js文件并通过标签的src属性引入,结构清晰、易于复用但需额外维护。选择方式时应根据项目规模和代码量决定。…

    2025年12月22日 好文分享
    000
  • HTML中如何让三个div水平排列

    可以使用css的flexbox让三个div水平排列。具体方法是:1.为容器设置display: flex;和justify-content: space-around;,2.为每个div设置样式以控制大小和间距。这种方法简洁且灵活,适合现代网页布局。 在HTML中让三个div水平排列,这其实是一个非…

    2025年12月22日
    000
  • HTML怎么用JS实现拖拽功能?dragstart与ondrop事件监听

    要通过js在html中实现拖拽功能,核心在于设置draggable属性并监听dragstart、dragover和drop事件。具体步骤如下:1. 给需要拖拽的元素添加draggable=”true”属性;2. 使用javascript监听dragstart事件,并通过eve…

    2025年12月22日 好文分享
    000
  • html中的p标签用于创建什么 段落标签p的语义化作用

    标签用于创建段落,具有重要的语义化作用。1)提高可访问性,屏幕阅读器可识别段落;2)优化seo,搜索引擎能更好理解页面结构;3)增强代码可读性,开发者易于维护。 HTML中的 标签用于创建段落,它是HTML中最基本的文本容器之一。使用 标签可以将文本内容组织成独立的段落,使网页内容结构化且易于阅读。…

    2025年12月22日
    000
  • HTML如何用JS检测设备类型?navigator.userAgent解析方法

    检测设备类型的核心方法是使用javascript的navigator.useragent结合正则表达式进行判断,具体步骤如下:1. 获取user agent并转为小写;2. 使用正则表达式判断是否包含iphone、ipad、ipod或android来识别移动设备;3. 如需更精确判断,可进一步区分a…

    2025年12月22日 好文分享
    000
  • HTML怎么设置文本粒子效果?JS实现粒子文字

    要实现html文本粒子效果,需使用canvas元素与javascript控制粒子运动。1.通过canvas绘制文字并提取像素数据生成粒子;2.利用js定义粒子类并控制其动态行为;3.结合鼠标事件实现交互效果;4.优化性能可通过减少粒子数、缓存canvas、避免重复绘制等方式;5.提升视觉效果可添加颜…

    2025年12月22日 好文分享
    000

发表回复

登录后才能评论
关注微信