JS中的深拷贝与浅拷贝

wuyumin 发布于2019-08-22 16:11 / 2932人阅读

摘要：深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。

深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，

深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，

而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。

深拷贝的实现:
1.通过递归解决

    var a={a:23,b:[1,2,3,[5]],c:{name:"南京"}};
    function deepCopy(initObj,finalObj) {
        var obj=finalObj||{};
        for(var i in initObj){
            var prop = initObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
            if(prop === obj) {
                continue;
            }

            if(typeof initObj[i]==="object"){
                obj[i]=(initObj[i].constructor===Array)?[]:{};
//                arguments.callee(initObj[i],obj[i]);
                deepCopy(initObj[i],obj[i]);
            }else{
                obj[i]=initObj[i];
            }
        }
        return obj;
    }
    var b=deepCopy(a);
    b["name"]="武汉";
    b.c.name="长江";
    console.log(a);
    console.log(b);

2.使用Object.create

    var a={a:23,b:[1,2,3,[5]],c:{name:"南京"}};
    function deepCopy(initObj,finalObj) {
        var obj=finalObj||{};
        for(var i in initObj){
            var prop=initObj[i];
            if(prop===obj){
                continue;
            }
            if(typeof prop==="object"){
//                obj[i]=prop.constructor==="Array"?[]:Object.create(prop);
//                obj[i]=prop.isPrototypeOf(Array)?[]:Object.create(prop);
                obj[i]=prop instanceof Array?[]:Object.create(prop);
            }else{
                obj[i]=prop;
            }
        }
        return obj;
    }
    var b=deepCopy(a);
    b["name"]="武汉";
    b.c.name="长江";
    console.log(a);
    console.log(b);

3.借助JSON

var a={a:23,b:[1,2,3,[5]],c:{name:"南京"},d:function () {
        console.log("hh");
    }};
var b=JSON.parse(JSON.stringify(a));
b["name"]="武汉";
b.c.name="长江";
console.log(a);
console.log(b);
console.log(a.d);
console.log(b.d);

这种方法的缺点是无法复制函数,再就是原型链没了,对象就是object,所属的类没了.
4、Object.assign()处理一层的深度拷贝

var a={name:"武汉",num:[1,2,3]};
var b=Object.assign({},a);
b.name="南京";
console.log(a);
console.log(b);

数组的拷贝,ES6有Array.from和...两种方法不会发生引用,js中的slice和concat

var a=[1,2];
var b=Array.from(a);
b.push(3);
var c=[...a];
c.push(4);
var d=a.slice(0);
d.push(-1);
var e=a.concat([5]);

console.log(a); //[1,2]
console.log(b); //[1,2,3]
console.log(c); //[1,2,4]
console.log(d); //[1,2,-1]
console.log(e); //[1,2,5]

GPU云服务器云服务器 js拷贝内存数据库后拷贝预拷贝深拷贝和浅拷贝浅拷贝

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

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

JS中的深拷贝与浅拷贝

摘要：中的深拷贝与浅拷贝说到深浅拷贝的时候就不得不说一下中的变量类型了基本类型按值存放在栈内存中的简单数据段可以直接访问引用类型存放在堆内存中的对象变量保存的是一个指向存放数据位置的指针访问引用类型的值时首先从栈中获取到存放该数据位置的指针然后再 JS中的深拷贝与浅拷贝说到深浅拷贝的时候就不得不说一下JS中的变量类型了: 基本类型: undefined、null、boolean、numb...

ARGUS 2019-08-26 12:13 评论0 收藏0
JS 中的深拷贝与浅拷贝

摘要：什么是深拷贝浅拷贝见名知义，无论是深拷贝还是浅拷贝，都是的问题。使用如下以上就是关于中的深拷贝与浅拷贝的知识和如何进行深拷贝的知识了，如果有错或者有其他方式的话，欢迎在下面留言评论啦前言最近在写项目的时候涉及到一些父子组件传递个对象或者数组通信啥的，或者是直接复制添加对象啥的，直接使用赋值的时候总会出错。一查原来是浅拷贝的问题，就从网上找了点资料，汇总到这里来了。 1 什么是深拷贝...

ztyzz 2019-08-23 13:41 评论0 收藏0
低门槛彻底理解JavaScript中的深拷贝和浅拷贝

摘要：案例中的赋值就是典型的浅拷贝，并且深拷贝与浅拷贝的概念只存在于引用类型。修改修改经测试，也只能实现一维对象的深拷贝。经过验证，我们发现提供的自有方法并不能彻底解决的深拷贝问题。在说深拷贝与浅拷贝前，我们先看两个简单的案例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num...

wind3110991 2019-08-22 16:02 评论0 收藏0
浅谈深拷贝和浅拷贝

摘要：而引用类型值是指那些保存堆内存中的对象，意思是变量中保存的实际上只是一个指针，这个指针指向内存中的另一个位置，该位置保存对象。而堆内存主要负责对象这种变量类型的存储。我们需要明确一点，深拷贝与浅拷贝的概念只存在于引用类型。深拷贝和浅拷贝说起深拷贝和浅拷贝，首先我们来看两个栗子 // 栗子1 var a = 1,b=a; console.log(a); console.log(b) ...

littleGrow 2019-08-23 15:34 评论0 收藏0
javascript的深拷贝VS浅拷贝

摘要：深拷贝浅拷贝本文主要对深拷贝浅拷贝的解释及实现做一下简单记录。之所以会有深拷贝与浅拷贝之分，是因为不同数据类型的数据在内存中的存储区域不一样。但注意，只能做一层属性的浅拷贝。深拷贝VS浅拷贝本文主要对深拷贝&浅拷贝的解释及实现做一下简单记录。原文链接，欢迎star。之所以会有深拷贝与浅拷贝之分，是因为不同数据类型的数据在内存中的存储区域不一样。堆和栈是计算机中划分出来用来存储的...

Nekron 2019-08-23 15:08 评论0 收藏0