Javascript深浅拷贝

前言

深浅拷贝的概念，什么是深浅拷贝？

浅拷贝:通过赋值的方式进行拷贝，那为什么说这是浅拷贝呢？就是因为赋值的方式只会把对象的表层赋值给一个新的对象，如果里面有属性值为数组或者对象的属性，那么就只会拷贝到该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。

深拷贝:则不会出现上述问题，引用数据类型，地址跟数据都会拷贝出来。

如何实现浅拷贝呢？

在javascript中实现浅拷贝的方式很多，在当前认知下，只掌握到了两种实现方式。

**方式一：**使用for in 循环实现
**方式二：**使用Object.assign()实现，其中传递两个参数，参数一:用于接收结果的对象，参数二待拷贝的对象。

话不多说，直接上代码，浅拷贝

		let obj = {
            id: 1,
            name: 'zs',
            age: 21,
            sex: '男',
            information: {
                address: "广东"
            }
        }
        let o = {};

        for (let res in obj) {
            o[res] = obj[res]
        }
        
        console.log(o);

控制台打印出来的结果

那么对引用数据进行修改时，浅拷贝得到的结果会不会随之改变呢？添加下行代码，修改原对象的引用数据类型得到值。

obj.information.address = "新兴";

		// Object.assign方法实现
		let target = {};
        Object.assign(target, obj);

出现该问题的原理：该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。那么我们要想新旧对象用各自的数据需要怎么实现呢？深拷贝就是解决此类情况的方法，因为，深拷贝引用数据类型，地址跟数据都会拷贝出来。

在后续的学习中发现上上述的拷贝方式是只针对于数组和普通对象的，倘若出现函数、正则、日期、ES6新对象呢？，并没有做到数据类型判断的严谨性（2023/3/18 编)，代码改进。

	function clone(target) {
		// 先对target进行类型判断
		if(typeof target !== 'object' || target === null ) return target;
		
		const constructor = target.constructor;
		if(/^(Function|Map|RepExp|Date|Set)$/.test(constructor.name)) return target;
		// 通过上述的类型判断后可得知target对象为一个数组或者普通对象
		const clone = Array.isArray(target) ? [] : {};
		for(let key in target) {
			clone[key] = target[key];
		}
		// 返回克隆结果
		return clone;
	}
	

如何实现深拷贝？

方式一：使用for in 循环实现，与浅拷贝不同的是，此处需要添加遍历对象的数据类型，进行递归调用。
方式二：使用JSON.parse(JSON.stringfy(obj))实现，其中obj是待拷贝的对象，返回深拷贝的结果。
话不多说，直接上代码，深拷贝、

		let obj = {
            id: 1,
            age: 21,
            msg: {
                name: 'zs',
                sex: '男'
            },
            colors: ['red', 'pink']
        }

        let o = {}
        function deepCopy(newObj, oldObj) {
            for (let k in oldObj) {
                let item = oldObj[k];
                // 判断当前遍历变量是否为数组
                if (item instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], item);
                    // 判断当前遍历变量是否对象
                } else if (item instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], item);
                } else {
                    // 简单数据类型
                    newObj[k] = item;
                }
            }
        }

        deepCopy(o, obj)

那么我们修改其中一个对象内的引用数据类型，对应的对象是否会修改成相应的值？通过控制台输出发现，修改不同对象中引用数据类型的值，并不会修改到对方的结果。因此，深拷贝实现。

 		o.msg.sex = '男性';
        o.colors[0] = 'blue'
        
        obj.msg.sex = 'male';
        obj.colors[0] = 'purple'
        console.log(o);
        console.log(obj);

 const newObj = JSON.parse(JSON.stringify(o))

今天的分享就到此结束了。