js深拷贝实现

最新推荐文章于 2025-07-25 15:15:00 发布

木蓝茶陌*_*

最新推荐文章于 2025-07-25 15:15:00 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js深拷贝深拷贝

本文链接：https://blog.csdn.net/jyn15159/article/details/124057255

JS 专栏收录该内容

89 篇文章

订阅专栏

本文探讨了JavaScript中实现深拷贝的两种方法：递归实现和JSON转换。通过递归方式，可以处理复杂对象的深层复制，而JSON转换适用于属性值非函数的情况。示例展示了如何使用这两种方法，并通过改变拷贝对象的属性值，证明了深拷贝的独立性。

js深拷贝实现

深拷贝：遍历一个对象中所有的属性的值及对象属性中的属性值，不论是嵌套了几层，要完成所有对象属性的递归后，赋值给一个新的对象。

使用递归：

function deepCopy (obj) {
    // 如果被拷贝的是简单数据对象，没必要进行深拷贝
    if (typeof obj !== 'object' || obj === null) {
        return;
    }
    // 判断被拷贝的是对象还是数组
    // let newObj = obj instanceof Array ? [] : {};
    let newObj = Array.isArray(obj) ? [] : {};
    // 对每一个属性进行判断
    for (let key in obj) {
        // 只对自身的属性进行赋值
        if (obj.hasOwnProperty(key)) {
            // 如果该属性值也是对象，递归调用深拷贝方法
            newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

let obj = { x: 1, y: 2, z: { num: 20 } };
let newObj = deepCopy(obj)

newObj.z.num = 100
console.log(obj)  // { x: 1, y: 2, z: { num: 20 } }
console.log(newObj) // { x: 1, y: 2, z: { num: 100 } }

也可以使用快捷的深拷贝方式，完成对象复制，但是这种方式要求所要复制的对象的属性值非函数。

let obj = { x: 1, y: 2, z: { num: 20 } };
let newObj = JSON.parse(JSON.stringify(obj))
newObj.z.num = 100
console.log(obj)  // { x: 1, y: 2, z: { num: 20 } }
console.log(newObj) // { x: 1, y: 2, z: { num: 100 } }