JS递归

举报
天的黑夜在追 发表于 2022/09/21 09:06:54 2022/09/21
【摘要】 浅拷贝如果我们要复制对象的所有属性都不是引用类型时,就可以使用浅拷贝,实现方式就是遍历并复制,最后返回新的对象。<script>    //对象的拷贝    var obj1 = {        name:'zs',        age:20,        sex:'男',        dog:{            name:'大黄',            color:'黄色'...

浅拷贝

如果我们要复制对象的所有属性都不是引用类型时,就可以使用浅拷贝,实现方式就是遍历并复制,最后返回新的对象。


<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>

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。