javaScript中的深浅拷贝-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/108576633

本文深入探讨了浅拷贝与深拷贝的区别，通过JavaScript实例展示了两种拷贝方式的具体实现。浅拷贝仅复制引用类型的表面层，而深拷贝则递归复制所有层级，包括内部的对象和数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅拷贝/克隆只是对指针进行拷贝，拷贝前后的指针依旧指向同一个内存空间；

深拷贝/克隆不仅会对指针进行拷贝，还会对指针所指向的空间内容进行拷贝。

let obj1 = {a:100,b:[1,2,3,],c:{x:10},d:new RegExp()}
console.log(obj1);  //{ a: 100, b: [ 1, 2, 3 ], c: { x: 10 }, d: /(?:)/ }

😂浅拷贝的实现

方法1：

let obj2 = {...obj1}
console.log(obj1==obj2);   //false
console.log(obj1.c==obj2.c);   //true

方法2：

let obj2 = new obj1.constructor();  //保持继承链
for (var key in obj1) {
    if (obj1.hasOwnProperty(key)){
        obj2[key] = obj1[key]
    } 
}
console.log(obj1==obj2);   //false
console.log(obj1.c==obj2.c);   //true

😂深拷贝的实现

let obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj1==obj2);  //false
console.log(obj1.c==obj2.c);  //false
console.log(obj2.d);  // {}
console.log(obj1.d==obj2.d);  //false

显然，当对象当中有function和date类型的数据以及正则类型存在时，这种方法不适用于进行深拷贝。

const deepClone = function (obj1) {
    if(obj1 == null) return null
    if(typeof(obj1) != 'object') return obj1
    if(obj1 instanceof RegExp){
        return new RegExp()
    }   
    if(obj1 instanceof Date){
        return new Date()
    }   
    let newObj =  new obj1.constructor()
    for(let key in obj1){
        if(obj1.hasOwnProperty(key)){
            newObj[key] = deepClone(obj1[key])
        }
    }
    return newObj;
}
let  obj2 = deepClone(obj1)
console.log(obj1.c==obj2.c);  //false
console.log(obj2.d);  // /(?:)/
console.log(obj1.d==obj2.d);  //false