05-深拷贝&浅拷贝&正则表达式

学习目标

一、浅拷贝

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

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);
    console.dir(obj2);//开始的时候这个对象是空对象
    console.dir(obj1);//有属性

二、深拷贝

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

  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对象的这个属性对象中
                } else {
                    //如果值是普通的数据,直接复制到b这对象的这个属性中
                    b[key] = item
                }
            }
        }

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

三、递归遍历DOM树

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

    //给我一个节点,显示节点的名字
    function f1(node) {
        console.log("节点名字：" + node.nodeName);
    }

    //函数调用,传入根节点
    forDOM(root);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jk4jylwn-1580718094224)(media/DOM树.jpg)]

四、正则表达式

• 正则表达式：也叫规则表达式,按照一定的规则组成一个表达式,这个表达式的的作用主要是匹配字符串的
• 正则表达式的作用：匹配字符串的
• 在大多数编程语言中都可以使用
• 正则表达式的组成：是由元字符或者是限定字符组成的一个式子
  • 写正则表达式,根据字符串来写正则表达式进行匹配
  • 经验：1、找规律 2、不要追求完美

元字符	表示
.	除了\n以外的任意一个字符
[]	范围
[1-7]	1到7之间的任意一个数字
[a-z]	所有小写的字母中的任意一个
[A-Z]	所有大写字母的任意一个
[a-zA-Z]	所有字母的任意一个
[0-9a-zA-Z]	所有字母和数字的任意一个
[ . ]	把正则表达式元字符的意义干掉,[ . ]此时就是一个.
|	或者 [0-9]|[a-z]表示的要么是一个数字,要么就是一个小写的字母
()	分组,提升优先级
限定符/元字符👇	配合表达式使用👇
*****	前面的表达式出现了0次到多次
+	前面的表达式出现了1次到多次
?	前面的表达式出现了0次到1次,最少0次,最多1次,另一个含义:阻止贪婪模式
	限定符:限定前面表达式出现的次数👇
{}	更加明确的表达式出现的次数
{0,}	前面的表达式出现了0次到多次，和 ***** 一样
{1,}	前面的表达式出现了1次到多次, 和 + 一样
{0,1}	前面的表达式出现了0次到1次, 和 ? 一样
{5,10}	前面的表达式出现了5次到10次
{4}	前面的表达式出现了4次
^	表示以什么开始,或者是取非(取反)
1	以小写字母开头
[^0-9]	取反,非数字
[^0-1a-zA-Z_]	取特殊字符
$	是以什么结束
[0-9][a-z]$	必须以小写字母结束
\d	数字中的任意一个
\D	非数字中的任意一个
\s	空白符中的一个
\S	非空白符的一个
\w	非特殊符号
\W	特殊符号
\b	单词的边界

五、创建正则表达式对象和正则表达式验证

在线测试正则

两种方式

• 1、通过构造函数创建正则表达式对象
  var reg = new RegExp(/\d{5}/);
• 2、字面量创建正则表达式对象
  var reg = /\d{2,5}/;
• 简写方式：/[0-9]/.test()

调用方法验证字符串是否匹配：参数1：字符串 返回值：布尔类型

reg.test();

六、中文正则表达式和翻译中文的编码

• 1、escape(“中文”) 返回值是：中文对应的编码

• 2、unescape(“中文对应的编码”) 返回值是：编码对应中文

• 3、中文的正则表达式：[\u4e00-\u9fa5] 匹配汉字 一 - 龥

七、正则表达式其他方法的使用

• 正则表达式中：g 表示的是全局模式匹配

• 正则表达式中：i 表示的是忽略大小写

• mathch方法() 参数1：正则表达式 返回值：跟正则表达式对应的数组

  字符串.match()

• RegExp.$3：输出的是第三组元素

   var str = "2017-11-12";
   var array=str.match(/([\d]+)[-]([\d]+)[-](\d+)/);
   console.log(RegExp.$3);//输出的是日

• replace()：参数1：正则表达式 参数2：要替换的字符串

八、伪数组和数组的区别

• 伪数组和数组的区别：
  • 真数组的长度是可变
  • 伪数组的长度不可变
  • 真数组可以使用数组中的方法
  • 伪数组不可以使用数组中的方法,forEach
  • arguments得到的是实参个数及实参的每个值

---

1. a-z ↩︎