浅拷贝、深拷贝、遍历DOM树

最新推荐文章于 2022-05-07 22:37:19 发布

qindayong！

最新推荐文章于 2022-05-07 22:37:19 发布

阅读量360

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44036436/article/details/97276633

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述
浅拷贝、深拷贝、遍历DOM树

1、浅拷贝

是指复制, 是指将一个对象中所有数据复制到另一个对象中;就是指讲一个对象地址复制到另一个对象,

他们的指向是相同的, 并且他们的所有数据(属性和方法) 是共同的

// in  关键字   for(var k in 被遍历对象){}

2, 深拷贝====>递归

深拷贝也是指复制是指将对象中的所有数据(属性和方法) 一个一个找打, 并且在另一个对象中开辟相应的空间

然后在一个一个的存储在这个对象中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var obj1={
				name:{ 
					xiaoming:'二狗子',
					guanming:'王二狗'
				},
				age:34,
				car:['保时捷','法拉利','劳斯拉斯',['宝马520','奇瑞QQ'],['自行车','电驴']],
				flower:{
					name:'玫瑰',
					type:'爱情',
					color:{
						color_01:'蓝色',
						color_02:'黑色',
						color_03:'白色'
					}
				}
			}
			obj2={};
			function sheng(a,b){
				for(var k in a){
				var	item=a[k];//将对象循环遍历把值赋给item
					if(item instanceof Array){//判断当前遍历出来的值是不是数组，要是数组就把值给b[k]
						b[k]=item;
						//console.log(b[k]);//["保时捷", "法拉利", "劳斯拉斯", Array(2), Array(2)]
						sheng(item,b[k]);//将数组进行遍历 如果有下级数组继续便利  如果没有结束
					} else if(item instanceof Object){
						b[k]=item;//如果是对象  就将当前对象再次遍历
						sheng(item,b[k]);
					}else{
						b[k]=item;//剩下的数据直接进行赋值
					}
				}
			}
			sheng(obj1,obj2);
			console.log(obj2);
		</script>
	</head>
	<body>
	</body>
</html>

3, 遍历DOM树 ====>递归实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>遍历dom树</title>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			/*分析:先获取根节点
			 * 定义一个函数然后遍历子节点
			 * 定义一个函数获取遍历出的子节点的节点名称
			 * 将获取到的子节点在继续遍历
			 * */
			var root=document.documentElement;//获取根节点
			bianli(root);
			function bianli(ele){//遍历根节点
				for(var i=0;i<ele.children.length;i++){//条件为当前元素的子元素的length
					getnodename(ele.children[i]);//输出遍历的节点的节点名称
					bianli(ele.children[i]);//子元素可能还有子元素     在这里继续调用
				}
			}
			//获取名字的函数
			function getnodename(n){
				console.log(n.nodeName)//将节点名称打印到控制台
			}
		</script>
	</body>
</html>