js实现深拷贝、浅拷贝和完美拷贝封装 JSON拷贝和 assign 拷贝的区别

js 专栏收录该内容
12 篇文章 0 订阅

JSON.parse(JSON.stringify()) 和 Object.assign 的区别

Object.assign  浅拷贝 (拷贝一层)

    var obj ={
        name:'张珊',
        age:16,
        list:{a:'我我哦'}
    }
    // var o = obj ;
    // Object.assign  浅拷贝 拷贝一层
    var o =Object.assign({},obj) ;
    o.list.a='李四'
    console.log(o,obj)

控制台输出结果

JSON.parse(JSON.stringify())   深拷贝 多层


    // JSON.parse(JSON.stringify())   深拷贝 多层
    var obj ={
        name:'张珊',
        age:16,
        list:{a:'我我哦'}
    }
    var o = JSON.parse(JSON.stringify(obj)) ;
    o.list.a='李四'
    console.log(o,obj)

控制台输出结果

而我们在平常工作中使用JSON.parse(JSON.stringify()) 就可以解决90%的数据拷贝问题,如果还解决不了,下面有一个近乎完美的深拷贝解决方案可以拿去使用 

    // 完美的深拷贝  封装
    function deepCopy(obj, parent = null) {
    // 创建一个新对象
    let result = {};
    let keys = Object.keys(obj),
        key = null,
        temp= null,
        _parent = parent;
    // 该字段有父级则需要追溯该字段的父级
    while (_parent) {
        // 如果该字段引用了它的父级则为循环引用
        if (_parent.originalParent === obj) {
            // 循环引用直接返回同级的新对象
            return _parent.currentParent;
        }
        _parent = _parent.parent;
    }
    for (let i = 0; i < keys.length; i++) {
        key = keys[i];
        temp= obj[key];
        // 如果字段的值也是一个对象
        if (temp && typeof temp=== 'object') {
            // 递归执行深拷贝 将同级的待拷贝对象与新对象传递给 parent 方便追溯循环引用
            result[key] = deepCopy(temp, {
                originalParent: obj,
                currentParent: result,
                parent: parent
            });
        } else {
            result[key] = temp;
        }
    }
    return result;
}
var obj1 = {
    x: 1, 
    y: 2,
    list:{a:'aa'},
    b:'',
    c:undefined
};
// obj1.z = obj1;
var obj2 = deepCopy(obj1);
// obj1.z =222;
// var obj2 = JSON.parse(JSON.stringify(obj1)) ;    如果用JSON拷贝会丢失undefined(没有意义的值)
obj1.list.a =222;
obj1.b=undefined
console.log(obj1); //太长了去浏览器试一下吧~ 
console.log(obj2); //太长了去浏览器试一下吧~ 

 

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值