JS深拷贝和浅拷贝

1. 浅拷贝

  • for in
  • Object.assign
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj={
				id:1,
				name:"andy",
				msg:{
					age:18
				},
				color:['pink','red']
			}
			
			var o = {};
			//使用for in
			for(var k in obj){
				o[k] = obj[k];
			}
			console.log(o);
			o.msg.age = 20;
			console.log(obj);
			
			//使用ES6新增Object.assign();
			Object.assign(o,obj);
			console.log(o)
		</script>
	</body>
</html>

2. 深拷贝

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj={
				id:1,
				name:"andy",
				msg:{
					age:18
				},
				color:['pink','red']
			}
			var o = {};
			function deepCopy(newobj,oldobj){
				for(var k in oldobj){
					// console.log(k);
					console.log(oldobj[k]);
					//1.获取属性值,oldobj[k]
					var item = oldobj[k];
					//2.判断这个值是否是数组
					if(item instanceof Array){
						newobj[k] = [];
						deepCopy(newobj[k],item)
					}else if (item instanceof Object){
					//3.判断这个值是否是对象
						newobj[k] = {};
						deepCopy(newobj[k],item)
					}else{
						//4.属于简单数据类型
						newobj[k] = item;
					}
				}
			}
			deepCopy(o,obj);
			console.log(o);
			
		</script>
	</body>
</html>
posted @ 2020-08-03 15:25  Daeeman  阅读(116)  评论(0编辑  收藏  举报