首页 > 编程语言 >JavaScript 手写深拷贝

JavaScript 手写深拷贝

时间:2022-10-27 23:31:32浏览次数:45  
标签:obj1 obj3 obj JavaScript result key 手写 拷贝

深拷贝

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

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

三步实现深拷贝

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

      		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>

控制台输出

在这里插入图片描述

标签:obj1,obj3,obj,JavaScript,result,key,手写,拷贝
From: https://blog.51cto.com/u_15718546/5802002

相关文章

  • 深拷贝和浅拷贝的区别
    浅拷贝:实现了Cloneable接口,重写了clone(),直接调用父类Object的clone()方法深拷贝:Person类的clone()方法进行修改,连带着把Person对象内部的Address对象一起复制还可以通......
  • JavaScript数组相关操作方法以及数组扩展与修复
    JavaScript一些常用的操作方法join()将数组中所有元素转化为字符串并连接一起,返回最后生成的字符串。可以指定分隔符;vararr=[23,56,78,0,98,190];consol......
  • JavaScript设计模式-行为设计模式
    行为设计模式用于不同对象之间职责划分、算法抽象,包含:模板方法模式、观察者模式、状态模式、策略模式、职责链模式、命令模式、访问者模式、中介模式、备忘录模式、迭代器模......
  • JavaScript设计模式-结构型设计模式
    结构型设计模式关注如何把类或者对象组合成为更大、更复杂的结构,简化设计。包含:外观模式、适配器模式、代理模式、装饰者模式、桥接模式、组合模式、享元模式外观模式(套餐服......
  • JavaScript中的
    "=="和"==="运算符使用于比较两个值是否相等。都允许任意类型的操作数,若操作数相等则返回true,否则返回false。"===":严格相等运算符(恒等运算符),用来检测两个操作数是......
  • JavaScript中易忘的运算符
    eval()JavaScript通过全局函数eval()可以解释运行由JavaScript源码组成的字符串并且产生一个值。eval("25*4");//==100eval()是一个原本是一个函数,但是已经被当成运算符来......
  • JavaScript函数进阶
    JavaScript中函数是第一类对象。函数与对象共存,函数也可以被视为其他人一类型的JavaScript对象。函数能被变量引用、能以字面量形式声名,甚至可以作为函数参数进行传递。Java......
  • JavaScript数组的push()等方法的使用
        数组是值得有序集合。每个值在数组中有一个位置,用数字表示,叫做索引。JavaScript数组是无类型的:数组元素可以是任何类型,而且同一个数组中可以存在不同类型元素,甚......
  • 【笔记02】Javascript - 基本概念 - (语句、练习)
    Javascript基本概念:语句if、ifelsefor 循环while 循环dowhile 循环switchcasebreakcontinueif、ifelse语法:if(条件){语句}elseif(){语句}else{语句}条件成......
  • 手写 Java HashMap 核心源码
    手写JavaHashMap核心源码手写JavaHashMap核心源码上一章手写LinkedList核心源码,本章我们来手写JavaHashMap的核心源码。我们来先了解一下HashMap的原理。Ha......