JS递归
浅拷贝
如果我们要复制对象的所有属性都不是引用类型时，就可以使用浅拷贝，实现方式就是遍历并复制，最后返回新的对象。
<script>
//对象的拷贝
var obj1 = {
name:'zs',
age:20,
sex:'男',
dog:{
name:'大黄',
color:'黄色'
}
}
var obj2 = {};
// for (var key in obj1) {
// obj2[key] = obj1[key];
// }
// console.dir(obj2);
//封装成一个函数 把o1的成员复制给o2
//浅拷贝
function copy(o1,o2) {
for (var key in o1) {
o2[key] = o1[key];
}
}
copy(obj1,obj2);
obj1.name='abcd';
obj1.dog.name='小黄';
console.dir(obj2);
</script>
深拷贝
深度拷贝就是把父对象拷贝到子对象上，而且两者的内存和以后的操作都互不影响的拷贝！
<script>
var obj1 = {
name:'ls',
age:20,
sex:'男',
dog:{
name:'大黄',
color:'黄色'
},
friends:[
'zs',
'张三'
]
}
var obj2 = {};
function deepCopy(o1,o2) {
for (var key in obj1) {
var item = o1[key];
if (item instanceof Object) {
// var o = {};
o2[key] = {}; // 这里是o2[key] 不是o2
deepCopy(item,o2[key]);
} else if (item instanceof Array) {
o2[key] = [];
deepCopy(item,o2[key]);
} else {
o2[key] = o1[key];
}
}
}
deepCopy(obj1,obj2);
//修改obj1中的值 不会影响obj2中的值
obj1.name = 'aaa';
obj1.dog.name = '小黄';
console.dir(obj2);
</script>
遍历DOM树
要对遍历到的某个元素进行事件处理需要为loadTree函数加上一个额外的参数callback，使用callback对找到的元素进行事件处理
<body>
<div>
<h1>遍历DOM树</h1>
<p style="color: green">Tip:可以在遍历的回调函数中任意定制需求</p>
<div>
<ul id="list">
<li>广州</li>
<li>杭州</li>
<li>上海</li>
</ul>
<p>哈哈哈</p>
</div>
</div>
<script>
function loadTree(parent,callback) {
for (var i=0; i<parent.children.length;i++) {
var child = parent.children[i];
console.log(child);
//处理找到的子元素
if (callback) {
callback(child);
}
//递归调用
loadTree(child);
}
}
// var parent = document.body;
// loadTree(parent);
//遍历ul中所有的子元素
// loadTree(document.getElementById('list'));
var ul = document.getElementById('list');
loadTree(ul,function (element) {
//对找到的li注册点击事件
element.onclick = function () {
console.log(this.innerText);
}
})
</script>
</body>
- 点赞
- 收藏
- 关注作者
评论（0）