惊艳的前端深克隆

1.传统递归

        虽然最笨,但是扩展性也最强

function deepClone(value){

    if(typeof value !== 'object' || value === null){
        return value;
    }

    //value是对象
    const result = Array.isArray(value) ? []:{};
    for(let key in value){

        //具体是深克隆还是浅克隆看具体需求
        //result[key] = value[key]; // 这一步是浅克隆
        result[key] = deepClone(value[key]); // 这一步是深克隆
    }

    return result;
}

const obj = {
    a:1,
    b:2,
    c:function (){}
}

console.log(deepClone(obj)); // {a:1,b:2,c:function(){}} 克隆成功

//如果对象是class的实例化对象
function deepClone1(value){

    if(typeof value !== 'object' || value === null){
        return value;
    }

    //value是对象
    const result = Array.isArray(value) ? []:{};
    //原型保持一致
    Object.setPrototypeOf(result,Object.getPrototypeOf(value));

    for(let key in value){

        //具体是深克隆还是浅克隆看具体需求
        //result[key] = value[key]; // 这一步是浅克隆
        result[key] = deepClone(value[key]); // 这一步是深克隆
    }

    return result;
}

class Test{
    constructor(){
        this.a = 1;
        this.b = 2;
    }

    c(){
        console.log('c')
    }
}

const obj1 = new Test();
console.log(deepClone1(obj1)); // Test {a:1,b:2} 克隆成功
console.log(deepClone1(obj1).c); //执行成功


//如果对象是class的实例化对象,并且原型上还有自定义属性,上面的方法会将原型上的属性也克隆进去,实际是不希望被克隆进去
function deepClone2(value){

    if(typeof value !== 'object' || value === null){
        return value;
    }

    //value是对象
    const result = Array.isArray(value) ? []:{};
    //原型保持一致
    Object.setPrototypeOf(result,Object.getPrototypeOf(value));

    for(let key in value){
        if(!value.hasOwnProperty(key)){ //判断key是不是value的自由属性
            //具体是深克隆还是浅克隆看具体需求
            //result[key] = value[key]; // 这一步是浅克隆
            result[key] = deepClone(value[key]); // 这一步是深克隆
        }
        
    }

    return result;
}

class Test{
    constructor(){
        this.a = 1;
        this.b = 2;
    }

    c(){
        console.log('c')
    }
}

Test.prototype.d = 1;
const obj2 = new Test();
console.log(deepClone2(obj2)); //克隆成功


//如果里面还有循环引用,上面方法还会导致无限递归

const cache = new WeakMap();
function deepClone3(value){

    if(typeof value !== 'object' || value === null){
        return value;
    }

    //判断缓存里有没有
    if(cache.has(value)){
        retun cache.get(value);
    }

    //创建对象
    const result = Array.isArray(value) ? []:{}; //这里还可以考虑是不是 set,Map
    //设置缓存
    cache.set(value,result);

    //原型保持一致
    Object.setPrototypeOf(result,Object.getPrototypeOf(value));

    for(let key in value){
        if(!value.hasOwnProperty(key)){ //判断key是不是value的自由属性
            //具体是深克隆还是浅克隆看具体需求
            //result[key] = value[key]; // 这一步是浅克隆
            result[key] = deepClone(value[key]); // 这一步是深克隆
        }
        
    }

    return result;
}

class Test{
    constructor(){
        this.a = 1;
        this.b = 2;
    }

    c(){
        console.log('c')
    }
}

Test.prototype.d = 1;
const obj3 = new Test();
obj3.h = obj3
console.log(deepClone3(obj3)); //克隆成功

2.JSON

function deepClone(value){
    return JSON.parse(JSON.stringify(value));
}

//普通对象
const obj = {
    a:1,
    b:2
}
console.log(deepClone(obj)); //{a:1,b:2}  正常
 
//属性中有特殊类型
const obj1 = {
    a:1,
    b:2,
    c:new Map()
}
console.log(deepClone(obj1)); //{a:1,b:2,c:{}}  c变成了普通对象

//属性中有函数
const obj2 = {
    a:1,
    b:2,
    c:function (){}
}
console.log(deepClone(obj2)); //{a:1,b:2}  c被丢弃

//属性中有递归引用
const obj3 = {
    a:1,
    b:2
}
obj3.c = obj3
console.log(deepClone(obj3)); //直接报错 (无法解析递归引用)

3.MessageChannel 通信的方式来传输一个对象借助浏览器的功能来实现一个异步克隆

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值