018Day-函数对象的方法、void在超链接中的应用、引入正则表达式、split方法、replace方法、match方法、search方法

一、函数对象的方法

重点：
this:关键字：代表了当前对象。
a：在事件使用。代表了当前正在触发执行事件函数的元素对象。
b：全局定义的函数中，或者全局作用域下的this代表了当前window对象。
如下的的代码中，两个对象的属性和功能都是不共享的，属性不共享是我们希望的，如果功能一样其实可以共享，实现内存的节约。
如何让一个对象的功能共享给其他对象。
实现的思路：让某一个对象的功能借用给其他的对象，通过隐式修改功能内的this 来实现方法的借用。
函数对象的三个方法的介绍：
call、apply、bind
1:使用call 方法实现 方法的借用。
语法： 函数对象.call(受借者，方法的剩余的参数…)
受借者: 借用函数对象的对象。
返回：是函数对象的返回值。
2: 使用apply 方法实现方法的借用。
语法： 函数对象。apply(受借者，[方法其他的参数])；
和call方法的区别就是，第二个参数的实参要放到一个数组中。
返回：是函数对象的返回值。
3：使用bind，可以实现以某一个函数对象为原型，生成一个新的函数对象，该函数对象中的this可以指定。
语法： 函数对象.bind(指定的this对象)
返回：返回一个新的函数。这个函数是实参对象绑定个函数。直接调用返回的函数对象。
总结：
1：call、apply、bind、三个函数是js函数对象内置的函数。
2：三个函数的目的都是为了扩展现有函数的功能，可以将现有函数的功能扩展到其他的对象上去。
3：call、apply 两个方法是借用方法，不会产生新的对象。bind会产生的新的函数对象。

<script>
    var sun = {
        name: "孙宇航",
        age: 21,
        hobbies: ["迟到", "学习", "游戏"],
        score: 80,
        /*study: function () {
            //每次调用study方法，都会导致对象的分数自增一。
            console.log (`${this.name}努力学习，成绩从${this.score}提升到了${++this.score}`);
        }*/
    };
    // sun.study ();
    var dan = {
        name: "张梦丹",
        age: 17,
        hobbies: ["读盗墓笔记","歌曲"],
        score:85,
        study: function () {
            //每次调用study方法，都会导致对象的分数自增一。
            console.log (`${this.name}努力学习，成绩从${this.score}提升到了${++this.score}`);
        },
        max:function (num1,num2) {
            return num1 > num2 ? num1 : num2;
        }
    };
    dan.study();

    //两个功能一模一样，是否是同一个对象呢？
    console.log (sun.study === dan.study);

    //call 实现方法的借用调用。
    dan.study.call(sun);
    var max = dan.max.call(sun,1,6);
    console.log (max);

    dan.study.apply(sun);
    console.log (dan.max.apply(sun,[1,8]))

    //bind 生成新的函数。
    var newStudy = dan.study.bind(sun);
    console.log (newStudy);
    newStudy();
    var newMax = dan.max.bind(sun);
    console.log (newMax(1,9))

</script>

二、void在超链接中的应用

需求：单价超链接，执行一个函数。
上述的练习：即使href超链接是空的内容，点击的时候也会刷新页面。
void：在js中是一个关键字，在其他的语言中通常是用来定义函数的。代表函数没有返回值。
void是空的意思。在a标签中使用 void 可以实现阻断a标签的默认行为
语法：javascript : void(0)

<a href="" onclick="test()">点我一下</a>
<!--当点击超链接的时候，执行js代码 void(0) 意味着什么都不做。-->
<a href="javascript:void(0)" onclick="test()">再点我一下</a>

<script>
    function test() {
        console.log ("hello");
    }
</script>

三、引入正则表达式

练习：页面中定义个输入框，接收一个qq号。检测qq号是否合法。
qq号的合法的要求：
1：纯数字
2：个数：[5,13]
3: 第一个不能是0

QQ：<input type="text"><span style="color: red"></span>

<script>
    var qqInput = document.querySelector ("input");
    var span = document.querySelector ("span");
    qqInput.oninput = function () {
        var result = checkeRegexpQQ (qqInput.value);
        span.innerHTML = result ? "√" : "×";
    };

    //检测qq是否合法的方法
    function checkeQQ(qqStr) {
        const MIN_LEN = 5;
        const MAX_LEN = 13;
        const LEN = qqStr.length;
        //长度
        if (LEN < MIN_LEN)
            return false;
        if (LEN > MAX_LEN)
            return false;
        //判断纯数字
        for (let i = 0; i < LEN; i++) {
            var ch = qqStr.charAt (i);
            if (ch < "0")
                return false;
            if (ch > "9")
                return false;
        }
        //第一个数字不是0
        if (qqStr.charAt (0) == "0")
            return false;

        return true;
    }
    
    function checkeRegexpQQ(qqStr) {
        var reg = /^[1-9]\d{4,12}$/;
        return reg.test(qqStr);
    }
</script>

四、正则的介绍

正则表达式：Regular Expression。
或者成为：规范式。规则式。
js：RegExp
java：regex
概念：正则表达式是一个具有特殊含义的字符的序列。
正则的作用：
1：用来做字符串的整串的匹配的。
用来检测字符串是否满足正则表达式所规定的格式的。
2：子串的查找，在一个字符串中，用来查找字符串中满足某种正则规定的格式的子串。
如何学习：
学习正则表达式中的哪些特殊符号的含义。

五、正则的创建

正则表达式对象的创建：
1：var 正则变量 = /正则的内容/[修饰符];
2: 构造函数。
var 正则变量 = new RegExp(“正则的内容”,“修饰符”);
3：正则表达式的实例方法。test(测试的字符串)
语法： 正则对象.test(str)
测试 str 是否满足 当前正则对象规定的模式的。如果满足，返回true，否则返回false。

<script>
    //1
    var reg = /^a+$/i;//1-n个a
    console.log (reg.test(""));//false
    console.log (reg.test("a"));//true
    console.log (reg.test("aaaaaaaaaaAAAaaaaaaaaaaaa"));//true
    console.log (reg.test("ab"));//false

    //2
    var reg1 = new RegExp("^\\w*$","i");
    console.log (reg1.test(""));//true
    console.log (reg1.test("ABCDaaa"));//true
    console.log (reg1.test("你好"));//false
</script>

六、正则表达式的构成

正则表达式的构成：
1：普通字符：a-z A-Z 0-9 _
2: 特殊字符：具有特殊意义的符号（元字符）。
1：定位符：用来规定字符串中位置的符号。
^: 规定以xx开头 ^在正则的起始位置，约定了以它后面的内容开始。
$: 规定以xx结尾 $在正则的结尾位置，约定了以它前面的内容结束。注意：如果希望是整串的匹配那么必须{以}^{开}头，以$结尾。
如果不添加上述的约束，就是子串的匹配了。
如果想进行子串的查找，就不要添加开头和结尾的特殊符号了。
2：数量符：是用来约束数量符前面的字符的个数的。
? : 代表了前面的字符出现 0-1次。
* : 代表前面的字符出现0-n次。
+ : 代表前面的字符出现1-n次。
{m,n}:代表前面的字符出现m-n次。m和n都包含。
{n}:代表前面的字符出现n次。
{n,}:代表前面的字符出现 n - Infinty 次
3：字符集：[] 中括号中的字符的集合中的某一个字符。
[yangheli]:中括号中的字符中的某一个字符。
[a-z]: 26个小写字符集中的某一个字符。
[A-Z]: 26个大写字符集中的某一个字符。
[a-zA-Z]:52个大小写字符集中的某一个字符。
[0-9]:10个阿拉伯数字的集合中的一个字符。
[a-zA-Z0-9_]:标识符的所有的字符的集合中的某一个字符。
[^a-z]：取反的符号。除了小写字符之外的所有的其他的字符的集合中的一个。
4：预定义字符集：
\d：等价于[0-9]
\D: 等价于[^0-9]
\w: 等价于[a-zA-Z0-9_]
\W：等价于[^a-zA-Z0-9_]
\s: 等价于空白字符的集合
\S: 对\s 取反。所有的非空白字符的集合。
5: 特殊符号
/ :具有特殊意义的符号。如果希望在正则中表示一个/ 符号。必须进行转义。
/: 代表了符号 /
点： . : 在正则中的意思是任意字符。
如果希望去匹配一个点字符，而不是任意字符，那么需要转义。
. 代表了 点字符。
中文字符的区间[\u4e00-\u9fa5]

<script>
    //定位符
    var reg = /^\d+z$/;
    console.log (reg.test("123"));
    console.log (reg.test("112323z"));
    //数量词
    var reg = /^ab?$/;
    console.log (reg.test("a"));//true
    console.log (reg.test("ab"));//true
    console.log (reg.test("abb"));//false
    console.log ("----------------");
    var reg = /^ab*$/;
    console.log (reg.test("a"));//true
    console.log (reg.test("ab"));//true
    console.log (reg.test("abbbbbbbbbbbbbbbb"));//true
    console.log (reg.test("abbbbbbbbcbbbbbbbbb"));//false
    console.log ("----------------")
    var reg = /^a+b+$/;
    console.log (reg.test("a"));//false
    console.log (reg.test("ab"));//true
    console.log (reg.test("abbbbbbbbbbbbbbbb"));//true
    console.log (reg.test("abbbbbbbbcbbbbbbbbb"));//false
    console.log (reg.test("aaabbbbaaabbbaaabbb"));//false
    console.log ("----------------")
    var reg = /^a{1,3}b*$/;
    console.log (reg.test("a"));//true
    console.log (reg.test("ab"));//true
    console.log (reg.test("aaaaabbbbbbbbbbbbbbbb"));//false
    console.log (reg.test("aaa"));//true
    console.log ("----------------")
    var reg = /^a{1,}b*$/;
    console.log (reg.test("a"));//true
    console.log (reg.test("ab"));//true
    console.log (reg.test("aaaaabbbbbbbbbbbbbbbb"));//true
    console.log (reg.test("aaa"));//true
    console.log ("----------------")
    //字符集
    var reg = /^[yangheli]*$/;
    console.log (reg.test("yanghelililili"));//true
    console.log (reg.test("yyyyyyyyyyyyyyyy"));//true
    console.log ("----------------")
    var reg = /^[a-f]*$/;
    console.log (reg.test("aabbbccddeeff"));//true
    console.log (reg.test(""));//true
    console.log ("----------------")
    var reg = /^[^a-f]*$/;
    console.log (reg.test("aabbbccddeeff"));//false
    console.log (reg.test(""));//true
    console.log (reg.test("wrtyAAA_ujkg"));//true
    console.log ("----------------")
    console.log ("预定义字符集");
    var reg = /^\d*$/;
    console.log (reg.test("3433253464736436"));//true
    console.log (reg.test(""));//true
    console.log (reg.test("234354r5345"));//false
    var reg = /^\s*$/;
    console.log (reg.test("    "));//true
    console.log ("特殊字符");
    var reg = /^\/*$/;
    console.log (reg.test("//"));//true
    var reg = /^.*$/;
    console.log (reg.test("fl23j4lk3nfljeworj2l你好"));
    //写一个正则，匹配一个ip地址。192.168.41.241
    var reg = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
    console.log (reg.test("192.168.41.241"));//true

    console.log (String.fromCharCode(0x4e00));//一
    console.log (String.fromCharCode(0x9fa5));//龥
    //写一个正则，来匹配2-3个子的正则。
    var reg = /^[\u4e00-\u9fa5]{2,3}$/;
    console.log (reg.test("小刚"));//true
    console.log (reg.test("a小"));//false
    console.log (reg.test("赵小刚"));//true
    console.log (reg.test("尼古拉斯赵四"));//false

    //写一个邮箱的正则表达式。
    var reg = /^[\w\.]+@\w+\.\w+$/;
    console.log (reg.test("cjcdjk@126.com"));


</script>

七、split方法

支持正则作为实参的方法：split
注意：子串的匹配切割，所以不要加 ^ 和 $.

<script>
    var str = "192.168.1.1";
    //使用原有的方式切割
    console.log (str.split("."));
    //使用正则切割
    console.log (str.split(/\./));
    str = "kfjk234lwe345jrl345kjewlk54fjkl0jf";
    console.log (str.split(/\d+/));//["kfjk", "lwe", "jrl", "kjewlk", "fjkl", "jf"]
    str = "js    js             js           js";
    console.log (str.split(/\s+/));
</script>

八、replace方法

支持正则的方法：replace()
使用正则去当前字符串对象中进行子串的匹配。将匹配到的子串替换为指定的内容。
i：修饰符：代表匹配的时候忽略大小写。ignore case
g: 修饰符：全局搜索 global
修饰符是可选择的。两个修饰符可以一起使用。

<script>
    var str = "js       java         html       css";
    console.log (str.replace(/\s+/g,"-"));
</script>

九、 支持正则的方法：match.

支持正则的方法：match.
1:如果使用字符串作为实参，那么只能返回第一个匹配的子串的内容。
2：如果想找到当前字符串对象中的所有的匹配的内容，需要使用正则。

<script>
    var str = "helloworld";
    console.log (str.match("o"));
    console.log (str.match(/o/g));
    var str = "he123ll123o345657wor75ld";
    console.log (str.match(/\d+/g));
</script>

十、支持正则的方法：search

支持正则的方法：search
该方法类似于indexOf。返回搜索的子串的索引。不存在返回-1.
但是实参支持正则。
该方法的使用具有局限性。只能返回第一个匹配的内容的索引。
不能返回所有的。

<script>
    var str = "helloworld";
    console.log (str.search("o"));//4
    console.log (str.search(/o/g));

</script>