浅谈JS深拷贝与浅拷贝

浅谈JS深拷贝与浅拷贝

前言

昨天复习了下JS,看到了以前打的深拷贝与浅拷贝代码，我整理了下。
一提到拷贝，大家可能想到的是这样：

let jg = { name: "wang", url: "www.jianng21.top" }
    let obj1 = jg;//赋值 使用同一内存空间 
    obj1.name = "wangwang"  //改变obj1 jg.name也会被改变

这是我们不希望的，所以赋值的这种方法不可取

浅拷贝

方法一：

    let obj2 = {
        name:jg.name,
        url:jg.url,
    }
    obj2.name = "wangwangwang"
    console.log(obj2)

方法二：

 	//2 for in 循环
    let obj3 ={};
    for(const key in jg)
    {
        obj3[key] = jg[key]
    }
    obj3.name = "wangkejiang";
    console.log(obj3);

方法三：

	//3 Object.assign
    let obj4 = {}
    Object.assign(obj4,jg)
    obj4.name = "ww"
    console.log(obj4);

方法四：

//4.点语法 ...
    let obj5 = {...jg}
    obj5.name = "jj"
    console.log(obj5)

上面这几种方法都能实现对一个对象的拷贝，在改变拷贝对象的值时，原的对象不会被改变，但是，如果被拷贝的里面又子对象，上面这种方法是无法拷贝子对象的！比如

let jg = {
        name: "wang",
        url: "www.jianng21.top",
        others: {
            sex: "man"
        }
    }
let obj5 = { ...jg }
    obj5.name = "jj"
    obj5.others.sex = "woman"
    console.log(obj5)

    console.log(jg);

总结：以上这4种方法，不能拷贝对象中的子对象和方法，就称之为浅拷贝。

深拷贝

既然上面那几种方式不能拷贝对象中的子对象和方法，那么怎么解决呢？废话不多说，直接上代码！

 let obj = {
        user: {
            name: "wang"
        },
        arr: [],
        professional: "student"
    }

function deepcopy(o) {
        let res = o instanceof Array ? [] : {};
        for (const [key, value] of Object.entries(o)) //const[key,value]解构语法
        {
            res[key] = typeof value == "object" ? deepcopy(value) : value;
            //此处的typeof 检测数据类型 输出为一下几个 
            //undefined object boolean number string function symbol

        }
        return res;
    }
    let obj3 = deepcopy(obj);
    obj3.user.name = "Tony";
    obj3.arr.push("123");

    console.log(obj3)
    console.log(obj)

完美解决！！