JS——JS高阶部分相关知识点汇总-CSDN博客

本文链接：https://blog.csdn.net/Bonsoir777/article/details/126622284

文章目录

前言
一、闭包
- 1..什么是闭包
- 2.产生闭包的条件 :
- 3.闭包的用途
- 4.闭包的作用
- 5.闭包的生命周期
- 6.代码示例
二、IIFE(立即执行函数)
三、递归
- 1.什么是递归
- 2.示例代码
四、深拷贝与浅拷贝
- 1.浅拷贝：
- 2.深拷贝
五、正则表达式
- 1.什么是正则表达式
- 2.正则表达式的特点
- 3.正则表达式的创建
- 4.测试正则表达式
- 5.元字符
总结

一、闭包

1.什么是闭包

闭包是嵌套的内部函数，当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包。

2.产生闭包的条件 :

函数嵌套

内部函数引用了外部函数的数据（变量/函数）

执行函数定义（不用调用内部函数）

3.闭包的用途

将函数作为另一个函数的返回值（将内部函数的返回值通过return暴露给外部函数，这样外部函数就可以访问到内部函数的值）

将函数作为实参传递给另一个函数调用

4.闭包的作用

使用函数内部的变量在函数执行完后，仍然存活在内存中（延长于局部变量的生命周期）

让函数外部可以操作（读写）到函数内部的数据（变量/函数）

5.闭包的生命周期

产生：在嵌套内部函数定义执行完时就产生了（不是在调用）

死亡：在嵌套的内部函数成为垃圾对象时

6.代码示例

如下示例，利用闭包的方法求出每个li对应的索引值。

 var lis = document.querySelector('.nav').querySelectorAll('li');
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为闭包因为立即执行函数里面的任何一个函数都可以使用当前 i 这个变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i);
        }

二、IIFE(立即执行函数)

IIFE(立即执行函数)/(匿名函数自调用) —— 如下图所示，在上文求解索引值的案例中，就运用到了立即执行函数。

隐藏实现

不会污染外部（全局）命名空间

用它来编码 js 模块

三、递归

1.什么是递归

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数

注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

2.示例代码

例如求解1-5 的和，在前文的学习中我们知道可通过循环解决这个问题，在这里同样也可以利用递归的思路解决该问题。

  <script>
    //    使用递归实现 5 的和
    function sum(num){
        if(num==1){
            return 1
        }
        return num +sum(num-1);
    }

    // 调用函数 sum( )
    console.log(sum(2));
    </script>

四、深拷贝与浅拷贝

1.浅拷贝：

定义：浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用(也就是赋值内存地址，被赋值对象与备份对象会指向同意内存地址，所以改变其中一个数据时另一个会相应改变.

实现浅拷贝代码示例：

 // 对象的声明
        var info = { name: 'Jack', age: 16, say:{Language:'English'}, arr: [1, 2, 45] };
        var info1 = {}; 


//  浅拷贝
        for(var k in info){
            info1[k] = info[k];
        }
        info.say.Lauguage = 'Chinese';
        console.log(info1,info);

运行结果

2.深拷贝：

定义：深拷贝拷贝多层, 每一级别的数据都会拷贝，在拷贝时会新开辟出一块内存地址，所以两数据不会互相影响。

实现深拷贝代码示例：

 // 对象的声明
        var info = { name: 'Jack', age: 16, say:{Language:'English'}, arr: [1, 2, 45] };
        var info1 = {}; 


 // 实现深拷贝的函数
        function deepcopy(New, older) {
            for (var k in older) {
                var item = older[k];
                if (item instanceof Array) {
                   New[k] = [];
                    deepcopy(New[k], item);
                } else if (item instanceof Object) {
                    New[k] = {};
                    deepcopy(New[k], item);
                } else {
                    New[k] = item;
                }
            }
        }

    
        deepcopy(info1, info);
       info.say.Language = 'Chinese';
       info.name = 'Lucy';
        console.log(info, info1);

运行结果

如图所示，当修改其中一对象相关属性值时，另一对象不会被影响，这就是深拷贝。

五、正则表达式

1.什么是正则表达式

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

2.正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强。

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

3. 理解起来比较难懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$3.

3.正则表达式的创建

3.1 对象方式创建

语法—— var 变量 = new RegExp("正则表达式"，"匹配模式");

i 忽略大小写 g 全局匹配模式

var regxp= new RegExp(/123/);

console.log(regexp);

3.2 字面量方式创建

语法—— var 变量 = /正则表达式/匹配模式

var regxp= /123/;

4.测试正则表达式

test( ) 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

var regexp = new RegExp(/123/);

console.log(regexp.test("123"));//true

console.log(regexp.test("234"));//false

5.元字符

元字符：在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

5.1 元字符的分类

^：表示匹配行首的文本（以谁开始）

$：表示匹配行尾的文本（以谁结束），注意：如果 ^和 $ 在一起，表示必须是精确匹配。

reg = /a|b|c|d/; | 表示或的关系 [ ]l里的内容也是或的关系 [ab] ==a|b [a-z] 任意的小写字母 [A-Z] 任意大写字母 [A-z] 任意字母 [0-9] 任意数字

[^] 表示除了什么例如 —— reg = [^0-9]; // 表示除了0-9 的数字

5.2 正则表达式的量词

量词：通过量词可以设置一个内容出现的次数

——量词只对它前边的一个内容起作用，多个内容可用（）括起来
—— {n} 正好出现 n 次
—— {m,n } 出现 m 到 n 次
—— {m ，} 出现m次以上
—— + 出现至少一次，相当于 {1，}
—— * 0 个或者多个，相当于 {0，}
—— ？ 0个或一个，相当于 {0，1}
—— ^ 表示以某字符开头
—— $ 表示以某字符结尾