递归深拷贝的封装

原创已于 2023-06-05 10:42:25 修改 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-05-06 10:25:06 首次发布

ElementUI 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何利用递归函数实现JavaScript中的深拷贝，分别展示了对数组和对象的深拷贝用法。在示例中，当检测到属性是数组或对象时，会进行递归复制，确保拷贝出的对象与原对象相互独立，修改拷贝后不会影响原对象。

利用递归进行深拷贝方法的封装

方法：

    function deepCopy(newObj, obj) {
        for (let key in obj) {
            // obj[key]有可能是数组，有可能是，有简单类型
            if (obj[key] instanceof Array) { // obj[key]是数组
                newObj[key] = []
                deepCopy(newObj[key], obj[key]);
            } else if (obj[key] instanceof Object) {// obj[key]是对象
                newObj[key] = {}
                deepCopy(newObj[key], obj[key]);
            } else {
                newObj[key] = obj[key];
            }
        }
    }

数组深拷贝的使用：

// 数组调用深拷贝
    const arrOld = [1, 2, 3, 4, 5, 6]
    const arrNew = []
    deepCopy(arrNew, arrOld)
    arrNew.splice(1, 2)
    console.log(arrNew, arrOld); // [1, 4, 5, 6]  [1,2,3,4,5,6]

对象深拷贝的使用:

    // 对象调用深拷贝
    const objOld = {
        name: '小明',
        age: 18,
        sex: '男'
    }
    const objNew = {}
    deepCopy(objNew, objOld)
    objNew.name = '张三'
    console.log(objNew, objOld);