JavaScript学习记录十八

     浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,

就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用

    var obj1={
      age:10,
      sex:"男",
      car:["奔驰","宝马","特斯拉","奥拓"]
    };
    //另一个对象
    var obj2={};
    
    //写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
    //把a对象中的所有的属性复制到对象b中
    function extend(a,b) {
      for(var key in a){
        b[key]=a[key];
      }
    }
    extend(obj1,obj2);

    深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中

       *深拷贝应用的是一种属性比较复杂的情况，代码并不难写，主要是条件的判断和递归的使用

    var obj1={
      age:10,
      sex:"男",
      car:["奔驰","宝马","特斯拉","奥拓"],
      dog:{
        name:"大黄",
        age:5,
        color:"黑白色"
      }
    };

    var obj2={};//空对象
    //通过函数实现,把对象a中的所有的数据深拷贝到对象b中
    function extend(a,b) {
      for(var key in a){
        //先获取a对象中每个属性的值
        var item=a[key];
        //判断这个属性的值是不是数组
        if(item instanceof Array){
          //如果是数组,那么在b对象中添加一个新的属性,并且这个属性值也是数组
          b[key]=[];
          //调用这个方法，把a对象中这个数组的属性值一个一个的复制到b对象的这个数组属性中
          extend(item,b[key]);
        }else if(item instanceof Object){//判断这个值是不是对象类型的
     //如果是对象类型的,那么在b对象中添加一个属性,是一个空对象
          b[key]={};
          //再次调用这个函数,把a对象中的属性对象的值一个一个的复制到b对象的这个属性对象中
          extend(item,b[key]);
        }else{
          //如果值是普通的数据,直接复制到b对象的这个属性中
          b[key]=item;
        }
      }
    }

    extend(obj1,obj2);
    console.dir(obj1);
    console.dir(obj2);

便利DOM树

<script>
    var root=document.documentElement;
    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.children && forDOM(child);
        }
    }
    function f1(node){
        console.log('节点的名字：'+node.nodeName);
    }
    forDOM(root);

</script>

正则表达式

    * 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
    * "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
    *
    * 正则表达式的作用:匹配字符串的
    *
    * 在大多数编程语言中都可以使用
    *
    * 正则表达式的组成:是由元字符或者是限定符组成的一个式子

    *
    * 元字符:
    *
    * .  表示的是:除了\n以外的任意的一个字符   "fdsfs238"
    *
    * [] 表示的是:范围,  [0-9] 表示的是0到9之间的任意的一个数字,  "789" [0-9]
    * [1-7] 表示的是1到7之间的任意的一个数字
    * [a-z] 表示的是:所有的小写的字母中的任意的一个
    * [A-Z] 表示的是:所有的大写的字母中的任意的一个
    * [a-zA-Z] 表示的是:所有的字母的任意的一个
    * [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
    * [] 另一个函数: 把正则表达式中元字符的意义干掉    [.] 就是一个.
    * | 或者     [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
    * () 分组 提升优先级   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
    * (()(()))

    *
    * 限定符:
    *

    *    *   表示的是:前面的表达式出现了0次到多次
    *    [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *    +  表示的是:前面的表达式出现了1次到多次
    *    [a-z][9]+  小写字母一个后面最少一个9,或者多个9
    *    "fesfewww9fefds"
    *
    *    ?  表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
    *    [4][a-z]? "1231234ij"

    *  限定符:限定前面的表达式出现的次数
    *  {} 更加的明确前面的表达式出现的次数
    *  {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
    *  {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
    *  {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
    *  {5,10} 表示的是前面的表达式出现了5次到10次
    *  {4} 前面的表达式出现了4次
    *  {,10} 错误的========不能这么写
    *  ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
    *  ^[a-z] 以小写字母开始
    *  [^0-9] 取反,非数字
    *  [^a-z] 非小写字母
    *  [^0-9a-zA-Z_]
    *  $ 表示的是以什么结束   [0-9][a-z]$  必须以小写字母结束
    *  ^[0-9][a-z] 相当于是严格模式   "3f2432e"  "4f"
    *   \d 数字中的任意一个,
    *   \D 非数字中的一个
    *   \s 空白符中的一个
    *   \S 非空白符
    *   \w 非特殊符号
    *   \W 特殊符号
    *   \b 单词的边界
    *   "what are you no sha lei"

常用

    *    . 除了\n以外的任意一个单个字符
    *    []  范围
    *    () 分组,提升优先级
    *    | 或者
    *    * 0-多次
    *    + 1-多次
    *    ? 0-1次
    *    {0,} 和*一样
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 数字中的一个
    *    \D 非数字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符号
    *     \w 非特殊符号 _
    *     ^ 取反,以什么开始
    *     $ 以什么结束
    *     \b 单词边界

案例：省份证的正则表达式

    *省份证通常有是15位，或者18位

    ①  ( [1-9] [0-9] {14}) | ( [1-9] [0-9]{16} [0-9xX])

    ②  ( [1-9] [0-9] {14}) ( [0-9]{2} [0-9xX])

    *座机号： 010-19876754   0431-87123490

     ① [0-9] {3,4} [-] [0-9] {8}

     ② \d {3,4} [-] \d {8}

     *QQ号码：

      ① [1-9] [0-9] {4,10}

      ② \d {5,11}

     *手机的正则表达式

    * 130 131 132 133 134 135 136 137 138 139
    * 143 147
    * 150 151 152 153 154 155 156 157 158 159
    * 170 171 173 176 177
    * 180 181 182 183 184 185 186 187 188 189

      ① ([1] [358] [0-9] [0-9] {8} ) | ( [1] [4] [37] [0-9] {8}) | ( [1] [5] [0-9]{9}) | ( [1] [7] [01367] [0-9] {8}) | ( [1] [8] [0-9] {9})

      ② \d {11}

      *邮箱的这规则表达式  375445899@qq.com

       ① /^[0-9a-zA-Z_.-]+ [@] [0-9a-zA-Z_.-]+ ([.][a-zA-Z]+){1,2} $/;

创建正则表达式

    * 1.通过构造函数创建对象
    * 2.字面量的方式创建对象

    var reget=new RegExp(/\d{5}/); 判断字符中是否包含五个连续的数字
    var str='我是1008';
    console.log(reget.test(str));

    var reg=/\d{1,5}/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);

识别正则表达式是否匹配

       console.log(/./.test("除了回车换行以为的任意字符"));//true
       console.log(/.*/.test("0个到多个"));//true
       console.log(/.+/.test("1个到多个"));//true
       console.log(/.?/.test("哈哈"));//true
       console.log(/[0-9]/.test("9527"));//true
       console.log(/[a-z]/.test("what"));//true
       console.log(/[A-Z]/.test("Are"));//true
       console.log(/[a-zA-Z]/.test("干啥子"));//false
       console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
       console.log(/b|(ara)/.test("abra"));//true
       console.log(/[a-z]{2,3}/.test("arfsf"));// true
       console.log(/\d/.test("998")); true
       console.log(/\d*/.test("998"));true
       console.log(/\d+/.test("998"));true
       console.log(/\d{0,}/.test("998"));true
       console.log(/\d{2,3}/.test("998"));true
       console.log(/\D/.test("eat"));true
       console.log(/\s/.test("  "));true
       console.log(/\S/.test("嘎嘎 "));true
       console.log(/\w/.test("_"));true
       console.log(/\W/.test("_"));false

案例：密码强度

    <style>
        #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>
</head>

<body>
<div id="dv">
    <label for="pwd">密码</label>
    <input type="text" id="pwd" maxlength="16">
    <div>
        <em>密码强度：</em>
        <div id="strengthLevel" class="strengthLv0"></div>
    </div>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    my$('pwd').onkeyup=function () {
        my$('strengthLevel').className='strengthLv'+(this.value.length>=6?getLvl(this.value):0);
    }
    function getLvl(value) {
        var lvl=0;
        if(/[0-9]/.test(value)){
            lvl++;
        }
        if(/[a-zA-Z]/.test(value)){
            lvl++;
        }
        if(/[^0-9a-zA-Z]/.test(value)){
            lvl++;
        }
        return lvl;
    }
</script>

案例：邮箱验证

请输入你的邮箱：<input type="text" value="" id="email">
<script>
    function my$(id) {
        return document.getElementById(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.backgroundColor='green';
        }else{
            this.style.backgroundColor='red';
        }
    }
</script>

案例：中文输入验证

请输入你的姓名：<input type="text" value="" id="username">
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    my$('username').onblur=function () {
        var reg=/^[\u4e00-\u9fa5]{2,6}$/;
        if(reg.test(this.value)){
            this.style.backgroundColor='green';
        }else{
            this.style.backgroundColor='red';
        }
    }
</script>

案例：表单验证

    <style>
        body{
            background: #ccc;
        }
        label{
            width: 40px;
            display: inline-block;
        }
        .container{
            margin:100px auto;
            width:400px;
            padding: 50px;
            line-height: 40px;
            border:1px solid #999;
            background: #efefef;
        }
        span{
            margin-left: 30px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="container" id="dv">
    <label for="qq">QQ</label>
    <input type="text" id="qq"><span></span><br/>
    <label>手机</label>
    <input type="text" id="phone"><span></span><br/>
    <label>邮箱</label>
    <input type="text" id="email"><span></span><br/>
    <label>座机</label>
    <input type="text" id="telephone"><span></span><br/>
    <label>姓名</label>
    <input type="text" id="fullName"><span></span><br/>
</div>
<script>
    function my$(id){
        return document.getElementById(id);
    }
    checkInput(my$('qq'),/^\d{5,11}$/);
    checkInput(my$('phone'),/^\d{11}$/);
    checkInput(my$('email'),/^[0-9a-zA-Z-._]+[@][0-9a-zA-Z-._]+([.][a-zA-Z]{2,3}){1,2}$/);
    checkInput(my$('telephone'),/^\d{3,4}[-]\d{7,8}$/);
    checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
    function checkInput(input,reg){
        input.onblur=function () {
            if(reg.test(this.value)){
                this.nextElementSibling.innerText='正确了';
                this.nextElementSibling.style.color='green';
            }else{
                this.nextElementSibling.innerText='失败了';
                this.nextElementSibling.style.color='red';
            }
        }
    }
</script>

    正则表达式中:g 表示的是全局模式匹配
    正则表达式中:i 表示的是忽略大小写

       var str="中国移动:10086,中国联通:10010,中国电信:10000";
       把里面所有的数字全部显示出来
       var array=str.match(/\d{5}/g);
       console.log(array);   [10086,10010,10000]

       邮箱信息挖取
       var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
       var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
       console.log(array);

       提取日期中的日
       var str="2017-11-12";
       var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
       console.log(array); ["2017-11-12"]
       正则表达式对象.$3
       console.log(RegExp.$3);

       获得邮箱中的有效信息
       var email="shuaiyangtaishuaile@itcast.com.cn";
       email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
       console.log(RegExp.$1);//用户名
       console.log(RegExp.$2);//126
       console.log(RegExp.$3);//域名

        通过正则实现字符串中字符的替换
        var str="小苏好帅哦,真的是太帅了,帅,就是真帅";
        str=str.replace(/帅/g,"猥琐");
        console.log(str);
        去除空格
        var str="  哦买噶的    ,太幸福了  ";
        str=str.trim();
        正则去除空格
        var str = "  哦买噶的    ,太幸福了  ";
        str = str.replace(/\s+/g, "");
        console.log("===" + str + "===");

        替换字符
        var str="HhpphH";//SSppSS
        str=str.replace(/[h]/gi,"S");
        console.log(str);

       同样可以实现打印所有五位数字的操作，类似java中迭代器，一次可以获得一个
       var str = "中国移动:10086,中国联通:10010,中国电信:10000";
       var reg=/\d{5}/g;
       var result=reg.exec(str);
       while(result!=null){
         console.log(result);
         result=reg.exec(str);
       }

数组和伪数组

    //伪数组和数组的区别
    //真数组的长度是可变的
    //伪数组的长度不可变
    //真数组可以使用数组中的方法
    //伪数组不可以使用数组中的方法

arguments.forEach是无法使用的，因为它是Object类型的伪数组
<script>
       function f() {
           var sum=0;
           for(var i=0;i<arguments.length;i++){
               sum+=arguments[i]
           }
           console.log(sum)  15
           console.log(typeof arguments)  Object
       }
       f(1,2,3,4,5);
</script>