javaScript高级[二]

最新推荐文章于 2024-08-10 21:02:37 发布

七更醉

最新推荐文章于 2024-08-10 21:02:37 发布

阅读量121

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_38393535/article/details/122866857

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

javaScript高级[二]

函数
正则表达式

函数

函数的定义和调用

函数的定义方式

1 函数声明方式function关键字(命名函数)
2 函数表达式(匿名函数)
3 new Function()

var fn = new Function ('参数1','参数2'...,'函数体')

Function里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是Function的实例(对象)
函数也属于对象

<script>
    //  函数的定义方式

    // 1. 自定义函数(命名函数) 
    function fn() {};
    // 2. 函数表达式 (匿名函数)
    var fun = function() {};
    // 3. 利用 new Function('参数1','参数2', '函数体');
    var f = new Function('a', 'b', 'console.log(a + b)');
    f(1, 2); // 3
    // 4. 所有函数都是 Function 的实例(对象)
    console.dir(f);//里面也有__proto__

    // 5. 函数也属于对象
    console.log(f instanceof Object); //true
</script>

在这里插入图片描述

函数的调用方式

<script>
    //以下列举了6种不同函数的调用方式
    // 1. 普通函数
    function fn() {
        console.log('人生的巅峰');
    }
    // fn();   fn.call()

    // 2. 对象的方法
    var o = {
        sayHi: function() {
            console.log('人生的巅峰');
        }
    }
    o.sayHi();

    // 3. 构造函数
    function Star() {};
    new Star(); //new一下就执行了构造函数

    // 4. 绑定事件函数
    // btn.onclick = function() {};   // 点击了按钮就可以调用这个函数

    // 5. 定时器函数
    // setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次

    // 6. 立即执行函数
    (function() {
        console.log('人生的巅峰');
    })();
    // 立即执行函数是自动调用
</script>

this

函数内this指向

这些this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同
一般指向我们的调用者。

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

<body>
    <button>点击</button>
    <script>
        // 函数的不同调用方式决定了this 的指向不同
        // 1. 普通函数  this指向window
        function fn() {
            console.log('普通函数的this' + this);
        }
        window.fn();
        // 2. 对象的方法  this指向的是对象 o
        var o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();
        // 3. 构造函数 this 指向 ldh 这个实例对象 ;原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {}
        var ldh = new Star();
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };
        // 5. 定时器函数 this 指向的也是window
        window.setTimeout(function() {
            console.log('定时器的this:' + this);
        }, 1000);
        
        // 6. 立即执行函数 this还是指向window
        (function() {
            console.log('立即执行函数的this' + this);
        })();
    </script>
</body>

改变函数内部this指向

JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、call()、apply()三种方法。

call()方法

call()方法调用一个对象。
简单理解为调用函数的方式，但是它可以改变函数的this指向。

fun.call(thisArg, arg1, arg2, ...)

<script>
    // 1. call()
    var o = {
        name: 'andy'
    }
    function fn(a, b) {
        console.log(this);
        console.log(a + b);
    };
    fn.call(o, 1, 2);
    // call 第一个可以调用函数 第二个可以改变函数内的this指向
    // call 的主要作用可以实现继承
    function Father(uname, age, sex) {
        this.uname = uname;
        this.age = age;
        this.sex = sex;
    }

    function Son(uname, age, sex) {
        Father.call(this, uname, age, sex); // 这句话中的this是指向son的
        // 相当于执行了以下代码
        // this.uname = uname;
        // this.age = age;
        // this.sex = sex;
    }
    var son = new Son('刘德华', 18, '男');
    console.log(son);
</script>

apply()方法

apply()方法调用一个函数。简单理解为调用函数的方式，但是它河以改变函数的this指向。

fun.apply(thisArg,[argsArray])

thisArg：在fun函数运行时播定的this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
与this不一样的地方在于第二个参数所传递的参数必须包含在数组中

<script>
    // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
    // 2. apply()  应用 运用的意思
    var o = {
        name: 'andy'
    };
    function fn(arr) {
        console.log(this);
        console.log(arr); // 打印的是字符串 pink
        console.log(arr[0]); // p
        console.log(arr[1]); // i
        console.log(arr.length); // 4

    };
    fn.apply(o, ['pink']); // 参数传的是字符串数组，fn函数里面得到的就是字符串

    // 我的疑问？
    function fn1(arr) {
        console.log(this); // Math {abs: ƒ, acos: ƒ, acosh: ƒ, asin: ƒ, asinh: ƒ, …}
        console.log(arr); // 1
        console.log(arr[0]); // undefined
        console.log(arr[1]); // undefined
        console.log(arr.length); // undefined
        console.log(Math.max(arr)); // 1
    };
    fn1.apply(Math, [1, 2, 3]); //参数传的是数字型数组，fn函数里面得到的就是数字型

    // 1. apply也是调用函数 第二个可以改变函数内部的this指向
    // 2. 但是他的参数必须是数组(包括伪数组)
    // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象(Math.max())求数组最大值 
    // 数组中本身没有求最大值的内置函数

    // 知识点铺垫：Math.max()中的参数必须是数字型的，不可以传数组
    console.log(Math.max([66, 77, 55])); //NAN
    console.log(Math.max(66, 77, 55)); //77

    //通过apply来调用函数Math.max(),调用的时候不改变Math.max()中的this指向，并将参数arr传递给函数Math.max()
    var arr = [1, 66, 3, 99, 4];
    // var max = Math.max.apply(null, arr); //null不需要改变this指向
    // 最好的写法：因为本来就是Math调用max()的
    var max = Math.max.apply(Math, arr); // 调用的时候数组被解析为一个个数字
    var min = Math.min.apply(Math, arr);
    console.log(max, min); //99 1
</script>

bind()方法

bind()方法不会调用函数。但是能改变函数内部this指向

fun.bind (thisArg, arg1, arg2, ...)

thisArg：在fun函数运行时指定的this值
arg1 , arg2∶传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝

基本使用：

<script>
    // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

    // 3. bind()  绑定 捆绑的意思
    var o = {
        name: 'andy'
    };
    function fn(a, b) {
        console.log(this);
        console.log(a + b);
    };
    var f = fn.bind(o, 1, 2);
    f(); // {name: "andy"}  3
    fn(5, 6); // window  11
    // 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
    // 2. 返回的是原函数改变this之后产生的新函数
</script>

应用1：如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind。
比如：按钮点击之后禁用，一段时间后再重新启用

<script>
    // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
    // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
    var btn1 = document.querySelector('button');
    btn1.onclick = function() {
        this.disabled = true;
        setTimeout(function() {
            //错误写法  导致3s后无法开启按钮
            // this.disabled = false; // 定时器函数里面的this指向的是window不是btn
        }, 3000);
    }
</script>

解决方案：

<script>
    // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
    // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
    var btn1 = document.querySelector('button');
    btn1.onclick = function() {
        var that = this;// 可以解决问题但是要开辟内存空间
        this.disabled = true;
        setTimeout(function() {
            that.disabled = false; // 定时器函数里面的this指向的是window不是btn
        }, 3000);
    }
</script>

利用bind函数：

<script>
    // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
    // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
    var btn1 = document.querySelector('button');
    btn1.onclick = function() {
        this.disabled = true; // 这个this 指向的是 btn 这个按钮
        setTimeout(function() {
            this.disabled = false; // 此时定时器函数里面的this在定时器函数的外面 指向的是btn
        }.bind(this), 3000); // 这个this 指向的是btn 这个对象
    };
    // function(){xxx}.bind(this)改变了定时器函数内部的this指向
    // 而且也不是立即执行此函数，而是等待定时器的调用
</script>

现在有多个按钮，进一步证明了用this.disabled = false比用btn.disabled = false要好，体现了bind的价值。

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log(i); // 3
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false; // btn[i].disabled是绝对错误的  因为定时器是放在异步队列中的
                }.bind(this), 2000);
            }
        }
    </script>
</body>

call、apply、bind总结

相同点：

都可以改变函数内部的this指向

区别点：

call和apply 会调用函数，并且改变函数内部this指向。
call和apply传递的参数不一样, call传递参数aru1, aru2…形式，apply必须数组形式[arg]
bind 不会调用函数，可以改变函数内部this指向。

主要应用场景：

call经常做继承；
apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值；
bind不调用函数，但是还想改变this指向。比如改变定时器内部的this指向。

严格模式

概述

严格模式对正常的JavaScript语义做了一些更改：

消除了Javascript语法的一些不合理、不严谨之处，减少了一些怪异行为；
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
禁用了在ECMAScript的未来版本中可能会定义的一些语法，为未来新版本的Javascript做好铺垫。比如一些保留字如：class, enum, export, extends, import, super不能做变量名

开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

为脚本开启严格模式

为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句"use strict";或'use strict;'。

<script>
	"use strict";
	console.log("这是严格模式。");
</ script>

因为"use strict"加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。
有的script基本是严格模式，有的script脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文f放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他script脚本文件。

<script>
	(function () {
		"use strict";
		var num = 10;
		function fn() {}
	})();
</script>

<body>
    <!-- 为整个脚本(script标签)开启严格模式 -->
    <!-- (1) -->
    <script>
        'use strict'; //单引号双引号都可以
        //   下面的js 代码就会按照严格模式执行代码
    </script>
    <!-- (2) -->
    <script>
        (function() {
            'use strict';
        })();
    </script>
</body>

为函数开启严格模式

要给某个函数开启严格模式，需要把“use strict”;或'use strict';声明放在函数体所有语句之前。

<body>
    <!-- 为某个函数开启严格模式 -->
    <script>
        // 此时只是给fn函数开启严格模式
        function fn() {
            'use strict';
            // 下面的代码按照严格模式执行
        }
     <!-- 两个函数之外的代码依然还是正常模式 -->      
        function fun() {
            // 里面的还是按照普通模式执行
        }
    </script>
</body>

严格模式中的变化

变量规定

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var命令声明，然后再使用；
严禁删除已经声明变量。例如，delete x;语法是错误的。

<script>
    'use strict';
    // 1. 我们的变量名必须先声明再使用
    // num = 10;
    // console.log(num);//报错

    // 2.我们不能随意删除已经声明好的变量
    var num = 10;
    // delete num; // 报错
</script>

严格模式下this指向问题

以前在全局作用域函数中的this指向window对象；
严格模式下全局作用域中函数中的this是undefined；
以前构造函数时不加new也可以调用，当普通函数，this指向全局对象；
严格模式下，如果构造函数不加new调用，this会报错；
new 实例化的构造函数指向创建的对象实例；
定时器this还是指向window；
事件、对象还是指向调用者。

<script>
    'use strict';
    // 3. 严格模式下全局作用域中函数中的 this 是 undefined。不在是window
    function fn() {
        console.log(this); // undefined。

    }
    fn();
    // 4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
    function Star() {
        this.sex = '男';
    }
    // Star(); // 严格模式下这样调用构造函数会报错，正常模式下不会
    // console.log(window.sex); // 严格模式下会报错，正常模式下打印: 男

    // 实例化后，构造函数中的this依然指向实例对象（与正常模式一样）
    var ldh = new Star();
    console.log(ldh.sex); // 男

    // 5. 定时器 this 还是指向 window （与正常模式一样）
    setTimeout(function() {
        console.log(this);
    }, 2000);
</script>

函数变化

函数不能有重名的参数。
函数必须声明在顶层.新版本的JavaScript
会引入“块级作用域”（ES6中已引入)。为了与新版本接轨，不允许在非函数的代码块内声明函数。

<script>
    'use strict';
    // 6. 严格模式下函数里面的参数不允许有重名
    function fn(a, a) {
        console.log(a + a);
    };
    // fn(1, 2);// 严格模式下报错，正常模式下打印4
</script>

对于第2点：就是不要在if或者for等花括号{}中声明函数

"use strict";
if (true){
	function f() { } // 语法错误
	f();
}
for (var i = 0; i< 5; i++){
	function f2() { } // 语法错误
	f2();
}
function baz() { // 合法
	function eit(){} //同样合法
}

高阶函数

在这里插入图片描述
第一种：高阶函数- 函数可以作为参数传递；第二种作为返回值留在闭包中讨论

<style>
    div {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>
    <div></div>
    <script>
        // 高阶函数- 函数可以作为参数传递
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function() {
            console.log('我是最后调用的');

        });
        // 运用
        $("div").animate({left: 500}, function() {
            $("div").css("backgroundColor", "purple");
        })
    </script>
</body>

闭包

变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量。

1.函数内部可以使用全局变量。
⒉函数外部不可以使用局部变量。
3.当函数执行完毕，本作用域内的局部变量会销毁。

什么是闭包

闭包( closure)指有权访问另一个函数作用域中变量的函数。
简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。

<script>
    // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    // 闭包就是一个函数,fn就是一个闭包，即被访问的局部变量num所在的函数fn就是一个闭包
    // 可以在scope中查看用到了闭包fn中的局部变量num
    function fn() {
        var num = 10;
        function fun() {
            console.log(num);
        }
        fun();
    }
    fn();
</script>

闭包的作用

闭包实现：在fn外部的作用域可以访问fn内部的局部变量

<script>
    // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    // 一个作用域可以访问另外一个函数的局部变量 
    // 我们fn 外面的作用域可以访问fn 内部的局部变量
    // 闭包的主要作用: 延伸了变量的作用范围
    function fn() {
        var num = 10;
        function fun() {
            console.log(num);
        }
        return fun;
    }
    var f = fn();
    // var f = fn();类似于
    // var f = function() {
    //         console.log(num);
    //     }

    f(); // 当指向f()的时候会自动调用fun(),此时就会产生一个闭包，这个闭包指向fn
    // 虽然调用的是fun但是num是位于fn中的，所以这个闭包还是fn
</script>

<script>
    // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    // 一个作用域可以访问另外一个函数的局部变量 
    // 我们fn 外面的作用域可以访问fn 内部的局部变量
    // 闭包的主要作用: 延伸了变量的作用范围
    function fn() {
        var num = 10;
        // 更简单的写法 直接返回函数  闭包也是一种高阶函数
        return function() {
            console.log(num);
        }
    }
    var f = fn();
    f(); // 10
</script>

num等待所以函数执行完毕才会销毁。综上：闭包的主要作用就是沿伸了变量的作用范围。

闭包案例

闭包应用-点击li输出当前li的索引号

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-点击li输出当前li的索引号
        // 1. 我们可以利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                console.log(this.index);
            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) { //i:形参
                lis[i].onclick = function() {
                    console.log(i);
                }
            })(i); //i:实参
        }
        // 上述两种方式中闭包反而更麻烦，每次循环都要创建一个立即执行函数
        // 而且如果不进行点击事件，i就没办法销毁
    </script>
</body>

端点放在console.log(i);上，点击某个li之后出现闭包，但是这个闭包没有名字，因为闭包是立即执行函数，点击事件的函数使用了立即执行函数里面的变量i，所以说立即执行函数就是一个闭包。

闭包应用-3秒钟之后,打印所有li元素的内容

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-3秒钟之后,打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {//for循环是同步任务是立马执行
            // setTimeout(function() {
                //错误写法
                //这是一个异步任务是放到任务队列中，不是立即执行，这样写lis[i]会报错
                // console.log(lis[i].innerHTML);
           // }, 3000)
           (function(i) {
            setTimeout(function() {
                console.log(lis[i].innerHTML);
            }, 3000)
        })(i);
        }
    </script>
</body>

其实就是有4个立即执行函数，3秒之后，同时执行(打印)自己的内容

<script>
    // 闭包应用-3秒钟之后,打印所有li元素的内容
    var lis = document.querySelector('.nav').querySelectorAll('li');

    (function(i) {
        setTimeout(function() {
            console.log(lis[i].innerHTML);
        }, 3000)
    })(0);

    (function(i) {
        setTimeout(function() {
            console.log(lis[i].innerHTML);
        }, 3000)
    })(1);

    (function(i) {
        setTimeout(function() {
            console.log(lis[i].innerHTML);
        }, 3000)
    })(2);

    (function(i) {
        setTimeout(function() {
            console.log(lis[i].innerHTML);
        }, 3000)
    })(3);
</script>

闭包应用-计算打车价格

<script>
    // 闭包应用-计算打车价格 
    // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
    // 如果有拥堵情况,总价格多收取10块钱拥堵费
    //以前的写法需要调用
    // function fn() {};
    // fn();
    // 现在的写法：立即执行函数不需要调用
    var car = (function() {
        var start = 13; // 起步价  局部变量
        var total = 0; // 总价  局部变量
        return { //return返回的是一个对象
            // 正常的总价
            price: function(n) {
                if (n <= 3) {
                    total = start;
                } else {
                    total = start + (n - 3) * 5
                }
                return total;
            },
            // 拥堵之后的费用
            yd: function(flag) {
                return flag ? total + 10 : total;
            }
        }
    })();
    // price()和yd()使用了立即执行函数中的局部变量start和total，所以立即执行函数就是一个闭包

    // 立即执行函数return的是一个对象，那么car就是一个对象，调用对象中的函数：car.price()
    //car.price()也有一个返回值，就是total
    console.log(car.price(5)); // 23  参数5传给了price中的n
    console.log(car.yd(true)); // 33

    console.log(car.price(1)); // 13
    console.log(car.yd(false)); // 13
</script>

思考：下面代码打印结果？是否有闭包产生？

<script>
    // 思考题 1：
    var name = "The Window";
    var object = {
        name: "My Object",
        getNameFunc: function() {
            return function() {
                return this.name;
            };
        }
    };
    console.log(object.getNameFunc()()); //The Window

    // 先分析：object.getNameFunc()，由于这个函数有返回值，那么先用一个变量f接收
    // var f = object.getNameFunc();

    //由于object.getNameFunc()返回的是一个函数，就相当于给f赋值如下：
    // var f = function() {
    //     return this.name;
    // };

    // 再分析object.getNameFunc()()相当于f调用接收到的这个函数
    // f();

    //f()等价于: (f接收到的函数)()  即
    // (function() {
    //     return this.name;
    // })();
    //以上就是一个立即执行函数 立即执行函数中的this指向window
    //没有访问到局部变量，所以没有闭包的产生
</script>

思考：下面代码打印结果？是否有闭包产生？

<script>
    // 思考题 2：

    var name = "The Window";　　
    var object = {　　　　
        name: "My Object",
        getNameFunc: function() {
            var that = this;
            return function() {
                return that.name;
            };
        }
    };
    console.log(object.getNameFunc()()) //My Object

    // object.getNameFunc()
    // var f = object.getNameFunc();
    // var f = function() {
    //     return that.name;
    // };

    // object.getNameFunc()()
    // f();
    //此时产生了闭包：getNameFunc
</script>

总结

闭包是一个函数（一个作用域可以访问另外一个函数的局部变量)
闭包的作用：延伸变量的作用范围

递归

递归简介

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解：函数内部自己调用自己这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生“栈溢出”错误(stackoverflow)，所以必须要加退出条件return。

<script>
    // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
    var num = 1;
    function fn() {
        console.log('我要打印6句话');

        if (num == 6) {
            return; // 递归里面必须加退出条件
        }
        // return之后，下面两行代码也不再执行
        num++;
        fn();
    }
    fn();
</script>

递归案例

1、求123*…*n的阶乘

<script>
    // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
    function fn(n) {
        if (n == 1) {
            return 1;
        }
        return n * fn(n - 1);
    }
    console.log(fn(3));
    console.log(fn(4));
    // 详细思路 假如用户输入的是3
    //return  3 * fn(2)
    //return  3 * (2 * fn(1))
    //return  3 * (2 * 1)
    //return  3 * (2)
    //return  6
</script>

2、求斐波那契数列

<script>
    // 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
    // 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
    // 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
    function fb(n) {
        if (n === 1 || n === 2) {
            return 1;
        }
        return fb(n - 1) + fb(n - 2);
    }
    console.log(fb(3));
    console.log(fb(6));
</script>

3、根据id返回对应的数据对象

<script>
    var data = [{
        id: 1,
        name: '家电',
        goods: [{
            id: 11,
            gname: '冰箱',
            goods: [{
                id: 111,
                gname: '海尔'
            }, {
                id: 112,
                gname: '美的'
            }, ]
        }, {
            id: 12,
            gname: '洗衣机'
        }]
    }, {
        id: 2,
        name: '服饰'
    }];
    // 我们想要做输入id号,就可以返回的数据对象
    // 1. 利用 forEach 去遍历里面的每一个对象
    function getID(json, id) {
        var o = {};
        json.forEach(function(item) {
            // console.log(item); // 2个数组元素
            if (item.id == id) {
                // console.log(item);
                o = item;
                // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                // 里面应该有goods这个数组并且数组的长度不为 0 
            } else if (item.goods && item.goods.length > 0) {
                o = getID(item.goods, id);
            }

        });
        return o;
    }
    console.log(getID(data, 1));
    console.log(getID(data, 2));
    console.log(getID(data, 11));
    console.log(getID(data, 12));
    console.log(getID(data, 111));
</script>

浅拷贝和深拷贝

浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用；
深拷贝拷贝多层，每一级别的数据都会拷贝；
Object.assign(target,...sources)，ES6新增方法可以浅拷贝

<script>
    // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝地址.
    // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    var o = {};
    for (var k in obj) {
        // k 是属性名   obj[k] 属性值
        o[k] = obj[k];
    }
    console.log(o);
    o.msg.age = 20;
    console.log(obj.msg.age);//20
</script>

对于对象级别的数据，浅拷贝只拷贝地址：将obj拷贝给o的时候，o里面msg拷贝的只是地址，让o和obj的msg指向了同一个地址，那么其中一个msg改变必定会影响另一个msg

<script>
    // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
    // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    var o = {};
    Object.assign(o, obj);//这种方法实现浅拷贝更简单  将obj拷贝给o
</script>

深拷贝

在这里插入图片描述

<script>
    // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        },
        color: ['pink', 'red']
    };
    var o = {};
    // 封装函数 
    function deepCopy(newobj, oldobj) {
        for (var k in oldobj) {
            // 判断我们的属性值属于那种数据类型
            // 1. 获取属性值  oldobj[k]
            var item = oldobj[k];
            // 2. 判断这个值是否是数组
            if (item instanceof Array) {
                newobj[k] = [];
                deepCopy(newobj[k], item)
            } else if (item instanceof Object) {
                // 3. 判断这个值是否是对象
                newobj[k] = {};
                deepCopy(newobj[k], item)
            } else {
                // 4. 属于简单数据类型
                newobj[k] = item;
            }
        }
    }
    deepCopy(o, obj);
    console.log(o);
    var arr = [];
    console.log(arr instanceof Object); // true  数组也是一个对象  所以上述判断条件，先判断是否是数组再判断是否为 对象
    o.msg.age = 20;
    console.log(obj.msg.age); //18  不被修改
</script>

正则表达式

概述

正则表达式概念

正则表达式(Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式(规则)的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript正则表达式完成表单验证。

正则表达式特点

1.灵活性、逻辑性和功能性非常的强。
2.可以迅速地用极简单的方式达到字符串的复杂控制。
3.对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
4.实际开发一般都是直接复制写好的正则表达式。但是要求会使用正则表达式并且根据实际情况修改正则表达式。比如用户名：/^[a-z0-9_-]{3,16}$/

在JS中的使用

正则表达式的创建

在JavaScript中，可以通过两种方式创建一个正则表达式。
1、通过调用RegExp对象的构造函数创建

var 变量名= new RegExp(/表达式/);

2、通过字面量创建

var 变量名=/表达式/ ;

/ / 注释中间放表达式就是正则字面量

<script>
    // 正则表达式在js中的使用
    // 1. 利用RegExp对象来创建 正则表达式
    var regexp = new RegExp(/123/);
    console.log(regexp); // 打印 /123/

    // 2. 利用字面量创建正则表达式
    var rg = /123/;
    console.log(rg); // 打印 /123/
</script>

测试正则表达式test

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

regexObj.test (str)

regexobj是写的正则表达式；
str 我们要测试的文本；
就是检测str文本是否符合我们写的正则表达式规范。

<script>
    // 正则表达式在js中的使用
    // 1. 利用RegExp对象来创建 正则表达式
    var regexp = new RegExp(/123/);
    console.log(regexp); // 打印 /123/

    // 2. 利用字面量创建正则表达式
    var rg = /123/;
    console.log(rg); // 打印 /123/

    // 3. test方法用来检测字符串是否符合正则表达式的要求规范
    console.log(rg.test(123)); //true
    console.log(rg.test('123')); //true
    console.log(rg.test('abc')); //false
</script>

正则表达式中的特殊字符

正则表达式的组成

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/。
其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、＋等。

特殊字符非常多，可以参考︰

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
jQuery手册：正则表达式部分
正则测试工具：http://tool.oschina.net/regex

边界符

正则表达式中的边界符(位置符）用来提示字符所处的位置，主要有两个字符。

边界符	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)
如果^和$在一起，表示必须是精确匹配。

<script>
    // 边界符 ^ $
    var rg = /abc/; //正则表达式里面不需要加引号，无论是数字型还是字符型
    //   /abc/只要包含有abc这个字符串返回的都是true
    console.log(rg.test('abc')); // true
    console.log(rg.test('abcd')); // true
    console.log(rg.test('aabcd')); // true
    console.log('------------------------------');
    var reg = /^abc/;
    console.log(reg.test('abc')); // true
    console.log(reg.test('abcd')); // true
    console.log(reg.test('aabcd')); // false
    console.log('------------------------------');
    var reg1 = /^abc$/;
    // /^abc$/精确匹配，必须要求是abc这个字符串才符合规定
    console.log(reg1.test('abc')); // true
    console.log(reg1.test('abcd')); // false
    console.log(reg1.test('aabcd')); // false
    console.log(reg1.test('abcabc')); // false
</script>

字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
[-] 方括号内部范围符-

<script>
    // var rg = /abc/;  只要包含abc就可以 
    // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
    var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
    console.log(rg.test('andy')); // true
    console.log(rg.test('baby')); // true
    console.log(rg.test('color')); // true
    console.log(rg.test('red')); // false

    var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
    // [abc]只相当于一个字符   这里只有3种true的情况
    console.log(rg1.test('aa')); // false
    console.log(rg1.test('a')); // true
    console.log(rg1.test('b')); // true
    console.log(rg1.test('c')); // true
    console.log(rg1.test('abc')); // false

    var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围 
    // [a-z只相当于一个字符]   这里只有26种正确的情况
    console.log(reg.test('a')); // true
    console.log(reg.test('z')); // true
    console.log(reg.test(1)); // false
    console.log(reg.test('A')); // false
</script>

字符组合

/^[a-z0-9]$/.test ('a') // true

<script>
    // 字符组合
    var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
    console.log(reg1.test('a')); // true
    console.log(reg1.test('B')); // true
    console.log(reg1.test(8)); // true
    console.log(reg1.test('-')); // true
    console.log(reg1.test('_')); // true
    console.log(reg1.test('!')); // false
</script>

[^]方括号内部取反符^

/^[^abc]$/.test ('a')   // false

<script>
    // 如果中括号[]里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
    var reg2 = /^[^a-zA-Z0-9_-]$/;
    console.log(reg2.test('a')); // false
    console.log(reg2.test('B')); // false
    console.log(reg2.test(8)); // false
    console.log(reg2.test('-')); // false
    console.log(reg2.test('_')); // false
    console.log(reg2.test('!')); // true
</script>

量词符

量词符用来设定某个模式出现的次数。

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

<script>
    // 量词符: 用来设定某个模式出现的次数    
    // 1. * 相当于 >= 0 可以出现0次或者很多次 
    var reg = /^a*$/;
    console.log(reg.test('')); // true
    console.log(reg.test('a')); // true
    console.log(reg.test('aa')); // true
    console.log(reg.test('aaaaaa')); // true
    console.log('-------------------------------------');

    // 2. + 相当于 >= 1 可以出现1次或者很多次
    var reg1 = /^a+$/;
    console.log(reg1.test('')); // false
    console.log(reg1.test('a')); // true
    console.log(reg1.test('aa')); // true
    console.log(reg1.test('aaaaaa')); // true
    console.log('-------------------------------------');

    // 3. ?  相当于 1 || 0
    var reg2 = /^a?$/;
    console.log(reg2.test('')); // true
    console.log(reg2.test('a')); // true
    console.log(reg2.test('aa')); // false
    console.log(reg2.test('aaaaaa')); // false
    console.log('-------------------------------------');

    // 4. {3 } 就是重复3次
    var reg3 = /^a{3}$/;
    console.log(reg3.test('')); // false
    console.log(reg3.test('a')); // false
    console.log(reg3.test('aa')); // false
    console.log(reg3.test('aaaaaa')); // false
    console.log(reg3.test('aaa')); // true
    console.log('-------------------------------------');

    // 5. {3, }  大于等于3
    var reg4 = /^a{3,}$/;
    console.log(reg4.test('')); // false
    console.log(reg4.test('a')); // false
    console.log(reg4.test('aa')); // false
    console.log(reg4.test('aaaaaa')) ; // true
    console.log(reg4.test('aaa')); // true
    console.log('-------------------------------------');

    // 6. {3, 16}  大于等于3 并且 小于等于16
    var reg5 = /^a{3,16}$/;
    console.log(reg5.test('')); // false
    console.log(reg5.test('a')); // false
    console.log(reg5.test('aa')); // true
    console.log(reg5.test('aaaaaa')); // true
    console.log(reg5.test('aaa')); // false
    console.log(reg5.test('aaaaaaaaaaaaaaaaaaaaa'));
	
	var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
    // {6,16} 中间不要有空格;  这样{6, 16}是错误的
    console.log(reg.test('andy-red')); // true
    console.log(reg.test('andy_red')); // true
    console.log(reg.test('andy007')); // true
    console.log(reg.test('andy!007')); // false
</script>

括号总结

大括号：量词符．里面表示重复次数
中括号：字符集合。匹配方括号中的任意字符.
小括号表示优先级

<script>
    // 中括号 字符集合.匹配方括号中的任意字符. 
    // var reg = /^[abc]$/;
    // a 也可以 b 也可以 c 可以  a ||b || c

    // 大括号  量词符. 里面表示重复次数
    // var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
    // console.log(reg.test('abc'));// false
    // console.log(reg.test('abcabcabc'));// false
    // console.log(reg.test('abccc'));// true

    // 小括号 表示优先级
    var reg = /^(abc){3}$/; // 它是让abc重复三次
    console.log(reg.test('abc')); // false
    console.log(reg.test('abcabcabc')); // true
    console.log(reg.test('abccc')); // false
</script>

预定义类

预定义类指的是某些常见模式的简写方式

预定义类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字和下划线，相当于[A-Z a-z 0-9_]
\W	除所有字母、数字和下划线以外的字符，相当于[^A-Z a-z 0-9_]
\s	匹配空格(包括换行符、制表符、空格符等)，相等于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[^\t\r\n\v\f]
座机号码验证

<script>
    // 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
    // 正则里面的或者 符号  |  
    // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
    var reg = /^\d{3,4}-\d{7,8}$/;
    //上述两种方式还是不一样的
</script>

正则表达式中的替换

replace

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

stringObject.replace(regexp/substr,replacement)

第一个参数：被替换的字符串或者正则表达式；
第二个参数：替换为的字符串
返回值是一个替换完毕的新字符串

<script>
    // 替换 replace
     var str = 'andy和red';
    //替换字符串
    // var newStr = str.replace('andy', 'baby');
    //替换正则表达式
     var newStr = str.replace(/andy/, 'baby');
     console.log(newStr);
</script>

举例

<body>
    <textarea name="" id="message"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            // div.innerHTML = text.value.replace('激情', '**');
            div.innerHTML = text.value.replace(/激情/, '**');
        }
    </script>
</body>

正则表达式参数

/表达式/[switch]

switch(也称为修饰符)按照什么样的模式来匹配。有三种值：

g ︰全局匹配
i：忽略大小写
gi：全局匹配＋忽略大小写

<body>
    <textarea name="" id="message"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|gay/g, '**');
        }
    </script>
</body>

七更醉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript高级[二]

javaScript高级[二]函数函数的定义和调用函数的定义方式函数的调用方式this函数内this指向改变函数内部this指向call()方法apply()方法bind()方法call、apply、bind总结严格模式概述开启严格模式为脚本开启严格模式为函数开启严格模式严格模式中的变化变量规定严格模式下this指向问题函数变化高阶函数闭包变量作用域什么是闭包闭包的作用闭包案例闭包应用-点击li输出当前li的索引号闭包应用-3秒钟之后,打印所有li元素的内容闭包应用-计算打车价格总结递归递归简介递归案例浅拷
复制链接

扫一扫

专栏目录