【JS】深拷贝与浅拷贝

news2024/9/22 17:29:31

深拷贝与浅拷贝

  • 浅拷贝
  • 实现浅拷贝的方法
      • 扩展运算符
  • 深拷贝
  • 实现深拷贝的方法
      • 递归
      • JSON.parse(JSON.stringify())

深拷贝和浅拷贝都是处理对象或数据的复制操作

浅拷贝

  • 浅拷贝创建一个的对象,复制的是原对象的引用
  • 新对象与原对象共用一个相同的内存地址,因此改变新对象也会影响原对象。

实现浅拷贝的方法

扩展运算符

扩展运算符可以实现单层深拷贝,改变新对象不会影响原对象,但如果对象中的属性值是引用类型,发生改变会影响原对象

    let obj = {
        "name": "zs",
        "age": 20,
        "children": { 'name': 'ls', 'age': 10 }
    }
    // 扩展运算符实现浅拷贝
    let ShallowCopy = { ...obj }
    ShallowCopy.children.name = "ww";//两个对象children.name都变成ww
    ShallowCopy.age = 19//只有新对象的age会改变
    console.log(obj);
    console.log(ShallowCopy);

在这里插入图片描述

深拷贝

  • 浅拷贝会创建一个新的对象,复制的是原对象的值
  • 新对象与原对象有不同的内存地址,因此两个对象之间相互独立,发生改变也会不影响

实现深拷贝的方法

递归

var obj = {
      obj_1: {
        age: 20,
      },
      arr: [1, 2, 3],
    }
    var newObj = {}
    function deepCopy(obj, newObj) {
      for (key in obj) {
        if (obj[key].constructor == Array) {
          newObj[key] = []
          recursion(obj[key], newObj[key])
        } else if (obj[key].constructor == Object) {
          newObj[key] = {}
          recursion(obj[key], newObj[key])
        }else {
            newObj[key] = obj[key]
        }
      }
    }
    deepCopy(obj, newObj)//函数调用
    //进行验证,改变newObj中的age不影响obj中的age
    newObj.obj_1.age = 18
    console.log(newObj)
    console.log(obj);

在这里插入图片描述

JSON.parse(JSON.stringify())

  • 原理:用 JSON.stringify 将对象转成 JSON 字符串,再用 JSON.parse()把字符串解析成新的对象。
    let obj = {
        "name": "zs",
        "age": 20,
        "sex": "man"
    }
    let newObj = JSON.parse(JSON.stringify(obj))
    obj.age = 30;
    console.log(obj);
    console.log(newObj);

在这里插入图片描述

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

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

相关文章

分布式算法-Paxos、Raft、ZAB复习

目录 1. Paxos算法 1.1 算法流程 1.2 接受者选举规则 2. Raft算法 2.1 Leader选举 2.2 安全性 3. ZAB算法 3.1 ZAB协议介绍 3.2 消息广播 3.3 崩溃恢复 3.4 数据同步 1. Paxos算法 Paxos 算法是 Leslie Lamport 在 1990 年提出的,经典且完备的分布式一致…

docker的镜像制作

镜像的加载原理 docker的镜像实际上由一层一层的文件系统组成,这种层级的文件系统UnionFS UnionFS(联合文件系统): Union文件系统(UnionFS)是一种分层、轻量级并且高性能的文件系统,它支持对文件系统的修改…

Delphi 12.1安卓APP开发中获取硬件信息及手机号

Demo与代码已上传到CSDN下载。 这里简单说一下代码内容,完整代码请自行下载,不清楚的欢迎留言交流。 前言 演示Demo使用了我自己开发的一个控件,TLayoutPro 《Delphi D10.3 LayoutsPro 控件简介 -避免输入焦点被虚拟键盘遮挡》请查看并下载控…

第三部分:3---环境变量

目录 什么是环境变量? PATH环境变量: 临时修改环境变量PATH: HOME环境变量: 可能使用环境变量的场景: 进程和环境变量的关系: 环境变量相关操作: 代码获取环境变量: 主函数传…

百度静态资源瓦片nginx直接显示完整案例

案例地址:https://download.csdn.net/download/jinhuding/89733763 访问显示效果:(根据瓦片地址直接显示) http://172.16.39.203:8099/tiles/

(rs系列)rs4之补环境

网站:aHR0cDovL3d3dy5mYW5nZGkuY29tLmNuLw 先讲讲rs4特征​: 1、打开控制台立刻进入无限debugger,混淆代码格式_$xx 会有两次无限debugger,直接在对应位置鼠标右键》Never pause here即可​。当然这种方法比较耗资源,也…

代码随想录算法训练营第42天|188. 买卖股票的最佳时机 IV、714. 买卖股票的最佳时机含手续费

目录 188. 买卖股票的最佳时机 IV(交易最多k次)1、题目描述2、思路3、code4、复杂度分析 714. 买卖股票的最佳时机含手续费1、题目描述2、思路3、code4、复杂度分析 309. 买卖股票的最佳时机含冷冻期1、题目描述2、思路3、code4、复杂度分析 买卖股票习题…

智能语音交互:人工智能如何改变我们的沟通方式?

在科技飞速发展的今天,人工智能(AI)已经渗透到我们生活的方方面面。其中,智能语音交互作为AI技术的一个重要分支,正以前所未有的速度改变着我们的沟通方式。从智能家居的控制到办公自动化的应用,再到日常交…

CentOs7 解决yum更新源报错:[Errno 14] HTTP Error 404 - Not Found 正在尝试其它镜像。

CentOs7 解决yum更新源报错:[Errno 14] HTTP Error 404 - Not Found 正在尝试其它镜像。 前言问题解决方法: 前言 遇到这个问题大概率是镜像源的问题可以参照这篇文章的内容试一下 镜像源问题相关解决方法 根据自己的情况对症下药,如果还不…

WPS如何删除表格下的空白页

WPS Office(12.1.0.17827) ① 鼠标右键,选择段落 ② 行距:固定值;设置值:1磅;取消勾选,确定即可~

【区块链 + 人才服务】CERX- 基于联盟链的研学资源交换网络 | FISCO BCOS应用案例

CERX 是定位于面向高校科学研究与教学的分布式研学资产交换网络,构建一个用于数据、算法模型、论文和课程的研学资源价值流转平台。该平台采用 FISCO BCOS 联盟链为核心区块链层。 CERX 基于“交叉学科”的人才培养生态,围绕“科研、课件、课程、证书”…

【C++从练气到飞升】23--内联函数、auto、范围for、nullptr

🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书🎉 目录 ⛳️推荐 一、内联函数 1.1 定义 1.2 特性 二、auto关键字 2.1 简介 2.2 auto使用细则 2.3 不能使用aut…

ES6标准---【二】【学习ES6看这一篇就够了!!】

目录 ES6以往文章 ES6新增字符串方法: includes()、startsWith()、endsWith() repeat() padStart()、padEnd() 常见用途 为数值补全指定位数 提示字符串格式 trimStart()、trimEnd() String.raw() ES6以往文章 ES6标准-【一】【学习ES6看这一篇就够了&a…

开关电源综合测试平台自动生成报告,智能分析电源测试参数

在电源模块的检测过程中,数据的准确性和分析效率至关重要,开关电源综合测试平台的数据报告和数据分析功能为企业的电源测试带来了便利。 NSAT-8000开关电源综合测试平台是集自动化测试与数据收集分析于一体的综合测试软件,打破了传统测试系统…

【组件】WEB前端-富文本编辑器组件推荐 在线编辑器 Word

【组件】WEB前端-富文本编辑器组件推荐 在线编辑器 Word canvas-editor 基于canvas/svg的富文本编辑器 canvas-editor | rich text editor by canvas/svgrich text editor by canvas/svghttps://hufe.club/canvas-editor-docs/ canvas-editor 基于canvas/svg的富文本编辑器 开…

文案改写工具有哪些?5款智能改写工具迅速提升文案品质

在信息爆炸的时代,优秀的文案如同黄金,能瞬间抓住消费者的眼球。然而,创作出独具匠心的文案并非易事,尤其是当需要不断改写以保持文案内容新鲜感时。那么,文案改写工具有哪些是能帮助我们事半功倍呢?以下5款…

Goby 漏洞发布|(CVE-2024-45195)Apache OFBiz /viewdatafile 代码执行漏洞【已复现】

漏洞名称:Apache OFBiz /viewdatafile 代码执行漏洞(CVE-2024-45195) English Name:Apache OFBiz /viewdatafile Code Execution Vulnerability(CVE-2024-45195) CVSS core: 8.0 漏洞描述: Apache OFBiz是一个开源…

--数据库--

制作工人薪资管理系统 #include <myhead.h> #include <sqlite3.h> typedef struct {int gh;char name[20];double salary; }Worker;int do_insert(sqlite3 *ppdb) {Worker work;printf("请输入插入的工号&#xff1a;");scanf("%d",&work.…

基于Verilog HDL的FPGA设计基础

第一章 Verilog数字集成电路设计方法概述 HDL(Hardware Description Language)----硬件描述语言 EDA(Electronic Design Automation)----电子设计自动化 VLSI(Very Large Scale Integrated)----超大规模集成电路 ASIC(Application Specific Integrated Circuit)----专用集成电路…

坚守官网,深挖没有错;积极转型也没错,就怕10年前经验用在现在

如今官网建设领域哀嚎一片&#xff0c;出现三种应对策略。 其一&#xff1a;坚守官网&#xff0c;深挖下去&#xff0c;做出高大上&#xff0c;精美炫酷和实效网站&#xff0c;路子很对。 其二&#xff1a;积极寻求转型&#xff0c;客户需要啥就做啥&#xff0c;比如搞小程序…