响应式赋值Object.assign()和JSON.parse(JSON.stringify())的区别

news2024/11/18 8:44:29

一、需求:点击编辑弹出编辑框,修改后的内容点击认按钮修改后的数据更新回显到原列表。今天优化代码的时候发现了Object.assign()和JSON.parse(JSON.stringify())的区别。 

  • 优化前代码如下:
// 编辑药品回显
   editMedicData(data) {
      this.tableData.adrDrugInfos.map((item) => {
        if (item.orderId === data.orderId) {
          item.suspectedConcomitant = data.suspectedConcomitant
          item.genericName = data.genericName
          item.shopName = data.shopName
          item.approvalNumber = data.approvalNumber
          item.manufacturer = data.manufacturer
          item.batchNumber = data.batchNumber
          item.startDate = data.startDate
          item.endDate = data.endDate
          item.dose = data.dose
          item.doseUnit = data.doseUnit
          item.frequency = data.frequency
          item.routeName = data.routeName
          item.formName = data.formName
          item.reasonForUse = data.reasonForUse
          item.remark = data.remark
        }
        return item
      })
    },
  • 优化后代码如下:
// 编辑药品回显
    editMedicData(data) {
      this.tableData.adrDrugInfos.forEach((item) => {
        if (item.orderId === data.orderId) {
          item = Object.assign(item,data)
        }
      })
    },

二、发现:在优化的时候发现使用JSON.parse(JSON.stringify())没有响应式赋值,虽然打印出来的数据是修改后的,但是页面还是显示之前的数据。只有使用Object.assign()才能响应式赋值起作用。

三、知识点:

Object.assign() 和 JSON.parse(JSON.stringify()) 都是用于对象的深拷贝(deep copy),但它们之间有一些重要的区别。

1.目标:

  • Object.assign():用于将源对象的属性复制到目标对象。
  • JSON.parse(JSON.stringify()):用于将一个对象序列化为字符串,再将字符串反序列化为一个新的对象。

2.处理能力:

  • Object.assign():适用于只能拷贝可枚举的自身属性。它无法拷贝源对象的原型链上的属性和方法。
  • JSON.parse(JSON.stringify()):能够拷贝源对象的自身属性和原型链上的属性和方法。它能够处理函数、正则表达式、Date 对象等特殊类型的属性。

3.引用处理:

  • Object.assign():对于拷贝对象中的引用类型属性,它只是简单地将引用复制到目标对象中,这意味着源对象和目标对象可能会共享相同的引用。
  • JSON.parse(JSON.stringify()):通过序列化和反序列化的过程,能够实现完全的深拷贝,即源对象和目标对象不共享引用。

4.错误处理:

  • Object.assign():在拷贝过程中,如果源对象的属性是一个访问器属性(getter/setter),则会以其返回值作为值进行拷贝。但是,对于setter属性,它只会复制其值而不是复制setter本身。
  • JSON.parse(JSON.stringify()):在序列化和反序列化的过程中,所有函数属性、undefined 属性和 symbol 属性都会被忽略。而对于包含循环引用的对象,或者无法被序列化的对象,这种方式会导致错误。

综上所述,如果你的对象只包含简单的属性,没有函数属性、循环引用等特殊情况,可以使用 Object.assign() 进行拷贝。如果你需要处理更复杂的对象,包括函数、正则表达式和循环引用等,建议使用 JSON.parse(JSON.stringify()) 进行深拷贝。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/788990.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

会员系统怎么搭建,适合门店的会员系统有哪些?

会员系统是一种为企业和门店提供会员管理和服务的工具。会员系统可以通过提供专属优惠、积分奖励、个性化推荐等方式,激励顾客成为会员并保持长期关系。 我们在自己搭建或选择会员系统时,需要考虑门店的特定需求以及系统的功能、可靠性、易用性和成本等因…

github前端开源json2html

软件介绍 前端低代码工具包,通过 JSON 配置就能生成各种页面。 应用场景 json解析超大数据动态渲染,渲染速度、性能解决问题 包引用列表 vue3 (cdn模式开发)element plusnodehttp-serveraxios 操作步骤 1.环境准备下载node:https://no…

长tree用buffer还是inverter?驱动强度如何选型?

相关文章链接: 静态时序分析: 最小脉冲宽度检查 redhawk:clock buffer cluster 面试中关于CTS buf/inv选型的问题经久不衰,依托经验,不看纸面信息,inverter和buffer各有优劣,同驱动buffer实际推力更强,意味着只用buffer,clock repeater数量更少,inverter必须成对的…

从零开始搭建医药领域知识图谱实现智能问答与分析服务(含码源):含Neo4j基于垂直网站数据的医药知识图谱构建、医药知识图谱的自动问答等

项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域):汇总有意义的项目设计集合,助力新人快速实…

抖音seo矩阵系统源码保姆式开发部署指导

抖音seo霸屏,是一种专为抖音视频创作者和传播者打造的视频批量剪辑,批量分发产品。使用抖音seo霸屏软件,可以帮助用户快速高效的制作出高质量的优质视频。 使用方法:1. 了解用户的行为习惯 2. 充分利用自身资源进行开发 3. 不…

超全整理,selenium自动化测试常见问题解决(汇总)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 自动化代码中&…

静态路由小实验

文章目录 一、实验要求及拓扑图二、实验步骤三、思考题 一、实验要求及拓扑图 二、实验步骤 1、创建VLAN,将端口划入vlan 在交换机S3、S4上创建VLAN10、20 Switch(config)#vl 10 Switch(config-vlan)#vl 20 S3(config)#int f0/3 S3(config-if)#switchport access …

SpringBoot中使用测试框架MockMvc来模拟HTTP请求测试Controller接口

场景 Java中进行单元测试junit.Assert断言、Mockito模拟对象、verify验证模拟结果、Java8中lambda的peek方法使用: Java中进行单元测试junit.Assert断言、Mockito模拟对象、verify验证模拟结果、Java8中lambda的peek方法使用_assert java8_霸道流氓气质的博客-CSD…

17的勒索软件攻击泄露关键OT信息

数据泄漏一直是企业关注的问题,敏感信息泄露可能导致声誉受损、法律处罚、知识产权损失、甚至影响员工和客户的隐私。然而很少有关于工业企业面临的威胁行为者披露其OT安全、生产、运营或技术的敏感细节的研究。 2021年,Mandiant威胁情报研究发现&#…

ambari管理配置组实现针对不同节点使用不同配置

实操 一.新建配置组: 二.取名后指定该配置组针对哪些节点生效: 三.添加节点: 保存后有个空的配置组newMR2. 四.接下来在该配置组内自定义一些配置参数,比如单独针对节点hdp01配置fetch最高并发度为20: 五.重…

区块链服务网络的顶层设计与应用实践

日前,2023全球数字经济大会专题论坛:Web3.0发展趋势专题论坛暨2023区块链、元宇宙蓝皮书发布会在北京举行。本次论坛上隆重发布了《中国区块链发展报告(2023)》,对我国区块链行业在2022年的发展状况进行了总结梳理&…

【英飞凌PSoC 6】使用软件和硬件I2C点亮OLED屏,帧率从2FPS提升到51FPS

文章目录 一、准备工作1.1 硬件准备1.2 软件准备1.3 硬件连接 二、原理分析2.1 开发板原理图2.2 芯片数据手册 三、软件I2C驱动OLED3.1 创建RT-Thread项目3.2 添加ssd1306软件包3.3 配置软件I2C和ssd1306软件包3.4 编译和下载程序3.5 运行和测试程序 四、硬件I2C驱动OLED4.1 增…

depcheck检测缺失哪些依赖包

npm install -g depcheck 如果不想全局安装,npm i depcheck后可以在package.json的scripts中输入 "check": "depcheck" 之后使用 npm run check depcheck - npm 超级好用的依赖检查工具depcheck【渡一教育】_哔哩哔哩_bilibili

Cron 选择器

// 定义一个名为 cron 的新组件 Vue.component(cron, {name: cron,props: [data],data() {return {second: {cronEvery: ,incrementStart: 3,incrementIncrement: 5,rangeStart: ,rangeEnd: ,specificSpecific: [],},minute: {cronEvery: ,incrementStart: 3,incrementIncremen…

[Tools: tiny-cuda-nn] Linux安装

official repo: https://github.com/NVlabs/tiny-cuda-nn 该包可以显著提高NeRF训练速度,是Instant-NGP、Threestudio和NeRFstudio等框架中,必须使用的。 1. 命令行安装 最便捷的安装方式,如果安装失败考虑本地编译。 pip install ninja g…

QT第一讲

思维导图 手动实现登录框 要求&#xff1a; 1、登录窗口更改标题、图标 2、设置固定尺寸、并给定一定的透明度 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#include<QWidget> #include<QDebug> //信息调试类&#xff0c;用于打印输出…

谱瑞PS186芯片DP1.4转HDMI2.0主动式4K转换线DSC支持10bit色深HDR

PS186 是 DisplayPort ™ v1.4a 到 HDMI ™ 2.0b 视频接口转换器&#xff0c;非常适合电缆适配器、扩展坞、监视器、电视接收器和其他需要视频协议转换的应用。输入是一个 DP v1.4a 兼容的上行端口&#xff0c;它接受音频和显示数据&#xff0c;输出是一个 HDMI 2.0b 兼容的下行…

【C++】模板(下)

文章目录 一、typename的使用二、非类型模板参数三、模板的特化1.概念2.函数的模板特化3.类的模板特化① 全特化② 偏特化 一、typename的使用 前面我们在使用模板参数的时候可以使用class&#xff0c;也可以使用typename定义模板参数&#xff0c;现在typename有了新的作用 tem…

jQuery 对象转换与选择器

目录 1.js与jQuery对象之间转换 2.jQuery选择器 2.1 基本选择器 2.2层级选择器 2.3 基本过滤选择器 1.js与jQuery对象之间转换 js的DOM对象转换成jQuery对象&#xff0c;语法&#xff1a;$(js的DOM对象) var jsDomEle document.getElementById("myDiv"); //js的…

搭建禅道环境作为练习UI和接口自动化测试对象

搭建禅道环境作为练习UI和接口自动化测试对象 1 目的2 禅道下载3 禅道安装4 禅道运行5 接口查看6 验证接口测试7 验证UI测试 1 目的 做UI和接口自动化练习时&#xff0c;有时候找不到合适的对象&#xff0c;我们可使用禅道来联系&#xff1b;因为禅道有开源版&#xff0c;可以…