javascript中赋值、浅拷贝、深拷贝的区别及实例详解

时间:2023-06-20 15:39:11 类型:JS/JQUERY
字号:    

一. 赋值: 

            当把一个对象a赋值给另外一个对象b时,赋的值是对象a在栈中的地址,而不是堆中的数据。

let person ={
                name:'小米',
                age:16,
                score:{
                    english:60,
                    math:100,
                },
            }
         let person1 = person
             person1.name='大米'
             person1.score.english = 99
            console.log('person',person)
            console.log('person1',person1)

1.png

由此可知:对象person1和对象person指向同一地址,无论哪个对象发生改变,另外一个对象都会联动变化.


浅拷贝:

            浅拷贝它会创建一个新对象,不会指向同一个地址,只会赋值制对象的非对象属性
(如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址)

 let person ={
                name:'小米',
                age:16,
                score:{
                    english:60,
                    math:100,
                },
            }
        let  p2 = {}
             Object.assign(p2,person)
             p2.name = "小小小米"
             p2.score.math = 88
             console.log('person',person);
             console.log('p2',p2)

2.png

由此可知:


p2 对象改变 name的值和 score 对象,person 对象只有score对象的值发生改变,name未受影响。

因为,name是基本类型,p2改变自身值,person 不会改变;而score是一个对象,为引用类型,p2拷贝的是该对象的地址,与person指向同一个地址,所以p2改变score对象的值时,person也发生变化。


深拷贝:

          深拷贝会另外拷贝一份一个一模一样的对象,但是不同的是会从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不再共享内存,修改赋值后的对象不会改到原对象。

         递归方法实现深度克隆

/**
 * 深拷贝
 * @param {Object} obj 要拷贝对象
 */function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // 不是对象,或者是null
        return obj    }
    //初始化返回结果
    let result    if (obj instanceof Array) {
        result =[]
    }else{
        result = {}
    }
    for (const key in obj) {
        //保证key不是原型的属性
        if (obj.hasOwnProperty(key)) { 
            //递归调用!!
            result[key] = deepClone(obj[key])
        }
    }
    //返回结果
    return result}


<