js高级学习笔记(三)

• 浅拷贝和深拷贝

1. 浅拷贝：就是把一个对象的内容复制一份给另一个对象，或者说是把一个对象的地址复制一份给另一个对象的地址，他们指向相同，两者直接有相同的属性和方法，都可以使用。
2. 深拷贝：把一个对象所有的属性和方法，一个一个的找到。并在另一个对象上开辟对应的空间，再一个一个的储存到另一个对象。

 //浅拷贝
    // var obj1={
    //     age:20,
    //     name:"小明",
    //     car:["大众","捷达","奥迪"],
    //     dog:{
    //         sex:"男",
    //         color:"green"
    //     }
    // };
    // var obj2={};
    // for (var key in obj1){
    //     obj2[key]=obj1[key];
    // }
    // console.log(obj1);
    // console.log(obj2.car);

    //深拷贝
    var obj1 = {
        age: 20,
        name: "小明",
        car: ["大众", "捷达", "奥迪"],
        dog: {
            sex: "男",
            color: "green"
        }
    };
    var obj2 = {};

    function extend(a, b) {
        for (var key in a) {
            var item = a[key];
            //如果属性值是数组
            if (item instanceof Array) {
                b[key] = [];//在b中添加一个属性，属性值也是数组
                extend(item, b[key]);
                //如果属性值里面是对象
            } else if (item instanceof Object) {
                b[key] = {};//在b中添加一个属性，属性值是对象
                extend(item, b[key]);
            } else {
                b[key] = a[key];
            }
        }
    }
    extend(obj1, obj2);
    console.log(obj1);
    console.log(obj2);

 

• 遍历DOM树

//获取页面的根节点
    //根据根节点,调用fn的函数,显示的是根节点的名字
    var root=document.documentElement;
    //循环遍历DOM树
    function forDom(root1) {
        //获取根节点下的所有子节点
        var children=root1.children;
        //调用遍历所有子节点的函数
        forChildren(children);
    }
    //给我所有的子节点,我把这个子节点中的所有的子节点显示出来
    function forChildren(children) {
        for (var i=0;i<children.length;i++){
            var child=children[i];
            f1(child);//显示节点名字
            //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
            child.children&&forDom(child);//递归
        }

    }
    forDom(root);
    //显示节点名字
    function f1(node) {
        console.log("节点的名字："+node.nodeName);
    }