面试题:理解浅拷贝和深拷贝

本文详细阐述了JavaScript中的浅拷贝和深拷贝概念,包括它们的特性、区别(如浅拷贝只复制引用,深拷贝复制完整对象),以及浅拷贝的实现方法(如Object.assign()和Array.prototype.slice()),并介绍了深拷贝的实现策略(如JSON.parse()和递归方法)。

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

深浅拷贝

基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

浅拷贝

浅拷贝是什么?浅拷贝是创建一个`新对象`,这个对象有原始对象属性的一份精确拷贝。
如果属性是基本类型,拷贝的就是基本类型的值;
如果属性是引用类型,拷贝的就是内存地址

浅拷贝和赋值的区别:赋值不创建`新对象`
当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。

let person ={
    name:"咪咪",
    hobby:['鱼肉','鸡肉','猫粮']
};
//浅拷贝函数
function shallowCopy(source){
    //突出一个`新`字
    let obj = {}
    for(let i in source){
        //hasOwnProperty(propertyName)方法 
        //是用来检测属性是否为对象的自有属性,如果是,返回true,否者false; 
        //参数propertyName指要检测的属性名;
        if(source.hasOwnProperty(i)){
           obj[i]=source[i]
        }
    }
    return obj
};
let shallowPerson=shallowCopy(person);

shallowPerson.name="狗狗";
console.log(shallowPerson);
console.log(person);

shallowPerson.hobby[0]="大棒骨";
console.log(shallowPerson);
console.log(person);


在这里插入图片描述

浅拷贝的实现方式

1.Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

var dog = {
    a:{
        a:'柯基',
        b:10
    }
};
var newDog = Object.assign({},dog);
newDog.a.a='拉布拉多';
console.log(dog.a.a) //拉布拉多

在这里插入图片描述

注意:当object只有一层的时候,使深拷贝

var dog = {
    a:'柯基',
};
var newDog = Object.assign({},dog);
newDog.a='拉布拉多';
console.log(dog.a) //柯基

在这里插入图片描述

2.Array.prototype.concat()

3.Array.prototype.slice()

深拷贝

深拷贝是什么?深拷贝拷贝的是创建一个`新对象`。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,彼此完全独立。
如果属性是基本类型,拷贝的就是基本类型的值;
如果属性是引用类型,拷贝的不是内存地址而是要从堆内存中开辟一个新的区域存放新对象,彼此完全独立。

深拷贝的实现方式

1.JSON.parse(JSON.stringify())

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

2.手写递归方法

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

 function deepCopy(source){
     //判断拷贝的数据类型
     if(source === null ) return source
     if(source instanceof Date ) return new Date()
     if(source instanceof RegExp ) return RegExp(source)
     if(typeof source !== 'object') return source
     let obj= Array.isArray(source) ? [] : {}
     //遍历目标数据
     for(let i in source){
         if(source.hasOwnProperty(i)){
             obj[i] = deepCopy(source[i])
            }
     }
     return obj
 }
let person ={
    name:"咪咪",
    hobby:['鱼肉','鸡肉','猫粮',{name:'憨憨'}],
    date:new Date()
};
let deepPerson=deepCopy(person)
deepPerson.hobby[0]='大棒骨嘿'
deepPerson.hobby[3].name='狗仔'
console.log(person)
console.log(deepPerson)

在这里插入图片描述
3.函数库lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

总结:

和原数据是否指向同一对象第一层数据为基本数据类型原数据中包含子对象
赋值改变会使原数据一同改变改变会使原数据一同改变
浅拷贝改变会使原数据一同改变改变会使原数据一同改变
深拷贝改变会使原数据一同改变改变会使原数据一同改变
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值