10 (H5*) js第10天 正则表达式、深浅拷贝

目录：

1：浅拷贝

2:  深拷贝

3：遍历DOM树

4：正则表达式

5：正则表达式的创建方式

6：字符串中的正则表达式

7：真数组和伪数组

8:  escape()和unescapt() 编码和 解码，汉字和Unicode

1：浅拷贝

<script>

        //浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用

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

        obj2.sex = "女";
        console.dir(obj2);//开始的时候这个对象是空对象
        console.dir(obj1);//有属性

        console.log(obj1 == obj2);

    </script>

浅拷贝：示意图

2：深拷贝

// 只要不是基本类型，比如数组和对象的话，就需要重新开始开辟一块内存，来存储。之后把地址给这个属性。

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

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

    </script>

深拷贝示意图

3：遍历DOM树

<script>

  //获取页面中的根节点--根标签
  var root=document.documentElement;//html
  //函数遍历DOM树
  //根据根节点,调用fn的函数,显示的是根节点的名字
  function forDOM(root1) {
    //调用f1,显示的是节点的名字
   // f1(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);
  }

  //节点:nodeName,nodeType,nodeValue

//  第一个函数:给我根节点,我会找到所有的子节点:forDOM(根节点)
//  获取这个根节点的子节点
//  var children=根节点的.children
//  调用第二个函数
//
//  第二个函数:给我所有的子节点,我把每个子节点的名字显示出来(children)
//  for(var i=0;i<children.length;i++){
//    每个子节点
//    var child=children[i];
//    f1(child);给我节点,我显示该节点的名字
//    child是子节点,但是如果child里面还有子节点,此时child就是爹了
//    child.children&&第一个函数(child)
//
//  }

</script>

4：正则表达式

<script>

    /*
    *
    * 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
    * "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
    *
    * 正则表达式的作用:匹配字符串的
    *
    * 在大多数编程语言中都可以使用
    *
    * 正则表达式的组成:是由元字符或者是限定符组成的一个式子
    *
    *
    * 元字符:
    *
    * 1:  .  表示的是:除了\n以外的任意的一个字符   "fdsfs238"
    *
    *
    * 2:  [] 表示的是:范围,  [0-9] 表示的是0到9之间的任意的一个数字,  "789" [0-9]
    * [1-7] 表示的是1到7之间的任意的一个数字
    * [a-z] 表示的是:所有的小写的字母中的任意的一个
    * [A-Z] 表示的是:所有的大写的字母中的任意的一个
    * [a-zA-Z] 表示的是:所有的字母的任意的一个
    * [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
    * [] 另一个函数: 把正则表达式中元字符的意义干掉    [.] 就是一个.
    *
    *
    * 3:  | 或者     [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
    *
    *
    * 4:  () 分组 提升优先级   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
    * (()(()))
    *
    *
    * 都是元字符,但是也可以叫限定符,下面的这些
    *   5:   *   表示的是:前面的表达式出现了0次到多次
    *    [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *
    *   6:  +  表示的是:前面的表达式出现了1次到多次
    *    [a-z][9]+  小写字母一个后面最少一个9,或者多个9
    *    "fesfewww9fefds"
    *
    *
    *    7:  ?  表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
    *    [4][a-z]? "1231234ij"
    *
    *
    *   限定符:限定前面的表达式出现的次数
    *
    *
    *   8:   {} 更加的明确前面的表达式出现的次数
    *  {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
    *  {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
    *  {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
    *  {5,10} 表示的是前面的表达式出现了5次到10次
    *  {4} 前面的表达式出现了4次
    *  {,10} 错误的========不能这么写
    *
    *
    *  9:   ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
    *  ^[a-z] 以小写字母开始
    *  [^0-9] 取反,非数字
    *  [^a-z] 非小写字母
    *  [^0-9a-zA-Z_]   特殊字符
    *
    *
    *  10:   $ 表示的是以什么结束   [0-9][a-z]$  必须以小写字母结束
    *  ^[0-9][a-z] 相当于是严格模式   "3f2432e"  "4f"
    *
    *
    *  11：  \d 数字中的任意一个,   digit 数字
    *        \D 非数字中的一个
    *  12：  \s 空白符中的一个     Space  空白符号
    *        \S 非空白符
    *   13：  \w 非特殊符号   Word,单词.\w匹配包括下划线的任何单词字符.等价于'[A-Za-z0-9_]'.
    *         \W 特殊符号
    *   \b 单词的边界
    *   "what are you no sha lei"
    *
    *
    *    . 除了\n以外的任意一个单个字符
    *    []  范围
    *    () 分组,提升优先级
    *    | 或者
    *    * 0-多次
    *    + 1-多次
    *    ? 0-1次
    *    {0,} 和*一样
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 数字中的一个
    *    \D 非数字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符号
    *     \w 非特殊符号 _
    *     ^ 取反,以什么开始
    *     $ 以什么结束
    *
    *     \b 单词边界

    * */
  </script>

5：正则表达式的创建方式

<script>

   //创建正则表达式对象

    //两种:
    /*
    *
    * 1.通过构造函数创建对象
    *
    *
    * 2.字面量的方式创建对象
    *
    *
    * 正则表达式的作用:匹配字符串的
    *
    * */
//   //对象创建完毕---
//    var reg=new RegExp(/\d{5}/);
//   //字符串
//    var str="我的电话是10086";
//   //调用方法验证字符串是否匹配
//    var flag=reg.test(str);
//    console.log(flag);

//   //对象创建完毕---
//   var reg=new RegExp(/\d{5}/);
//   //调用方法验证字符串是否匹配
//   var flag=reg.test("我的电话是10086");
//   console.log(flag);

    //字面量的方式创建正则表达式对象
    var reg=/\d{1,5}/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);

  </script>

6：字符创中的正则表达式

<script>
    //正则表达式中:g 表示的是全局模式匹配
    //正则表达式中:i 表示的是忽略大小写
    // match是匹配的意思
    // replace是替换的意思

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

    //
    //    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);
    //    //正则表达式对象.$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();
    //    console.log("==="+str+"===");

    //    var str = "  哦买噶的    ,太幸福了  ";
    //    str = str.replace(/\s+/g, "");
    //    console.log("===" + str + "===");

    //所有的h都替换成S
    //    var str="HhpphH";//SSppSS
    //    str=str.replace(/[h]/gi,"S");
    //    console.log(str);

    //    var reg = new RegExp(/[h]/gi);
    //    var str = "HhpphH";//SSppSS
    //    str = str.replace(reg, "S");
    //    console.log(str);

//
//    var str = "中国移动:10086,中国联通:10010,中国电信:10000";
//    //把里面所有的数字全部显示出来
//    //var array = str.match(/\d{5}/g);
//    //正则表达式对象.exec方法传入字符串
//    var reg=/\d{5}/g;
//    //var array=reg.exec(str);
////    console.log(array);
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
//
//    var result=reg.exec(str);
//    while(result!=null){
//      console.log(result);
//      result=reg.exec(str);
//    }

//    var str = "中国移动:10086,中国联通:10010,中国电信:10000";
//    var reg=/\d{5}/g;
//    //通过正则表达式匹配这个字符串
//    var array=reg.exec(str);
//    console.log(array);
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));//null
//

    var str = "中国移动:10086,中国联通:10010,中国电信:10000";
    var reg=/\d{5}/g;
    //通过正则表达式匹配这个字符串
    var array=reg.exec(str);
    while (array!=null){
      //输出匹配的内容
      console.log(array[0]);
      array=reg.exec(str);
    }

  </script>

7:真数组和伪数组

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

    //    function f1() {
    //      var sum=0;
    //      for(var i=0;i<arguments.length;i++){
    //        sum+=arguments[i];
    //      }
    //      console.log(sum);
    //    }
    //    //arguments得到的是实参的个数及实参的每个值
    //
    //    f1(10,20,30,40);

    //    function f1() {
    //     var sum=0;
    //      arguments.forEach(function () {
    //
    //      });
    //    }
    //    //arguments得到的是实参的个数及实参的每个值
    //
    //    f1(10,20,30,40);

    //    var arr=[10,20,30];
    //    arr.forEach(function () {
    //
    //    });

        var arr=[10,20];
        arr.forEach()
        console.dir(arr);

        // 数组实例对象的__proto__----->Array的prototype

        //数组
    //    var arr=[10,20,30];
    //    arr[3]=100;
    //    console.log(arr.length);
    //    //对象---假的数组
    //    var obj={
    //      0:10,
    //      1:20,
    //      2:30,
    //      length:3
    //    };
    //
    //    console.log(obj[0]);
    //    console.log(obj[1]);
    //    console.log(obj[2]);
    //    console.log(obj.length);
    //    obj[3]=1000;
    //    console.log(obj[3]);
    //    console.log(obj.length);

        //遍历数组
    //    for(var i=0;i<arr.length;i++){
    //      console.log(arr[i]);
    //    }
    //
    //    for(var i=0;i<obj.length;i++){
    //      console.log(obj[i]);
    //    }
    </script>