JavaScript高级——04

最新推荐文章于 2024-08-13 21:01:07 发布

Galaksen

最新推荐文章于 2024-08-13 21:01:07 发布

阅读量162

点赞数 1

分类专栏：学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41857060/article/details/101515176

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.浅拷贝

2.深拷贝

3.遍历DOM树

4.正则表达式（Regular Expression）

基本数据类型（Undefined，Null，Boolean，Number、String、Symbol【ES6】）
引用数据类型（Object、数组、函数）

深拷贝和浅拷贝只针对Object和数组这两种引用数据类型

1.浅拷贝

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本数据类型，拷贝的就是基本数据类型的值；如果属性是引用类型，拷贝的就是内存地址（指向同一个内存空间），所以如果其中一个对象改变了，就会影响到另一个对象。

分清浅拷贝和赋值的区别：

把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

    //原对象
    var obj = {
        //第一层
        a:1,
        arr:['a','b'],
        say:function(){
            console.log('hello');
        },
        obj2:{
            //第二层
            a:2,
            arr:['c','d'],
            obj3:{
                //第三层
                say:function(){
                    console.log('world');
                }
            }
        }
    };

    //新对象
    var newObj={};

    //把a对象中的所有的内容复制到对象b中
    function extend(a,b) {
        for(var key in a){
            b[key]=a[key];
        }
    }

    extend(obj,newObj);

    //改变新对象的属性和方法(第一层)
    newObj.a='一';
    newObj.arr[1]='B';
    newObj.say=function(){
        console.log('new hello');
    };

    //改变新对象的属性和方法(第二层及更深层)
    newObj.obj2.a='二';
    newObj.obj2.arr[1]='D';
    newObj.obj2.obj3.say=function(){
        console.log('new world');
    };

    //打印新数组
    console.dir(newObj);
    newObj.say();
    newObj.obj2.obj3.say();

    //打印原数组
    console.dir(obj);
    obj.say();
    obj.obj2.obj3.say();

左边为新数组，右边为原数组：

结果：第一层中为基本数据类型的数据，其值没有随着另一个对象的值改变而改变，但第一层中数组的值改变了（数组是引用类型）；而第二层及更深层中，所有的值都一同改变了（对象是引用类型，那么它的所有属性和方法也都会变）。

2.深拷贝

深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的内存存放新对象，且修改其中一个对象不会影响另一个对象。

  //原对象
    var obj = {
        //第一层
        a:1,
        arr:['a','b'],
        say:function(){
            console.log('hello');
        },
        obj2:{
            //第二层
            a:2,
            arr:['c','d'],
            obj3:{
                //第三层
                say:function(){
                    console.log('world');
                }
            }
        }
    };

    //新对象
    var newObj={};

    //通过函数实现,把对象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(obj,newObj);

    //改变新对象的属性和方法(第一层)
    newObj.a='一';
    newObj.arr[1]='B';
    newObj.say=function(){
        console.log('new hello');
    };

    //改变新对象的属性和方法(第二层及更深层)
    newObj.obj2.a='二';
    newObj.obj2.arr[1]='D';
    newObj.obj2.obj3.say=function(){
        console.log('new world');
    };

    //打印新数组
    console.dir(newObj);
    newObj.say();
    newObj.obj2.obj3.say();

    //打印原数组
    console.dir(obj);
    obj.say();
    obj.obj2.obj3.say();

左边为新数组，右边为原数组：（可以看出原数组没有受到任何影响）

3.遍历DOM树

<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>sfdbg</p>
        <h3>
            <span>mnjjlk</span>
        </h3>
    </div>
</div>
<script>
    //获取页面中的根节点--根标签
    var root=document.documentElement;//html
    //函数遍历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];
            //显示每个子节点的名字
            show(child);
            //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
            child.children&&forDOM(child);
        }
    }
    //函数调用,传入根节点
    forDOM(root);
    //显示节点名字
    function show(node) {
        console.log("节点的名字:"+node.nodeName);
    }
</script>

4.正则表达式（Regular Expression）

正则表达式的作用：匹配字符串

正则表达式的组成：是由普通字符（包括大小写的字母和数字）和一些元字符组成的一个式子

元字符：

. 除了\n以外的任意的一个字符

[] 范围；可以把正则表达式中元字符的意义去掉：[.] 就是一个.

[0-9]：0到9之间任意的一个数字

[1-7]：1到7之间任意的一个数字

[a-z]：所有小写字母中任意的一个

[A-Z]：所有大写字母中任意的一个

[a-zA-Z]：所有字母（大小写）中任意的一个

[0-9a-zA-Z]：所有的数字或者字母（大小写）中的一个

| 或者

[0-9]|[a-z]：要么是一个数字，要么是一个小写的字母

() 分组，提升优先级

([0-9])([1-5])([a-z]) ：三组, 从最左边开始计算

限定符（也是元字符）：限定前面的表达式出现的次数

* 前面的表达式出现了0次-多次

[a-z][0-9]*：小写字母中的任意一个，后面是要么是没有数字的，要么是多个数字的，可匹配 "fdsfs3223323"

+ 前面的表达式出现了1次-多次

[a-z][9]+：小写字母中的任意一个，后面最少一个9，或者多个9，可匹配"fesfewww9fefds"

? 前面的表达式出现了0次-1次，最少是0次，最多1次；另一个含义：阻止贪婪模式（趋向于最大长度匹配，非贪婪匹配：匹配到字符就好，最少地匹配）

{} 更加明确前面的表达式出现的次数

{5,10} 表示的是前面的表达式出现了5次到10次

{4} 前面的表达式出现了4次

{0,} 和*一样

{1,} 和+一样

{0,1} 和?一样

^ 在[]外面时表示：以什么开始；在[]里面时表示：取非(取反)

^[0-9] 以数字开头

[^0-9] 取反，非数字

$ 以什么结束

[0-9][a-z]$ 必须以小写字母结束

^[0-9][a-z]$ 相当于是严格模式只能匹配"4f"这样的一个数字开头，一个小写字母结尾的字符

\d 匹配一个数字，等价于[0-9]

\D 匹配一个非数字字符，等价于[^0-9]

\s 匹配一个空白字符，包括空格、制表符、换页符和换行符

\S 匹配一个非空白字符

\w 匹配一个非特殊字符（字母、数字或者下划线即单字字符），等价于 [A-Za-z0-9_]

\W 匹配一个特殊字符（非单字字符），等价于 [^A-Za-z0-9_]

\b 单词的边界

4.1 正则表达式练习

1.身份证的正则表达式

15位或者18位

([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX]) 或者 ([1-9][0-9]{14})([0-9]{2}[0-9xX])?

2.座机号码的正则表达式

010-19876754 0431-87123490

[0-9]{3,4}[-][0-9]{8}或\d{3,4}[-]\d{8}

3.qq号码的正则表达式

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

4.邮箱的正则表达式

sd2113_3.-fd@itcast.com.cn

[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}