es6 深浅拷贝、代码实现深拷贝

清疚 2021-07-24 11:20 670阅读 0赞

拷贝数据的方法
    
    	浅拷贝修改会影响原数据，深拷贝不会
    
    	1、=号赋值，基本数据类型修改不会影响原值，对象/数组修改会影响原对象/数组
    	2、Object.assign(); //浅拷贝
    	2、Array.concat(); //数组中的基本数据为深拷贝，复杂数据为浅拷贝
    	3、Array.slice(下标,结束下标);截取子字符串 //浅拷贝
    	4、JSON.parse(JSON.stringify()); //深拷贝,原数据不能有函数，否则为null
    
    深拷贝
    
    	方式一:若有数组或对象，则一直取到其中的基本数据类型，就是深拷贝
    	方式二 :利用json转换
    		function deepClone(arr){
    		    let _obj=JSON.stringify(arr);
    			let objClone=JSON.parse(_obj);
    		    return objClone;
    		}
    		
    	判断数据类型:
    	Object.prototype.toString.call(x);

代码示例:  
利用递归实现每一个对象的遍历:

<script>
    
    
    	function clone(data)
    	{ 
    		//判断数据类型，.slice()获取返回值[object 数据类型]中的数据类型
    		let res=Object.prototype.toString.call(data).slice(8,-1);
    		let end='';
    		if(res==='Object'){ 
    			end={ };
    		}else if(res==='Array'){ 
    			end=[];
    		}else{ 
    			//基本数据类型之间返回
    			return data;
    		}
    
    		//遍历目标数据
    		for(let i in data)
    		{ 
    			let value=data[i];
    			//判断取出的数据中是否还有对象/数组，.slice()获取返回值[object 数据类型]中的数据类型
    			if(Object.prototype.toString.call(value).slice(8,-1)==='Object'||Object.prototype.toString.call(value).slice(8,-1)==='Array')
    			{ 
    				//利用递归继续遍历
    				end[i]=clone(value);
    
    			}else{ 
    				end[i]=value;
    			}
    		}
    
    		return end;
    	}
    
    	let arr=[1,2,3,{ name:'jeff',age:18}];
    
    	let arr2=clone(arr);
    	// console.log(arr2);
    	arr2[3].name='mike';
    	console.log(arr2);
    	console.log(arr);
    
    
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，670人围观）

还没有评论，来说两句吧...

相关阅读

相关深浅拷贝

深拷贝和浅拷贝是指在赋值时或将一个变量的值复制到另一个变量时，拷贝出来的变量和原变量之间的关系。浅拷贝就是在复制的时候，复制的只是变量的引用，而不是变量的实际值。所以如果对

梦里梦外;/ 2024年03月26日 08:29/ 0 赞/ 80 阅读

相关浅拷贝与深拷贝代码(javascript)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

忘是亡心i/ 2022年12月11日 12:25/ 0 赞/ 172 阅读

相关深浅拷贝

![75ea3c96bae2df730d2326f980d4bf0e.png][] 关于深浅拷贝，我们先要明白的第一点是在js中数据类型分为基本数据类型和引用数据类型，基本数

分手后的思念是犯贱/ 2022年12月08日 05:07/ 0 赞/ 232 阅读

相关 ES6--深度克隆（深拷贝和浅拷贝）

拷贝数据：基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据对象/数组拷贝后不会生成新的数据，而是拷贝引用，修改拷贝后的数据会影响原数据

傷城~/ 2022年12月06日 12:38/ 0 赞/ 754 阅读

相关 ES5 ES6 深拷贝

ES5 深拷贝 <!DOCTYPE html> <html lang="en"> <head> <meta charse

我不是女神ヾ/ 2022年11月18日 01:56/ 0 赞/ 192 阅读

相关 c++深浅拷贝&写时拷贝实现

一：浅拷贝&深拷贝 > 浅拷贝：在拷贝构造的时候，直接将原内容的地址交给要拷贝的类，两个类共同指向一片空间。但是存在很大的缺陷：①一旦对s2进行操作，s1的内容也会改变

不念不忘少年蓝@/ 2022年06月12日 02:21/ 0 赞/ 195 阅读

相关深浅拷贝

1. 基础数据类型补充之前已经发过大多数的基本数据类型的知识 join()把传递进去的参数进行迭代. 获取到的每个元素和前面的\进行拼接. 得到的是字符串 spl

阳光穿透心脏的1/2处/ 2022年01月06日 10:57/ 0 赞/ 332 阅读

相关深浅拷贝多级深拷贝方法

就是假设B复制了A，当修改A时，看B是否会发生变化深拷贝:如果B没变，那就是深拷贝，自食其力，修成正果浅拷贝:如果B也跟着变了，说明这是浅拷贝，功力不够一级

Myth丶恋晨/ 2021年11月17日 02:48/ 0 赞/ 326 阅读

相关 ES6: 深拷贝与浅拷贝

前言在Es6中扩展运算符(…)与Object.assign()中复制是浅拷贝，所谓的浅拷贝和深拷贝：浅拷贝是在在拷贝过程中，`遍历时那部分为对象/数组类型指向原

梦里梦外;/ 2021年09月18日 11:54/ 0 赞/ 349 阅读

相关 es6 深浅拷贝、代码实现深拷贝

拷贝数据的方法浅拷贝修改会影响原数据，深拷贝不会 1、=号赋值，基本数据类型修改不会影响原值，对象/数组修改会影响原对象/数组

清疚/ 2021年07月24日 11:20/ 0 赞/ 671 阅读