JavaScript 手写深拷贝

2023-11-18

深拷贝

深拷贝就是要拷贝的对象内的所有引用类型的属性进行完整的拷贝;

也就是说拷贝出来的对象和原对象之间没有任何数据是共享的,所有的东西都是自己独占的一份;

三步实现深拷贝

第一步:判断入参是值类型还是引用类型,值类型直接返回

      		if(typeof obj !== 'object' || obj == null){
                return obj;
            }

第二步:判断是数组还是对象,用空变量接收结果

			if( obj instanceof Array){
                result = [];
            }else{
                result = {};
            }

第三步:递归调用

				if(obj.hasOwnProperty(key)){
                    // 递归调用
                    result[key] = deepClone(obj[key]);
                }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深拷贝</title>
</head>
<body>
    <script>
        const obj1 = {
            name: "张三",
            address: {
                city: "北京",
                a:['1']
            }
        };
        //进行深拷贝
        const obj3 = deepClone(obj1);
        //修改深拷贝的数据
        obj3.address.city = "南京";
        //打印拷贝模板数据
        console.log('obj1',obj1);
        //打印修改后的深拷贝数据
        console.log('obj3',obj3);


        // obj = {}默认值
        function deepClone(obj = {}){
            // 判断传入的 obj 是不是数组或对象,不是直接返回 obj
            if(typeof obj !== 'object' || obj == null){
                return obj;
            }
            let result;
            // 判断是不是数组
            if( obj instanceof Array){
                result = [];
            }else{
                result = {};
            }
            for(let key in obj){
                // hasOwnProperty()方法:检测一个属性是否是对象的自有属性
                if(obj.hasOwnProperty(key)){
                    // 递归调用
                    result[key] = deepClone(obj[key]);
                }
            }
            return  result;
        }
    </script>
</body>
</html>

控制台输出

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 手写深拷贝 的相关文章

随机推荐

  • 升级Linux中的默认JDK的版本

    我用的Linux是 红帽企业级Linux AS版 TLF SOFT Redhat Enterprise Linux AS V4 0 UPDATE 7 DVD 因工作需要 将Linux中默认安装的Jdk 版本为1 4 进行升级 将升级的经验和
  • BigDecimal的常用方法

    一 BigDecimal概述 Java在java math包中提供的API类BigDecimal 用来对超过16位有效位的数进行精确的运算 双精度浮点型变量double可以处理16位有效数 但在实际应用中 可能需要对更大或者更小的数进行运算
  • Python学习笔记(基础篇)

    目录 一 Python编程基础 1 1print 1 2 input 1 3 ASC 码 1 4注释 二 数据类型与基本运算符 2 1变量 2 2数值类型 整数 浮点数 复数 2 3字符串 2 4布尔类型 2 5数据类型转换 2 6算数运算
  • 【mysql】mysql group by分组后取每组的最小值

    方法一 非严格模式下 group by后 会取分组后多个create time 的其中一个 由于我们的 create time 时间是有序的 会取第一条 如果是无序字段 很可能取的顺序会有问题 可以在create time 前面加上grou
  • 苹果系统 macOS Mojave 10.14.4上安装 Ubuntu 18.04 双系统

    macOS Mojave 10 14 4 安装Ubuntu 18 04 双系统 0 准备工作 系统情况 1 制作Ubuntu安装盘 U盘 2 硬盘分区 3 安装Ubuntu 4 正常使用GRUB 5 调整Ubuntu设置 2019 07 1
  • Tomcat开启远程调试端口

    部署环境 Linux 亲测成功 tomcat7 bin startup sh的文件开头位置添加 declare x CATALINA OPTS server Xdebug Xnoagent Djava compiler NONE Xrunj
  • JavaWeb JDBC

    1 实现第一个JDBC程序 在MySQL中创建一个名称为jdbc的数据库 然后在该数据库中创建一个users表 创建 数据库和表的SQL语句如下所示 CREATE DATABASE jdbc USE jdbc CREATE TABLE us
  • html前后端缓存,前后端分离系列-缓存篇

    1 我们需要在静态文件返回给浏览器的时候header中的缓存变长 这样就可以在本地秒加载 省去了带宽和加载时间 修改server js const path require path const Koa require koa const
  • 内存泄露原因和解决方案

    资料参考出自 http blog chinaunix net uid 26930580 id 3844811 html http www jianshu com p 90caf813682d 为什么会产生内存泄漏 当一个对象已经不需要再使用
  • 基于Matlab应用DBSCAN

    基于Matlab应用DBSCAN Density Based Spatial Clustering of Applications with Noise 具有噪声的基于密度的聚类方法 一 算法原理 Matlab中的统计与机器学习工具箱 Th
  • SuperSocket实战手把手教程:一个完整的SocketServer项目

    SuperSocket系列教程 1 SuperSocket基础 一 基本概念 2 SuperSocket实战手把手教程 一个完整的SocketServer项目 目录 一 项目场景 1 Visual Studio新建项目 2 自定义自己服务器
  • pre loader简单分析

    ZZ from http blog csdn net ly601579033 article details 48318239 大致的流程图如下 上电后RESET ARM核开始执行Boot ROM 具体操作有 代码固化在ROM中 1 初始化
  • 【软件硬件】相机标定(Camera calibration)原理、步骤

    转载来源 https blog csdn net lql0716 article details 71973318 locationNum 8 fps 1 在图像测量过程以及机器视觉应用中 为确定空间物体表面某点的三维几何位置与其在图像中对
  • 使用OpenGL实现的光线追踪器示例

    使用OpenGL实现的光线追踪器示例 光线追踪是一种计算机图形学中常用的方法 它可以模拟光线在三维空间中的传播和反射 在本文中 我们将介绍如何使用OpenGL实现一个简单的光线追踪器 在本例中 我们将创建一个场景 其中包含一个球体和一个平面
  • flutter a .dex file cannot exceed 64K

    第一步 添加multidex 第二部 添加multiDexEnabled 构建运行完事
  • 获取下拉菜单值

    function getSelectVal ele var selectedIndex ele selectedIndex var value ele options selectedIndex value return value
  • oracle生成编号(首字母+YYYY-DD-MM+4位序号)自动增长,4位序号达到9999,在从1001开始。

    今天写业务的时候遇见需要系统生成13位的编号 规则编号按一个大写字母 YYYY MM DD 4位序号组成 数据库用的oracle 所以就打算用序列实现 下面是实现方式 1 先创建序列 create sequence contact seq
  • vue2.x 插件的开发

    前言 第一次好好学习插件的开发 有什么不正确的地方麻烦指正 另外写这篇文章 纯粹是当作自己的学习笔记 插件 插件通常用来为 Vue 添加全局功能 插件的功能范围没有严格的限制 一般有下面几种 添加全局方法或者 property 如 vue
  • 如何查看和修改操作系统字符集

    在Windows平台下查看和修改字符集 一 查看字符集 chcp 二 修改字符集为936 chcp 936 简体中文 可以得到操作系统的代码页信息 你可以从控制面板的语言选项中 可以查看代码页对应的详细的字符集信息 linux下查看和修改字
  • JavaScript 手写深拷贝

    深拷贝 深拷贝就是要拷贝的对象内的所有引用类型的属性进行完整的拷贝 也就是说拷贝出来的对象和原对象之间没有任何数据是共享的 所有的东西都是自己独占的一份 三步实现深拷贝 第一步 判断入参是值类型还是引用类型 值类型直接返回 if typeo