浅拷贝与深拷贝

最新推荐文章于 2024-09-15 20:31:42 发布

yan_Wylde

最新推荐文章于 2024-09-15 20:31:42 发布

阅读量86

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yan_Wylde/article/details/117933395

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

赋值：

当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的

浅拷贝：

按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

浅拷贝的实现：

对于对象（数组亦可）：Object.assign()

        let obj={
            name:'张三',
            age:16,
            play:['足球','篮球','羽毛球']
        }
        let b=Object.assign({},obj)
        console.log(obj);
        console.log(b);

        let obj={
            name:'张三',
            age:16,
            play:['足球','篮球','羽毛球']
        }
        let b=Object.assign({},obj)

        b.name='李四'
        b.play.push('乒乓球')
        console.log(obj);
        console.log(b);

对于数组：

Array.prototype.concat()
Array.prototype.slice()

深拷贝：

可以理解成在另一个位置创建了一个跟原来对象一摸一样的对象，两者互不影响。

JSON.parse(JSON.stringify())

原理：用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。但是此方法不能处理函数

        let obj=[1,2,{name:'a',fa(){
            console.log('test');
        }}]

        let b=JSON.parse(JSON.stringify(obj))
        b[2].name='b'
        console.log(obj);
        console.log(b);

手写深拷贝方法

        function deepClone(obj){
            let cloneObj;
            // 判断当输入的数据是简单数据类型时，直接复制
            if(obj && typeof obj !== 'object'){
                cloneObj = obj;
            }
            // 当输入的数据是对象或者数组时
            else if(obj && typeof obj === 'object'){
                // 检测输入的数据是数组还是对象
                cloneObj = Array.isArray(obj) ? [] : {};

                // 变量数据对象
                for(let key in obj){
                    // 判断对象是否存在key属性
                    if(obj.hasOwnProperty(key)){
                        if(obj[key] && typeof obj[key] === 'object'){
                            // 若当前元素类型为对象时，递归调用
                            cloneObj[key] = deepClone(obj[key]);
                        }
                        // 若当前元素类型为基本数据类型
                        else{
                            cloneObj[key] = obj[key];
                        }
                    }
                }
            }
            return cloneObj;
        }

测试

        let obj=[1,2,{name:'a',fa(){
            console.log('test');
        }}]

        let b=deepClone(obj)
        b[2].name='b'
        console.log(obj);
        console.log(b);