利用递归实现深浅拷贝(下)

73 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情

instanceof方法

A instanceof B 的意思是: A是否是B创建的使用instanceof方法可以一直刨析一个复杂数据类型直到得到基本数据类型或者函数

为了实现深拷贝的原型方法我们前面了解了递归以及instanceof,下面我们开始一步步分析.

1.先应该封装一个可以实现深拷贝的函数有两个形参接收两个数组


  function cloneDeep(obj1, obj2) {

        }

2.使用for循环遍历obj2,判断里面的数据类型方便后面判断是否是复杂数据类型

  function cloneDeep(obj1, obj2) {
            for (let k in obj2) {
            }
        }

因为所有对象都是Object创建的,所以判断数组,应该在判断对象之前!

function cloneDeep(obj1, obj2) {
            for (let k in obj2) {
                console.log(k)
                // console.log(k)
                // 判断属性值的类型: Array, Object, 其他类型就可以当做简单类型操作
                //   A instanceof B 的意思是: A是否是B创建的;
                // 因为所有对象都是Object创建的,所以判断数组,应该在判断对象之前!
                if (obj2[k] instanceof Array) {
                    obj1[k] = []; // 设置obj1里面的相同属性为一个空数组;
                    cloneDeep(obj1[k], obj2[k]); // 递归通过数组赋值;
                } 
            }
        }

同理判断是不是对象,如果是继续刨析,直到全部变成简单数据类型或者函数,其他类型全部当做简单类型,直接赋值

function cloneDeep(obj1, obj2) {
            for (let k in obj2) {
                console.log(k)
                // console.log(k)
                // 判断属性值的类型: Array, Object, 其他类型就可以当做简单类型操作
                //   A instanceof B 的意思是: A是否是B创建的;
                // 因为所有对象都是Object创建的,所以判断数组,应该在判断对象之前!
                if (obj2[k] instanceof Array) {
                    obj1[k] = []; // 设置obj1里面的相同属性为一个空数组;
                    cloneDeep(obj1[k], obj2[k]); // 递归通过数组赋值;
                } else if (obj2[k] instanceof Object) {
                    obj1[k] = {};// 设置obj1里面的相同属性为一个空对象;
                    cloneDeep(obj1[k], obj2[k]);// 递归通过对象赋值;
                } else {
                    // 其他类型全部当做简单类型,直接赋值;
                    obj1[k] = obj2[k];
                }
            }
        }

大功告成.

下面开始测试

let o1 = { name: '张三', age: 18, friends: ['王五'], aaa: { a: 1, b: 2 } };
        let o2 = {};
        cloneDeep(o2, o1);
        // 修改o1里面的数据
        o1.name = '李四';
        o1.age = 25;
        o1.friends.push('赵六');
        o1.aaa.a = 111;
        o1.aaa.b = 222;
        console.log(o1);
        console.log(o2);

QQ截图20220614162852.png 这样分析下来我们发现其实利用递归实现深拷贝就是把一个对象里面的复杂数据类型刨析成简单数据类型然后赋值.