前端全栈学习第十五天-js高级-第五天

川长思鸟来 2021-09-18 16:06 370阅读 0赞

1：拷贝

2：遍历DOM树

3：正则

1：拷贝
    1.1浅拷贝：将一个对象的使用内容直接复制给另外一个对象
    (function () {
        var obj1 = {
            age: 12,
            name: "小敏",
            sex: "男"
    
        };
        var obj2 = {};
    //首先要有这个对象，只不过他是空的需要赋值
        function v(a, b) {
            for (var key in a) {
                b[key] = a[key];
            }
        }
    
        v(obj1, obj2);//这里注意传值的顺序
        console.dir(obj1);
        console.dir(obj2);  
    }());
    1.2深拷贝：
       (function () {
            var obj1 = {
                name: "小明",
                car: ["奥迪", "奔驰", "大众"],
                eat: {
                    name: "哈哈",
                    age: 12
                }
            }
            var obj2 = {};
    
            function v(a, b) {
                for (var key in a) {
                    var item = a[key]; //先获取a属性中的每个值
    //                判断每个数组的值是什么
                    if (a instanceof  Object) {
                        b[key] = {}//是什么就添加什么属性
                        v(item, b[key]);
                    }
                    else if (a instanceof  Array) {
                        b[key] = [];
                        v(item, b[key]);
                    }
                    else {
                        b[key] = item;
                    }
                }
    
    
            }
    
            v(obj1, obj2);
            console.dir(obj1);
            console.dir(obj2);
        }());
    
    深拷贝和浅拷贝的区别在于，浅拷贝不管你要不要，给给你，深拷贝是你需要什么，给你什么
    2遍历dom树
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>遍历DOM树</title>
    </head>
    
    <body>
    <h1>遍历 DOM 树</h1>
    
    <p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p>
    
    <div>
        <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
        </ul>
        <div>
            <div>
                <span>haha</span>
            </div>
        </div>
    </div>
    <div id="demo_node">
        <ul>
            <li>123</li>
        </ul>
        <p>hello</p>
    
        <h2>world</h2>
    
        <div>
            <p>dsa</p>
    
            <h3>
                <span>dsads</span>
            </h3>
        </div>
    </div>
    
    </body>
    <script>
    
        //获取页面的根节点
        var root = document.documentElement //html
        function forDOM(root1) {
    //        f1(root1);
            //获取根节点中的子节点
            var childern = root1.children;
            forChildren(childern);
        }
        function forChildren(children) {
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                f1(child);
                child.children && forDOM(child);
    
            }
        }
        forDOM(root);
        function f1(node) {
            console.log("节点的名字是：" + node.nodeName);
        }
    
        //function forDOM(root1){
        //    console.log("节点的名字是："+root1.nodeName);
        //}
        //    forDOM(root);
        //    //两个方法比较着看吧
    </script>
    </html>
    3：正则
    3.1元字符
    *     0-多个 [0,]
    +      1-多  [1,]
    ？     0-1  [0,1]
    ()   优先
    ^        开始 ，非
    $        结束
    \d       数字
    \D      非数字
    \w       包括数字，字母，下划线
    \W       非
    \s         任何不可见
    \S         任何可见
    (function () {
        var reg = /\d{1,5}/
        var R = reg.test("我今年5123岁")
        console.log(R);
    }());
    console.log("+++++++++++++++++");
    (function () {
        console.log(/[a-z]{2,3}/.test("asdf"));
    }());
    console.log("+++++++++++++++++");
    (function () {
        var reg = new RegExp(/\d{5}/);
        var str = "我55555";
        console.log(reg.test(str));
    }());
    验证密码强度
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style type="text/css">
        #dv {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 300px;
            top: 100px;
        }
    
        .strengthLv0 {
            height: 6px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
        }
    
        .strengthLv1 {
            background: red;
            height: 6px;
            width: 40px;
            border: 1px solid #ccc;
            padding: 2px;
        }
    
        .strengthLv2 {
            background: orange;
            height: 6px;
            width: 80px;
            border: 1px solid #ccc;
            padding: 2px;
        }
    
        .strengthLv3 {
            background: green;
            height: 6px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
        }
    </style>
    <body>
    <div id="dv">
        <label for="pwd">密码</label>
        <input type="text" id="pwd" maxlength="16">
        <div>
            <em>密码强度：</em>
            <em id="strength"></em>
    
            <div id="strengthLevel" class="strengthLv0"></div>
        </div>
    </div>
    <script src="../../common.js"></script>
    <script>
        //文本框内鼠标抬起，显示密码强度
        my$("pwd").onkeyup = function () {
            //如果密码 长度小于6，没必要判断
    
            my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getPsd(this.value) : 0);
        }
    //        if(this.value.length>=6){
    //        var lvl = getPsd(this.value);
    //            my$("strengthLevel").className ="strengthLv"+lvl;
    //        }
    //        else{
    //            my$("strengthLevel").className ="strengthLv0";
    //
    //        }
    //    }
    
    
    //        if (this.value.length >= 6) {
    //            var lvl = getPsd(this.value);
    //        }
    //        if (lvl == 1) {
    //            my$("strengthLevel").className = "strengthLv1"
    //        }
    //        else if (lvl == 2) {
    //            my$("strengthLevel").className = "strengthLv2"
    //
    //        }
    //        else if (lvl == 3) {
    //            my$("strengthLevel").className = "strengthLv3"
    //
    //        }else{
    //            my$("strengthLevel").className = "strengthLv0"
    //
    //        }
    //
    //    }
            //    给我密码，返回级别
            function getPsd(psd) {
                var lvl = 0; //默认0级
                if (/[0-9]/.test(psd)) {
                    lvl++;
                }
                if (/[a-zA-Z]/.test(psd)) {
                    lvl++;
                }
    
                if (/\W/.test(psd)) {
                    lvl++;
                }
                return lvl; //1-3
            }
    </script>
    </body>
    </html>
    验证邮箱
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    请输入邮箱: <input type="text" value="" id="email"/>
    <script src="../../common.js"></script>
    <script>
        /*
         * 输入的是邮箱，为绿色。不是邮箱，为红色
         * */
        //    获取文本框id，注册鼠标失去焦点事件
        my$("email").onblur = function () {
            var reg = /^[0-9a-zA-Z]+[@][0-9a-zA-Z]+([.][a-zA-Z]+){1,2}$/;
            if (reg.test(this.value)) {
                this.style.color = "green";
            }
            else {
                this.style.color = "red";
            }
        }
    </script>
    </body>
    </html>