web前端高级JavaScript - 数组和对象的浅克隆与深克隆

╰半夏微凉° 2022-12-22 02:29 144阅读 0赞

### 浅克隆 ###

> 浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二级或以上层级进行修改，那么克隆前对象的二级或以上层级也会跟着被修改。  
> 例如：现有一个对象obj1对应堆内存地址0x000，obj1对象中还有个子对象obj1\_1对应堆内存0x001，现在想对obj1对象进行浅克隆，则会创建一个新的对象obj2对应新的堆内存地址0x002，对于对象obj1中的基本类型数据则会直接拷贝到obj2中，而obj1中的引用类型也就是子对象obj1\_1则会直接被新对象obj2引用，而不是创建新的堆内存。后面如果通过操作obj2对obj2中的子对象obj1\_1进行更改，那么obj1中的obj1\_1也会随着变化，因为它们用的是同一个堆内存。来看下面的图会更直观一些  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]

### 实现浅克隆的几种方案 ###

*  对象的浅克隆方案一：基于循环实现

*  对象的浅克隆方案二： 展开运算符

*  对象的浅克隆方案三：基于Object.assign()函数

> **Object.assign(\[obj1\], …\[obj2\])**：该方法接收多个参数，执行后会将obj2中的键值对合并到obj1中，并将obj1的堆内存地址返回。注意：这里返回的不是新的对象，而是把第一个参数作为返回值返回。  
> 所以我们可以利用这个特点进行对象的浅克隆

*  数组浅克隆方案一：基于forEach或map

let arr = [12,3,[4,50]];
    let arr2 = [];
    arr.forEach((item, index) => { 
    	arr2[index] = item;
    });
    
    arr2 = arr.map(item => item);

数组浅克隆方案二：基于展开运算符或Object.asing()，与对象相同

let arr = [12,3,[4,50]];
    let arr2 = [
    	...arr
    ];
    
    arr2 = Object.assign([], arr);

数据浅克隆方案三：基于数组的slice方法，不传参数默认从数组第一项开始截取到数组的最后一项

let arr = [12,3,[4,50]];
    let arr2 = arr.slice();

*  数组和对象的浅克隆 - 通用方案：自己撸代码

//定义一个用于检测数据类型的通用方法
    function toType(value){ 
    let obj = { };
    ['Number','String','Boolean','Null','Undefined','Symbol','BigInt','Function','GeneratorFunction','Date','RegExp','Object','Error'].forEach(item => { 
    	obj["[object "+item+"]"] = item.toLowerCase()
    });
     return obj[Object.prototype.toString.call(value)];
    }
    //定义一个获取对象/数组所有私有属性（包括Symbol类型）的方法
    function getOwnProperties(obj){ 
    //数据类型检测
    if(obj == null) return [];
    //获取所有私有属性包括Symbol类型
    let keys = [
    	...Object.keys(obj),
    	...Object.getOwnPropertySymbols(obj)
    ]
    return keys;
    }
    
    function shallowClone(obj){ 
    	//如果是基本数据类型值，则传啥就返回啥
    	let type = toType(obj);
    	if(/^(number|string|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj;
    	if(type === 'function') { 
    		//返回一个不同函数，但最后执行效果跟原始函数一致
    		return function proxy(){ 
    			obj();
    		}
    	}
    	//if(type === 'regexp') return new RegExp(obj);
    	//if(type === 'date') return new Date(obj);
    	if(/^(regexp|date)$/.test(type)) return new obj.constructor(obj);
    	if(type === 'error') return new Error(obj.message);
    	
    	let keys = getOwnProperties(obj);
    	let clone = { };
    	Array.isArray(obj) ? clone = [] : null;
    	keys.forEach(item => { 
    		clone[item] = obj[item];
    	});
    	return clone;
    }

### 数组和对象的深克隆 ###

> 相信经过前面对数组和对象的浅克隆的了解，深克隆也就不难理解了；  
> 前面说浅克隆是只克隆数组或对象的第一层级，二级及以上层级是直接引用；那么深克隆则是克隆数组或对象的每个层级，不管一个对象或数组有多少层级，那么当我们进行深克隆时每一个层级都会开辟一块新的堆内存地址。对于克隆后对象/数组的任何层级做任何修改都不会影响到克隆前的对象/数组，因为它们都是独立的不同的堆内存。如下图所示  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]

*  数组和对象的深克隆方案一：基于JSON.stringfiy、JSON.parse实现深克隆

> **原理**：先将数组或对象基于JSON.stringify转换为字符串，然后再基于JSON.parse把字符串转换为对象，此时对象中对应每个层级都会开辟一块全新的堆内存来存储  
> **缺点**：因为JSON.stringify变为字符串，很多类型是不支持的
> 
>  *  正则/Math数学函数会被处理为空对象
>  *  具备函数/Symbol/undefined属性值的属性会被直接删除掉
>  *  BigInt无法处理，会报错
>  *  日期对象转换后变为字符串

let obj1 = { 
    	python: "python",
    	java: "java"
    	fontend: { 
    		javascript: "javascript",
    		html: "html"
    	}
    }
    let obj2 = JSON.parse(JSON.stringify(obj1));

数组/对象深克隆方案二：自己撸代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4e200d41e6094d6fa0947d5b25ca17d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/3f24a0d0cd0046b4b06e37201b94d0f2.png