js深浅克隆

25 阅读1分钟

浅克隆

只克隆第一级属性,如果某个属性又是一个内嵌的子元素,不会进入子对象中克隆子对象的内容。 第一级属性更改不会更改newObj,更改深层次从内容会影响到newObj

  let oldObj = {
            a: "jiqnian",
            arr: [111, 33]
        }
        let deepClon= function (oldObj) {
            if (oldObj == null) return null;
            if (typeof oldObj !== "object") return oldObj;
            let newObj = Array.isArray(oldObj) ? [] : {};
            for (let key in oldObj) {
                // let temp = oldObj[key];
                // if(temp)
                newObj[key] = oldObj[key]
            }
            return newObj;
        }
        let obj1 = deepClon(oldObj)
        oldObj.a = "123"
        oldObj.arr.push("123")
        console.log(obj1);
// 结果{a:'jiqnian',arr:[11,33,'123']}

深克隆

既可以用第一级属性,如果某个属性又是一个内嵌的子对象,深克隆会进入子对象中,继续克隆内嵌子对象及其内容。 深克隆时完全克隆 包括一级元素的子对象 更改原对象的子对象 不会对新对象的子对象做成修改。

 let deepClon= function (oldObj) {
            if (oldObj == null) return null;
            if (typeof oldObj !== "object") return oldObj;
            let newObj = Array.isArray(oldObj) ? [] : {};
            for (let key in oldObj) {
                // let temp = oldObj[key];
                // if(temp)
                newObj[key] = deepClon(oldObj[key])
            }
            return newObj;
        }

深拷贝代码解析

通过函数的递归思想继续向下执行 将每个元素调用 deepClon方法 如果传入进去的不是对象 会将当初元素返回出来 如果传入进去的是一个对象 他会继续向下深入调用 把输入对象的每个元素给调用出来,有对象还会调用。