浅谈JavaScript 中深拷贝实现的方法

Vicky 发布于2019-08-20 13:50 / 2891人阅读

摘要：相信人很多学习的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。中的深拷贝也是用类似方法实现。

相信人很多学习js的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。
比较简单的拷贝方式可以借用浏览器的Json对象去实现，先把对象转化为json字符串，在解析回对象实现深拷贝。具体代码就是JSON.parse(JSON.stringify(target));但是这种比较hack的方法总归不是正途，现在我就来贴两种我自己写的深拷贝代码。

function deepClone(currobj){
    if(typeof currobj !== "object"){
        return currobj;
    }
    if(currobj instanceof Array){
        var newobj = [];
    }else{
        var newobj = {}
    }
    for(var key in currobj){
        if(typeof currobj[key] !== "object"){
            newobj[key] = currobj[key];
        }else{
            newobj[key] = deepClone(currobj[key])    
        }
    }
    return newobj
}

第一种自然就是递归，遍历对象的每一个属性然后赋值到新对象了，若是有深层次嵌套的对象，递归执行函数。jq中的深拷贝也是用类似方法实现。

    function deepClone(currobj){
        if(typeof currobj !== "object"){
            return currobj;
        }
        if(currobj instanceof Array){
            var newobj = [];
        }else{
            var newobj = {}
        }
        var currQue = [currobj], newQue = [newobj];
        while(currQue.length){
            var obj1 = currQue.shift(),obj2 = newQue.shift();
            for(var key in obj1){
                if(typeof obj1[key] !== "object"){
                    obj2[key] = obj1[key];
                }else{
                    if(obj1[key] instanceof Array ){
                        obj2[key] = [];
                    }else{
                        obj2[key] = {}
                    };
                    currQue.push(obj1[key]);
                    newQue.push(obj2[key]);
                }
            }
        }
        return newobj;
    };

上一种递归的方式容易引起内存溢出，特别是对一个比较复杂，层级很深的对象进行深拷贝。所以第二种方法是用循环去拷贝次级的对象，用两个队列去保存需要拷贝的对象和拷贝目标，利用浅拷贝的原理实现了深拷贝。

但是有时候对象会存在子属性指向自身的问题，形成对象环，我这暂时还没有考虑到。

突然看到自己这篇文章，其实对象环的问题只需要别将旧数组出栈就行了具体代码：

function deepClone(currobj){
    if(typeof currobj !== "object"){
        return currobj;
    }
    if(currobj instanceof Array){
        var newobj = [];
    }else{
        var newobj = {}
    }
    var currQue = [currobj], newQue = [newobj], i = 0;
    while(i <= currQue.length - 1){
        var obj1 = currQue[i++],obj2 = newQue.shift();
        for(var key in obj1){
            if(typeof obj1[key] !== "object"){
                obj2[key] = obj1[key];
            }else{
                if(currQue.includes(obj1[key])){
                    obj2[key] = obj1[key];
                    continue;
                }
                if(obj1[key] instanceof Array ){
                    obj2[key] = [];
                }else{
                    obj2[key] = {}
                };
                currQue.push(obj1[key]);
                newQue.push(obj2[key]);
            }
        }
    }
    return newobj;
};

云服务器 GPU云服务器 javascript实现方法浅谈javascript javascript的方法 javascript浅拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81270.html

深入JavaScript中深拷贝和浅拷贝

摘要：深拷贝和浅拷贝问题的本质还是不同数据类型的存储方式差异，尤其是引用数据类型的特殊。深拷贝和浅拷贝问题的本质还是不同数据类型的存储方式差异，尤其是引用数据类型的特殊。showImg(https://segmentfault.com/img/bVbb8XH?w=1058&h=409); 现分别对赋值、浅拷贝、深拷贝做深入研究： 1.赋值原理：直接将对象指针直接赋值给另一个变量代码： ...

TalkingData 2019-08-22 17:58 评论0 收藏0
JS中深拷贝与浅拷贝

摘要：地址传递引用类型则是地址传递，将存放在栈内存中的地址赋值给接收的变量。即对象的浅拷贝会对主对象进行拷贝，但不会复制主对象里面的对象。相关知识点 1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。引...

ranwu 2019-08-23 15:41 评论0 收藏0
js中深拷贝与浅拷贝（堆内存、栈内存的关系）

摘要：而堆内存主要负责像对象这种变量类型的存储，如下图引用类型中复制浅拷贝的只是栈内存中的指针，指向同一个堆内存的对象如何实现深拷贝最简单的方法就是与方法浅拷贝只会在引用类型中出现基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。引用数据类型(Object类)有常规名值对的无...

AlienZHOU 2019-08-26 13:45 评论0 收藏0
js基础深入浅出

摘要：当多个事件触发的时候，会把异步事件依次的放入里等同步事件执行完之后，再去队列里一个个执行拾遗常用方法总结面试的信心来源于过硬的基础参考高级程序设计你所不知道的深入浅出知识点思维导图经典实例总结那些剪不断理还乱的关系持续不断更新。。。基本类型和引用类型 vue props | Primitive vs Reference Types 基本类型和字面值之间的区别基本类型和字面值相等，...

phodal 2019-08-20 16:21 评论0 收藏0
Javascript 中的对象拷贝

摘要：原文在这篇文章中我们将会讨论中对象拷贝的多种方式。因此，根据你的用法需要特别注意的对象拷贝。在拥有权限的情况下，通知立即关闭。在中深拷贝不幸的是，结构化拷贝算法目前仅适用于基于浏览器的应用。原文：COPYING OBJECTS IN JAVASCRIPT在这篇文章中我们将会讨论 Javascript 中对象拷贝的多种方式。包括深拷贝和浅拷贝。开始之前，先谈一些基础知识： Javasc...

lieeps 2019-08-26 12:25 评论0 收藏0