脚本宝典收集整理的这篇文章主要介绍了

JS中的深拷贝与浅拷贝

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

  • 深拷贝在计算机中开辟了一块内存地址用于存放复制的对象,
  • 而浅拷贝仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅拷贝出来的对象也会相应改变。

深拷贝的实现:
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]

总结

以上是脚本宝典为你收集整理的

JS中的深拷贝与浅拷贝

全部内容,希望文章能够帮你解决

JS中的深拷贝与浅拷贝

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过