JavaScript系列之高级篇

Posted 2021-08-05 coderkey

四，函数高级

1，函数的定义和调用

1.1，函数的定义方式

（1）含义：

① 函数声明方式 function 关键字（命名函数）
② 函数表达式（匿名函数）
③ new Function( )

（2）语法：

var fn = new Function('参数1'，'参数2'，…'函数体')

（3）注意：

①Function 里面的参数都是必须是字符串格式。
② 所有函数都是 Function 的实例（对象）

（4）例如：

<script>
      // 定义函数的三种方式：
      // 方式一：自定义函数（命名函数）
      function fn1( ) {
      }
      // 方式二：函数表达式（匿名函数）
      var fn2 = function( ) { };
      // 方式三：利用new Function('形参1'，'形参2','函数体')  注意：三个参数都是字符串的形
       式
      var fn3 = new Function('a', 'b', 'console.log(a+b)')
      fn3(1, 3);
      // 所有的函数都是Function构造函数的实例对象，都具有__proto__属性，该属性指向了
      Function构造函数的原型对象。原型对象上的constructor指向了Function构造函数
      console.dir(fn2);
      console.dir(fn3);
      console.log(fn3 instanceof Object);
      console.log(fn3.__proto__); // ƒ () { [native code] } 
      console.log(fn3.__proto__constructor); // undefined
  </script>

1.2，函数的调用方式

（1）含义：

① 普通函数。
② 对象的方法。
③ 构造函数。
④ 绑定事件函数(通过点击按钮调用)
⑤ 定时器函数。
⑥ 立即执行函数(立即执行函数是自动调用的)

（2）例如：

  <script>
      // 1，普通函数
      function fn( ) {
          console.log('bengbengbadei1');
      }
      fn( )；
      fn.call( );
      // 2，对象的方法
      var obj = {
          fn2: function( ) {
              console.log('bengbengbadei2');
          }
      }
      obj.fn2( );
      // 3，构造函数
      function Func3( ) {
      }
      var fn3 = new Func3( );
      // 4，绑定事件函数(通过点击按钮调用)
      // btn.onclick = function( ) { };
      // 5，定时器函数
      // setInterval(function( ){ },1000)
      // 6，立即执行函数(立即执行函数是自动调用的)
      (function( ) {
          console.log('bengbengbadei4');
      })( )；
  </script>

2，this

2.1，函数内部 this 的指向

（1）含义：

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

（2）区别：

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

（3）例如：

  <button>按钮</button>
  <script>
        var btn = document.querySelector('button');
        // 1.普通函数
        function fn( ) {
            console.log('普通函数中的this指向的是：' + this);   //  [object Window]
        }
        fn( )；
        fn.call( );
        // 2.对象的方法
        var obj = {
            fn2: function( ) {
                console.log('对象方法中的this指向的是：' + this);  // [object Object]
            }
        };
        obj.fn2( );
        // 3.构造函数
        function Func3( ) {
            console.log('构造函数中的this指向的是：' + this); // [object Object]
        }
        var fn3 = new Func3( );
        // 4.绑定事件函数(通过点击按钮调用)
        btn.onclick = function( ) {
            console.log('绑定事件函数中的this指向的是：' + this);
             // [object htmlButtonElement]
        };
        // 5.定时器函数
        setInterval(function( ) {
            console.log('定时器函数中的this指向的是：' + this);  // [object Window]
        }, 1000);
        // 6.立即执行函数(立即执行函数是自动调用的)
        (function( ) {
            console.log('立即执行函数中的this指向的是：' + this);  // [object Window]
        })( );
     </script>

2.2，改变函数内部 this 指向

（1）含义：

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

2.2.1，call 方法

（1）含义：

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

（2）语法：

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

（3）例如：

 <script>
      function fn( ) {
        console.log(this);
      }
      var o = {
        name: 'timi',
      };
      fn( );
      // call方法作用一：调用函数。
      fn.call( );
      // call方法作用二：改变函数中this的指向。
      fn.call(o);
      // call方法实际应用：实现属性的继承。
      function Father(name) {
        this.name = name;
      }
      function Son(name) {
        Father.call(this, name);
      }
      var son = new Son('tom');
      console.log(son);
  </script>

2.2.2，apply 方法

（1）含义：

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

（2）语法：

fun.apply(thisArg, [argsArray])
thisArg：在fun 函数运行时指定的 this 值。
argsArray：传递的值，必须包含在数组里面。
返回值就是函数的返回值，因为它就是调用函数。

（3）例如：

  <script>
      var o = {
        name: 'ldh',
      };
      function fn(arr,arr1) {
        console.log(this);
        console.log(arr,arr1);  // 'pink' 'red'
      }
      fn.apply(o, ['pink', 'red']);
      // apply的两个作用：调用函数，改变this的指向。
      // 注意，传递的第二个参数必须是数组(伪数组）形式，在函数执行的过程中，传递进去的值
      会变成对应的值的类型。
      console.log(Math.max(1, 4, 6, 7));    //   7
      //求一个数组中最大的值。
      var max = Math.max.apply(Math, [1, 2, 434, 545]);  
      console.log(max);   // 545
    </script>

2.2.3，bind 方法

（1）含义：

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

（2）语法：

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

（3）例如：

2.2.4，call,apply,bind 的区别

（1）相同点：

都能改变函数中 this 的指向

（2）不同点：

1，call和bind传递的参数是arg1,arg2的形式，而apply传递的是数组的形式。
2，call和apply会立即调用函数，而bind不会调用函数，只会返回一个新的函数。

（3）实际应用场景：

call：实现属性的继承。
apply：常跟数组有关系，可以借助数学对象Math查找数组的最大值最小值。
bind:
应用1：单纯想改变this指向的情况。比如改变定时器中this的指向。
应用2：绑定点击事件，通过传递参数将全局变量window传入到函数内部。

---

3，严格模式

3.1，什么是严格模式

（1）含义：

消除了一些不合理的地方，为未来的js版本做了铺垫，例如禁用了class等保留字做变量名。

3.2，开启严格模式

（1）含义：

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

3.2.1，为脚本开启严格模式

（1）含义：

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

（2）例如：

  <body>
    <!-- 1.为整个script脚本开启严格模式 -->
    <script>
      'use strict';
    </script>
    <script>
      // 在立即执行函数中开启严格模式
      (function ( ) {
        'use strict';
      })( );
    </script>
    </body>

3.2.2，为函数开启严格模式

（1）含义：

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

（2）例如：

  <body>  
  <!-- 2.为单个函数fn1开启严格模式 -->
    <script>
      function fn1( ) {
        'use strict';
      }
      function fn2( ) { }
    </script>
   </body>

3.3，严格模式的变化

（1）含义：

严格模式对 JavaScript的语法和行为，都做了一些改变。

3.3.1，变量规定

（1）规定：

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

（2）例如：

  <script>
      'use strict';
      // 1.严格模式下变量必须先声明再使用。
      // num = 10;
      // console.log(num);   // undefined
      // 2.不能删除已经声明的变量
      // var num2 = 11
      // delete num2
  </script>

3.3.2，严格模式下this指向问题

（1）规定：

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

（2）例如：

 <script>
      'use strict';
      // 3.全局作用域中的this指向的是window
      // console.log(this);
      // 4.但全局作用域中的函数中的this指向的是undefined
      // function fn( ) {
      //     console.log(this);
      // }
      // fn( )  //undefined
      //5.构造函数中的this:
      // 5.1，严格模式下如果不加new调用，而采用直接调用构造函数的方法，
      此时里面的this为undefined，若为undefined添加属性则会报错
      // function Star( ) {
      // this.name = 'adele'
      // }
      // Star( )
      // 5.2，使用new的话this指向的就是实例对象
      function Star( ) {
        this.age = '18';
      }
      var ldh = new Star( );
      console.log(ldh.age);
      // 6.严格模式下定时器中的this指向的还是window
      // setTimeout(function() {
      //     console.log(this);
      // }, 2000)
   </script>

3.3.3，函数变化

（1）规定：

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

（2）例如：

 <script>
      'use strict';
      // 7.严格模式下函数不允许有重名的参数
      // function fn(a, a) {
      //     console.log(a + a);
      // }
      // fn(2, 3)
      // 8.为了与ES6中的块级作用域‘接轨’，ES5的严格模式不允许在非函数的代码块中声明函数
      // if (true) {
      //     //会报错
      //     function fun( ) {
      //         console.log(1);
      //     }
      //     fun( )
      // }
      // for (var i = 0; i < 5; i++) {
      //     //会报错
      //     function fun( ) {
      //         console.log(1);
      //     }
      //     fun( )
      // }
      // function func1( ) {
      //     // 合法
      //     function func2( ) {
      //     }
      // }
    </script>

4，高阶函数

4.1，高阶函数概述

（1）含义：

高阶函数是对其函数进行操作的函数，它接收函数作为参数或者将函数作为函数返回值输出。

（2）语法：

  <script>
    function fn(callback) {
      callback && callback( );
    }
    fn(function( ) { });
    </script>

    <script>
      function fn( ) {
        return function( ) { }
      }
      fn( );
    </script>

（3）例如：

  <style>
      div {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
      }
   </style>
   </head>
   <body>
    <div></div>
    <script>
      function fn(a, b, callback) {
        console.log(a + b);
        callback && callback( );
      }
      // 高阶函数中的参数可以是函数
      fn(2, 5, function ( ) {
        console.log('hello');
      });

      // jQuery中的animate方法就属于高阶函数
      $('div').animate(
        {
          left: 100,
        },
        function ( ) {
          $('div').css('backgroundColor', 'yellow');
          $('div').animate(
            {
              left: 800,
            },
            function ( ) {
              $('div').css('backgroundColor', 'orange');
            }
          );
        }
      );
  </script>
  </body>

（4）注意：

第一种：参数可以是函数。
第二种：return的是函数。

5，闭包

5.1，什么是闭包

（1）含义：

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

（2）例如：

  <script>
      // 1.闭包的概念：
      // 闭包是一个函数，该函数中的局部变量可以被其他函数访问到。闭包可以通过debug断点
       查看到。
      // 下述中的闭包函数指的就是fn函数。
      function fn( ) {
        var num = 10;
        function fun( ) {
          console.log(num);
        }
        fun( );
      }
      fn( );   // 10
   </script>

5.2， 闭包的作用

（1）作用：

延伸了变量的作用范围。

（2）例如：

  <script>
     function fn( ) {
        // 由于fn是闭包函数，所以num这个变量不会在调用了fn( )后立即销毁，因为还有别的函数
       会使用这个变量。只有等所以函数都调用完后才会销毁这个变量。
        var num = 10;
        return function ( ) {
          console.log(num);
        };
     }
     var f = fn( );
     f( );     // 10
  </script>

6，递归

6.1，什么是递归

（1）含义：

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

（2）例如：

  <script>
      var i = 1;
      function fn( ) {
        console.log('time' + i);
        i++;
        // 递归函数必须加退出条件,否则无限调用会不断的分配内存，造成栈溢出
        if (i > 6) {
          return;
        }
        fn( );
      }
      fn( );
    </script>

6.2，利用递归求数学题

（1）例如：

 <script>
      // 1.递归实现阶乘
      function fn(n) {
        // 关键点：第一项时返回1，不再继续递归调用
        if (n == 1) {
          return 1;
        }
        return n * fn(n - 1);
      }
      console.log(fn(4));

      // 2.递归实现斐波拉契数列1、1、2、3、5、8、13、21、34
      function fb(n) {
        // 关键点，第一，二项时返回1，不再继续递归调用
        if (n === 1 || n === 2) {
          return 1;
        }
        return fb(n - 1) + fb(n - 2);
      }
      console.log(fb(6));

      // 3.递归实现嵌套数组的查找
      data = [
        {
          id: 1,
          name: '1111',
          children: [
            {
              id: 11,
              name: '1-1',
            },
            {
              id: 12,
              name: '1-2',
            },
          ],
        },
        {
          id: 2,
          name: '222',
        },
      ];
      function getDataById(data, id) {
        var o = {};
        data.some(function (item) {
          if (item.id === id) {
            o = item;
            return true;
      // 关键点1：当在外层找不到id时，先判断是否存在children属性，若存在，再递归调用查询
          } else if (item.children && item.children.length > 0) {
   // 关键点2：此处必须把再次调用的函数的返回值赋值给o，否则你无法接受到再次调用函数时返回的结果
            o = getDataById(item.children, id);
          }
        });
        return o;
      }
      console.log(getDataById(data, 2));
      console.log(getDataById(data, 11));
    </script>

6.3，浅拷贝和深拷贝

（1）含义：

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

（2）例如：

   <script>
      var obj1 = {
        name: 'tim',
        msg: {
          age: 29,
        },
      };
      // 1.直接赋值相当于地址的引用
      // var obj2 = obj1;
      // obj2.name = 'jim'
      // console.log(obj1.name); //jim
      // console.log(obj1 === obj2); //true

      // 2.浅拷贝只会拷贝最外面的一层，里面的对象拷贝的是地址，即引用，修改时会连着修改
      // var obj3 = { }
      // for (k in obj1) {
      //     obj3[k] = obj1[k]
      // }
      // obj3.msg.age = 30
      // console.log(obj1); //obj1.msg.age的值也会变成30，说明引用的同一块地址

      // 3.ES6中的浅拷贝
      var obj4 = { };
      Object.assign(obj4, obj1);   // 把obj1拷贝到obj4中
      console.log(obj4);  
      obj4.msg.age = 30;
      console.log(obj1);    //obj1.msg.age的值也会变成30，说明引用的同一块地址

      // 深拷贝：每一层的数据都会被拷贝，开辟的都是新的空间。
      // var obj = {
      //     name: 'tim',
      //     color: ['white', 'black'],
      //     size: {
      //         content: 'small'
      //     }
      // };
      // 以下为通过函数递归的方式实现深拷贝
      // function deepCopy(newObj, oldObj) {
      //     for (k in oldObj) {
      //         // 判断是不是数组
      //         if (oldObj[k] instanceof Array) {
      //             newObj[k] = []
      //             deepCopy(newObj[k], oldObj[k]);
      //             // 判断是不是对象
      //             // ❤ 注意：需要先判断是不是数组，再判断是不是对象，因为数组也属于对象
      //         } else if (oldObj[k] instanceof Object) {
      //             newObj[k] = {}
      //             deepCopy(newObj[k], oldObj[k])
      //         } else {
      //             newObj[k] = oldObj[k]
      //         }
      //     }
      // }
      // var obj2 = {}
      // deepCopy(obj2, obj)
      // console.log(obj2);
      // obj2.color[0] = 'yellow' //深拷贝，不会改变原来的值
      // console.log(obj2);
      // console.log(obj);
    </script>

---

五，正则表达式概述

1，什么是正则表达式

（1）含义：

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

2，正则表达式在 JavaScript 中的使用

2.1，创建正则表达式

（1）语法：

① 通过调用 RegExp 对象的构造函数创建。
var 变量名 = new RegExp(/表达式/)；
② 通过字面量创建。
var 变量名 = /表达式/；

2.2，测试正则表达式 text

（1）含义：

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

（2）语法：

regexObj.text(str); // 就是检测str文本是否符合我们写的正则表达式规范。
regexObj：是写正则表达式。
str：要测试是文本。

（3）例如：

  <script>
      // 正则表达式的创建：
      // 1,通过 RegExp 构造函数创建正则表达式。
      // var regExp = new RegExp(/123/);
      // 2,利用字面量创建正则表达式。
      var regExp = /123/;
      // 正则表达式验证方法： 正则表达式对象.test( )
      console.log(regExp.test(123)); //true
      console.log(regExp.test('123')); //true
      console.log(regExp.test(61234)); //true
      console.log(regExp.test(343)); //false
    </script>

3，正则表达式中的特殊字符

3.1，正则表达式的组成

（1）含义：

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

3.2，边界符

（1）含义：

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

（2）语法：

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

（3）例如：

  <script>
      // 读正则表达式时，第一步是看里面是否有被^...$包裹，若有，则表示精确匹配。
      // 1.边界符^
      var reg1 = /^abc/;
      console.log(reg1.test('abchij'));      //true
      console.log(reg1.test('abbij'));      //false
      // 2.边界符$
      var reg2 = /abc$/;
      console.log(reg2.test('abccabc'));     //true
      console.log(reg2.test('abcabb'));     //false
      // 3.精确匹配：边界符^加边界符$
      var reg3 = /^abc$/;
      console.log(reg3.test('abc'));       //true
      console.log(reg3.test('abcd'));     //false
      console.log(reg3.test('abcabc'));     //false
  <script>

（4）注意：

/ /正则表达式里面不需要加引号，不管是数字型还是字符串型

3.3，字符类

（1）含义：

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

（2）例如：

  <script>
      // 4.字符类[ ],多选一
      var reg4 = /[abc]/;
      console.log(reg4.test('amm'));     //true
      console.log(reg4.test('b'));    //true
      // 5.必须为a,b,c中的一个字符
      var reg5 = /^[abc]$/;
      console.log(reg5.test('ab'));    //false
      console.log(reg5.test('a'));     //true
      // 6.范围符：-   应用：必须为26个小写的英文字母
      var reg6 = /[a-z]/;
      console.log(reg6.test('A'));     //false
      console.log(reg6.test('m'));     //true
      // 7.字符组合,每一个由范围符-连接起来的都可以被看成是一个字符组合，[]中多个字符组合
     之间可以任选一个
      var reg7 = /^[a-zA-Z0-9_-]$/;       // 可以为大小写字母和数字还有 - 和 _
      console.log(reg7.test(7));    //true
      console.log(reg7.test('d'));    //true
      console.log(reg7.test('D'));    //true
      console.log(reg7.test('_'));    //true
      console.log(reg7.test('-'));     //true
      // 8.中括号中的^为取反符，与边界符^不同，中括号中的^表示取反的意思
      var reg8 = /^[^a-zA-Z0-9_-]$/;
      console.log(reg8.test(7));    //false
      console.log(reg8.test('d'));    //false
      console.log(reg8.test('D'));    //false
      console.log(reg8.test('_'));    //false
      console.log(reg8.test('-'));    //false
      console.log(reg8.test('!'));    //true
      console.log(reg8.test('aa'));   //false

3.4，量词符

（1）含义：

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

（2）符号：

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

（3）例如：

 <script>
      // 9.量词符*,表示可以出现0次或多次
      var reg9 = /^a*$/;
      console.log(reg9.test('aaa'));     // true
      console.log(reg9.test(''));     // true
      // 10.量词符+,表示可以出现1次或多次
      var reg10 = /^a+$/;
      console.log(reg10.test('aaa'));     // true
      console.log(reg10.test(''));     // false
      // 11.量词符?,表示可以出现0次或1次
      var reg11 = /^a?$/;
      console.log(reg11.test('aaa'));     // false
      console.log(reg11.test(''));     // true
      // 12.量词符{3},必须重复3次
      var reg12 = /^a{3}$/;
      console.log(reg12.test('aaaa'));     // false
      console.log(reg12.test('aaa'));     // true
      // 13.量词符{3,}，必须连续重复3次以上
      var reg13 = /a{3,}/;
      console.log(reg13.test('aa'));     // false
      console.log(reg13.test('aaa'));      // true
      console.log(reg13.test('asaa'));     // false
      // 14.量词符{3,5}，必须重复3到5次
      var reg14 = /a{3,5}/;
      console.log(reg14.test('aaaavc'));     // true
      // 15.小括号表示优先级
      var reg15 = /^(abc){2}$/;        //  abc 重复2次
      console.log(reg15.test('abcabc'));     // true
      console.log(reg15.test('abcc'));     // false

      var reg151 = /^abc{2}$/;    //  c 重复2次    =   abcc
      console.log(reg151.test('abcabc'));     // false
      console.log(reg151.test('abcc'));     // true
 </script>

3.5，预定类

（1）含义：

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

（2）字符：

预定义	说明
\\d	匹配0-9之间的任一数字，相当于[0-9]
\\D	匹配所有0-9以外的字符，相当于[^0-9]
\\w	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9]
\\W	除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9]
\\s	匹配空格（包括换行符、制表符、空格符），相当于[\\t\\r\\n\\v\\f]
\\S	匹配非空格的字符，相当于[^\\t\\r\\n\\v\\f]

（3）例如：

  <script>
      // 16.预定义类：\\d表示0-9
      var reg16 = /\\d{3}/;
      console.log(reg16.test('512'));     // true
      console.log(reg16.test('5-2'));     // false
      // 17.或：|
      var reg17 = /^\\d{3}|abc$/;
      console.log(reg17.test('512'));     // true
      console.log(reg17.test('5-2'));     // false
      console.log(reg17.test('abc'));     // true
   </script>

4，正则替换

4.1，replace 替换

（1）含义：

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

（2）语法：

stringObject.replace(regexp/substr,replacement)

（3）注意：

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

4.2，正则表达式参数

（1）语法：

/表达式/[switch]

（2）注意：

switch（也称为修饰符）按照什么样的模式来匹配，有三种值：
g：全局匹配。
i：忽略大小写。
gi：全局匹配 + 忽略大小写。

（3）例如：

  <textarea name="" id="text" cols="30" rows="10"></textarea><button>提交  
  </button>
    <div></div>
    <script>
      // 传统方式
      var name = 'tommibaby';
      var newName = name.replace('tom', 'jim');
      console.log(name);  // tommibaby
      console.log(newName);  // jimmibaby
      // 正则表达式
      // 注意：正则表达式最后跟上g表示全部匹配，i表示忽略大小写
      var text = document.querySelector('#text');
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      btn.onclick = function () {
        div.innerHTML = text.value.replace(/fuck|激情/gi, '**');
      };
    </script>

---