JS的浅拷贝和深拷贝

仰头45°Cde可乐

已于 2023-12-19 00:10:07 修改

阅读量896

点赞数 29

文章标签： javascript 开发语言 ecmascript

于 2023-12-18 23:59:23 首次发布

本文链接：https://blog.csdn.net/weixin_63383437/article/details/135074156

版权

本文介绍了浅拷贝的概念，其只复制对象一层属性的引用，导致多层嵌套时修改会互相影响。对比之下，深拷贝复制的是完整对象，不受嵌套影响。讲解了常用方法如Object.assign、扩展运算符和lodash的_.cloneDeep以及JSON.stringify/parse实现深拷贝。

摘要由CSDN通过智能技术生成

首先理解什么是浅拷贝和深拷贝：

浅拷贝：

浅拷贝只会复制对象的第一层属性，而不会递归地复制嵌套的对象。
浅拷贝仅复制对象的引用，新对象和原始对象仍然共享相同的引用，因此对新对象的修改可能会影响到原始对象。
浅拷贝方法包括Object.assign()、扩展运算符...等。

代码解释：

const obj = {
            uname:'pink',
            age:18,
            family:{
                baby:'一'
            }
        }
        const o = {...obj};
        o.age = 20;
        console.log(obj.age);//18
        console.log(o.age);//20

这是浅拷贝只会复制对象的第一次层属性因此会看到两个对象的age值不一样

再看对象嵌套多层对象时的输出：

const obj = {
            uname:'pink',
            age:18,
            family:{
                baby:'一'
            }
        }
        
        const o = {};
        Object.assign(o,obj);
        o.age = 20;
        o.family.baby = '二';
        console.log(obj.age);//18
        console.log(o.age);//20
        console.log(obj.family.baby);//二
        console.log(o.family.baby);//二

这里我们可以看到浅拷贝在我们只有一层属性的时候修改不会对源对象造成影响，但是当源对象中有多层对象的时候对于o.family.baby的赋值操作，由于o和obj对象都引用了相同的family对象，所以修改o.family.baby实际上也会影响到obj.family.baby。这是因为浅拷贝只复制对象的引用，所以当引用指向的对象发生改变时，所有引用该对象的变量都会受到影响。当执行Object.assign(o, obj)时，o对象获得了obj对象的属性和值。所以，o.age的赋值操作并不会影响到obj.age，因为这只是修改了o对象的属性值，并没有改变原始的obj对象。

常用方法：

拷贝对象：Object.assgin()/展开运算符{...obj}拷贝对象
拷贝数组：Array.prototype.concat()或者[...arr]

直接赋值获得前拷贝有什么区别？

直接赋值的方法，只要是对象，都会影响，因为是直接拷贝对象栈的地址
浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还是回相互影响

浅拷贝怎么理解？

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址

深拷贝：

深拷贝：拷贝的是对象，不是地址

常用的方法：

通过递归实现深拷贝

lodash/cloneDeep

语法：_.cloneDeep(要被克隆的对象);
const o = _.cloneDeep(obj);

通过JSON.stringify()实现
常用使用JSON方法：

const obj = {
            uanme:'pink',
            age:18,
            hobby:['乒乓球','足球'],
            family:{
                baby:'小pink'
            }
        }

        //把对象转换成JSON字符串
        // console.log(JSON.stringify(obj));
        /*
        {"uanme":"pink","age":18,"hobby":["乒乓球","足球"],"family":{"baby":"小pink"}}
        */
        const o = JSON.parse(JSON.stringify(obj));
        console.log(o);
        o.family.baby = '123';
        console.log(o);
        console.log(obj);

这里的const o = JSON.parse(JSON.stringify(obj));console.log(o);输出的值为：