JavaScript+jQuery交互式Web前端开发（第2版） 课件 第11、12章 JavaScript面向对象、正则表达式

第11章JavaScript面向对象《JavaScript+jQuery交互式Web前端开发（第2版）》学习目标/Target

了解面向过程与面向对象，能够阐述面向过程与面向对象的区别熟悉面向对象的特征，能够归纳面向对象的三大特征了解类与对象的概念，能够阐述类与对象的区别掌握类的定义和继承，能够定义类及类中的属性和方法、实现子类继承父类学习目标/Target

掌握调用父类的方法，能够使用super关键字调用父类的构造方法或普通方法

掌握原型对象的使用，能够实现原型对象的访问与使用了解成员查找机制，能够描述成员查找的顺序

熟悉原型链的相关知识，能够绘制原型链学习目标/Target

掌握this指向的更改，能够灵活应用apply()方法、call()方法和bind()方法更改this

指向

掌握错误处理的方式，能够通过try…catch语句处理错误

了解错误类型，能够列举常见的错误类型

掌握错误对象的抛出，能够在程序出错时抛出错误对象

了解错误对象的传递，能够列举错误对象的传递方式章节概述/Summary面向对象（ObjectOriented）是软件开发的一种编程思想，被广泛应用于数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD（ComputerAidedDesign，计算机辅助设计）技术、人工智能等领域。在实际开发中，使用面向对象编程不仅可以使项目的结构更加清晰，而且可以使代码更易维护和更新。本章将详细讲解JavaScript面向对象。目录/Contents11.111.211.3面向对象概述类与对象概述原型11.4更改this指向11.5错误处理面向对象概述11.1了解面向过程与面向对象，能够阐述面向过程与面向对象的区别

先定一个小目标！11.1.1面向过程与面向对象的区别11.1.1面向过程与面向对象的区别当使用面向过程与面向对象思想解决问题时，面向过程的重点在于过程，也就是分析出解决问题需要的步骤，然后按照步骤逐步执行。面向过程的缺点在于，当步骤过多时，程序会变得复杂，代码的可复用性差，一旦步骤发生修改，就容易出现牵一发而动全身的情况。面向对象则是把问题分解为多个对象，这些对象可以完成它们各自负责的工作，只需要发出指令，就可以让这些对象去完成实际的操作。相比面向过程，面向对象可以让开发者从复杂的步骤中解放出来，让一个团队能更好地分工协作。11.1.1面向过程与面向对象的区别下面对比面向对象和面向过程的区别，具体如下表所示。分类优点缺点面向过程代码无浪费，无额外开销，适合对性能要求极其苛刻的情况和项目规模非常小、功能非常少的情况不易维护、复用和扩展面向对象易维护、易复用和易扩展，适合业务逻辑复杂的大型项目增加了额外的开销11.1.1面向过程与面向对象的区别熟悉面向对象的特征，能够归纳面向对象的三大特征

先定一个小目标！11.1.2面向对象的特征1.封装封装是指隐藏内部的实现细节，只对外开放操作接口。接口是对象开放的属性和方法，无论对象的内部多么复杂，用户只需知道这些接口怎么使用即可，而不需要知道内部的实现细节。封装有利于对象的修改和升级，无论一个对象内部的代码经过了多少次修改，只要不改变接口，就不会影响到使用这个对象时编写的代码。11.1.2面向对象的特征2.继承继承是指一个对象继承另一个对象的成员，从而在不改变另一个对象的前提下进行扩展。例如，猫和犬都属于动物，在程序中可以描述猫和犬继承自动物。同理，波斯猫和巴厘猫都继承自猫科，沙皮犬和斑点犬都继承自犬科，它们之间的继承关系如下图所示。11.1.2面向对象的特征在实际开发中，使用继承不仅可以在保持接口兼容的前提下对功能进行扩展，而且可以增强代码的复用性，为程序的修改和补充提供便利。11.1.2面向对象的特征3.多态多态是指同一个操作作用于不同的对象，会产生不同的执行结果。例如，项目中有视频对象、音频对象、图片对象，用户在对这些对象进行增、删、改、查操作时，如果这些接口的命名、用法都是相同的，用户的学习成本就会很低，如果每种对象都有一套对应的接口，则用户就需要学习每一种对象的使用方法，学习成本高。11.1.2面向对象的特征实际上JavaScript被设计为一种弱类型语言（即一个变量可以存储任意类型的数据），就是多态的体现。例如，数字、数组、函数都具有toString()方法，当使用不同的对象调用该方法时，执行结果不同，示例代码如下。varobj=123456;

console.log(obj.toString());

//输出结果为：123456

obj=[1,2,3,4,5,6]

console.log(obj.toString());

//输出结果为：1,2,3,4,5,6

obj=function(){};

console.log(obj.toString());

//输出结果为：function(){}11.1.2面向对象的特征在面向对象中，多态的实现往往离不开继承，这是因为多个对象继承同一个对象后，就获取了相同的方法，然后可以根据每个对象的特点来改变同名方法的执行结果。11.1.2面向对象的特征虽然面向对象具有封装、继承和多态的特征，但并不代表只要满足这些特征就可以设计出优秀的程序，开发人员还需要考虑如何合理地运用这些特征。例如，在封装时，如何给外部调用者提供完整且最小的接口，使外部调用者可以顺利得到想要的功能，而不需要研究其内部的细节；在进行继承和多态设计时，如何为同类对象设计一套相同的方法进行操作等。11.1.2面向对象的特征类与对象概述11.2了解类与对象的概念，能够阐述类与对象的区别11.2.1类与对象

先定一个小目标！假如开发一个学生管理系统，系统中每个学生都是一个对象，每个学生都有姓名、学号等属性，并且每个学生可能会有一些相同的方法，例如唱歌、跳舞等。为了方便创建这样的对象，JavaScript提供了构造函数。11.2.1类与对象然而，在Java等主流的面向对象语言中，是通过类创建对象的，语法相比JavaScript有较大差别。为了符合面向对象的编程习惯，JavaScript从ECMAScript6.0开始，也新增了类的语法。11.2.1类与对象类是指创建对象的模板，类的作用是将对象的特征抽取出来，形成一段代码，通过这段代码可以创建出同一类的对象。例如，开发学生管理系统时，可以创建一个学生类，将学生的共同特征写在类中，然后通过类创建出所需的学生对象。创建同类对象的意义是这些对象拥有相同的属性名和方法名，即拥有相同的特征，在使用对象时，只需要记住同类对象的属性名和方法名，而不需要区分每个对象。11.2.1类与对象在面向对象开发中，首先需要分析项目中有哪些对象，然后分析这些对象的共同特征，即共有的属性和方法，将这些共同特征抽取出来，创建成类，最后通过实例化对象，实现项目的各个功能。11.2.1类与对象掌握类的定义和继承，能够定义类及类中的属性和方法、实现子类继承父类11.2.2类的定义和继承

先定一个小目标！1.类的定义在ECMAScript6.0中，使用class关键字可以定义一个类，在命名习惯上，类名使用首字母大写的驼峰命名法，在类中可以定义constructor()构造方法，用于初始化对象的成员，该构造方法在使用类创建对象时会自动调用，在调用时会传入实例化的参数。11.2.2类的定义和继承下面以定义Student类为例演示类的定义。<script>

//定义类

classStudent{

constructor(name){

//构造方法

=name;

//为新创建的对象添加name属性

}

}

//使用类创建对象

varstu1=newStudent('小明');

varstu2=newStudent('小智');

console.log(stu1); //输出结果为：Student

{name:'小明'}

console.log(stu2); //输出结果为：Student

{name:'小智'}</script>11.2.2类的定义和继承2.类的继承在JavaScript中，子类可以继承父类的属性和方法，继承之后，子类还可以拥有独有的属性和方法。在ECMAScript6.0中，子类继承父类的属性或方法可以通过extends关键字实现，示例代码如下。11.2.2类的定义和继承

//定义父类classFather{}//子类继承父类classSonextendsFather{}下面以子类继承父类的money()方法为例演示类的继承。11.2.2类的定义和继承<script>

//父类

classFather{

constructor(){}

money(){

console.log('10万');

//输出结果为：10万

}

}

//子类

classSonextendsFather{}

varson1=newSon();

son1.money();</script>掌握调用父类的方法，能够使用super关键字调用父类的构造方法或普通方法11.2.3调用父类的方法

先定一个小目标！在程序中，子类可以调用父类的方法，包括父类的构造方法和普通方法。若子类需要调用父类的方法，可以使用super关键字实现。11.2.3调用父类的方法1.调用父类的构造方法当子类继承父类后，若需要在子类的构造方法中调用父类的构造方法，可以使用super()函数调用。11.2.3调用父类的方法若需要在子类的方法中调用父类的普通方法，可以使用super对象。需要说明的是，如果子类想要继承父类的方法，同时在自己内部扩展自己的方法，使用super关键字调用父类的构造方法时，super必须在子类的this之前调用。2.调用父类的普通方法原型11.3掌握原型对象的使用，能够实现原型对象的访问与使用

先定一个小目标！11.3.1原型对象构造函数是使用function关键字声明的，并在内部使用this关键字为对象添加属性和方法；而类是使用class关键字声明的，类中的成员属性和方法使用constructor()方法进行定义。11.3.1原型对象虽然使用构造函数和类都能创建对象，但是两者创建对象的方式有所不同。当使用类创建多个对象时，多个对象的方法都是共享的，而使用构造函数创建多个对象时，每个对象都保存了自己的方法。为了使构造函数创建的对象能够实现方法共享，JavaScript为构造函数提供了原型对象。11.3.1原型对象在JavaScript中，原型对象是一个构造函数的所有实例对象的原型，每个构造函数都有一个原型对象，使用构造函数的prototype属性可以访问原型对象。11.3.1原型对象下面通过代码演示如何访问构造函数Person1()的原型对象。11.3.1原型对象functionPerson1(){}console.log(Ptotype);//输出结果为：{constructor:ƒ}console.log(typeofPtotype);//输出结果为：object在上述示例代码中，第2行代码使用prototype属性访问Person1()构造函数的原型对象；第3行代码使用typeof检测Person1()构造函数的原型对象的类型。当为原型对象添加方法时，原型对象的方法会被所有实例对象共享。例如，为Person1()构造函数的原型对象添加一个introduce()方法，示例代码如下。11.3.1原型对象functionPerson1(){}Produce=function(){

console.log('你好！');};使用构造函数创建的对象，不能实现方法共享。如果想要实现方法共享，可以将方法定义在原型对象中，当实例对象调用方法时就会访问原型对象的方法。11.3.1原型对象11.3.1原型对象传统的继承方式多学一招在ECMAScript6.0之前，JavaScript中并没有类的概念，在没有类的情况下，可以使用4种传统的方式实现继承。下面分别介绍JavaScript中4种传统的继承方式。11.3.1原型对象多学一招1.使用原型对象实现继承如果一个对象中本来没有某个属性和方法，但是可以从原型对象中获取，就会继承对象的属性和方法。2.替换原型对象实现继承在JavaScript中，可以将构造函数的原型对象替换为另一个对象，基于构造函数创建的对象就会继承新的原型对象。注意在基于构造函数创建对象时，代码应写在替换原型对象之后，否则创建的对象仍然会继承原来的原型对象。11.3.1原型对象多学一招3.使用Object.create()实现继承Object对象的create()方法用于创建一个新对象，该方法的参数表示将新对象的prototype指向指定的对象。4.混入继承混入继承是将一个对象成员加入另一个对象中，实现对象功能的扩展。实现混入继承的方法是将一个对象的成员赋值给另一个对象。了解成员查找机制，能够描述成员查找的顺序

先定一个小目标！11.3.2成员查找机制当访问一个实例对象的成员时，JavaScript首先会判断实例对象是否拥有这个成员，如果实例对象拥有这个成员，则直接使用，否则将会在原型对象中搜索这个成员。如果原型对象中有这个成员，就使用该成员，否则继续在原型对象的原型对象中查找。如果按照这个顺序没有查找到，则返回undefined。11.3.2成员查找机制下面通过代码演示成员查找机制。11.3.2成员查找机制<script>

functionStudent(){

this.age=20;}

Stotype.age=21;

varstudent=newStudent();

console.log(student.age);

//输出结果为：20

deletestudent.age;

console.log(student.age);

//输出结果为：21

deleteStotype.age;

console.log(student.age);

//输出结果为：undefined

</script>熟悉原型链的相关知识，能够绘制原型链

先定一个小目标！11.3.3原型链在JavaScript中，实例对象有原型对象，原型对象也有原型对象，这就形成了一个链式结构，称为原型链。11.3.3原型链11.3.3原型链1.访问对象的原型对象在JavaScript中，每个对象都有一个__proto__属性，该对象指向了对象的原型对象，且与构造函数的prototype属性指向的是同一个对象。下面通过代码演示使用__proto__属性访问对象的原型对象。<script>

functionStudent(){}

varstudent=newStudent();

console.log(student.__proto__);

console.log(student.__proto__===Stotype);</script>11.3.3原型链2.访问对象的构造函数在原型对象中有一个constructor属性，该属性指向构造函数。由于实例对象可以访问原型对象的属性和方法，所以通过实例对象的constructor属性可以访问实例对象的构造函数。下面通过代码演示使用实例对象的constructor属性访问对象的构造函数。

<script>

functionStudent(){}

varstudent=newStudent();

//通过原型对象的constructor属性访问构造函数

console.log(Stotype.constructor);

//通过实例对象的constructor属性访问构造函数

console.log(student.constructor);</script>11.3.3原型链需要注意的是，如果将构造函数的原型对象修改为另一个不同的对象，将无法使用constructor属性访问原来的构造函数，示例代码如下。<script>functionStudent(){}

Stotype={

class:'101班'

};

varstudent=newStudent();

console.log(student.constructor===Student);

console.log(student.constructor);</script>11.3.3原型链如果希望在改变原型对象的同时，依然能够使用constructor属性获取原始的构造函数，可以在新的原型对象中将constructor属性手动指向原始的构造函数，示例代码如下。<script>functionStudent(){}

Stotype={constructor:Student,

class:'101班'

};

varstudent=newStudent();

console.log(student.constructor===Student);

console.log(student.constructor);</script>11.3.3原型链构造函数、原型对象和实例对象的关系如下图所示。11.3.3原型链3.访问原型对象的原型对象在JavaScript中，原型对象也是一个对象，通过原型对象的__proto__属性可以访问原型对象的原型对象，示例代码如下。functionStudent(){}console.log(Stotype.__proto__);console.log(Stotype.__proto__.constructor);11.3.3原型链实际上，通过原型对象的__proto__属性访问到的对象是构造函数Object()的原型对象，这个对象是所有Object()实例对象的原型对象，可以通过以下代码进行验证。functionStudent(){}console.log(Stotype.__proto__===Ototype);varobject=newObject();console.log(object.__proto__===Ototype);如果继续访问Ototype的原型对象，则结果为null，示例代码如下。console.log(Ototype.__proto__);11.3.3原型链4.绘制原型链通过前面的分析，可以将原型链的结构总结为以下4点。每个构造函数都有一个prototype属性指向原型对象。原型对象通过constructor属性指回构造函数。通过构造函数创建的实例对象通过__proto__属性可以访问原型对象。原型对象可以通过__proto__属性访问原型对象的原型对象，即Object原型对象，再继续访问，__proto__属性值为null。11.3.3原型链下面根据原型链的结构总结绘制原型链的结构图，如下图所示。函数的构造函数多学一招在JavaScript中，函数也属于对象类型，也拥有属性和方法。通过constructor属性可以访问函数的构造函数。实际上函数的构造函数是Function()函数，Function()函数的构造函数是它本身。下面通过代码演示如何访问函数的构造函数。11.3.3原型链functionStudent(){}console.log(Student.constructor);

//输出结果为：ƒFunction(){[nativecode]}console.log(Function.constructor);

//输出结果为：ƒFunction(){[nativecode]}多学一招此外，通过实例化Function()构造函数可以创建函数，语法格式如下。11.3.3原型链newFunction('参数1','参数2',…,'参数N','函数体')

下面通过代码演示Function()构造函数的使用，示例代码如下。varfn=newFunction('a','b','console.log(a+b)');fn(30,60); //输出结果为：90 多学一招Function()构造函数也可以通过prototype属性访问它的原型对象，且该原型对象与Object()构造函数的__proto__属性指向的对象为同一个对象，通过以下代码可以验证。11.3.3原型链console.log(Ftotype===Object.__proto__)//输出结果为：true多学一招分析函数的构造函数之后，下面将Function构造函数加入原型链结构中，如下图所示。11.3.3原型链掌握利用原型对象扩展数组方法的案例，能够编写代码实现案例

先定一个小目标！11.3.4【案例】利用原型对象扩展数组方法本案例将实现扩展Array()数组对象操作方法，为数组对象添加sum()方法，实现数组元素的求和。根据成员查找机制，当对象不存在某个属性或方法时，将会到该对象的原型对象中进行查找，因此可以将sum()方法写在Array对象的原型对象中，以便所有的实例对象可以使用该方法进行数组求和。11.3.4【案例】利用原型对象扩展数组方法更改this指向11.4掌握this指向的更改，能够灵活应用apply()方法、call()方法和bind()方法更改this指向

先定一个小目标！11.4更改this指向11.4更改this指向在JavaScript中，函数有多种调用的方式，如直接通过函数名调用、作为对象的方法调用、作为构造函数调用等。根据函数不同的调用方式，函数中的this指向也会不同。如果默认的this指向不满足需求，则可以更改this指向。JavaScript提供了可以更改this的指向的3个方法，分别是apply()方法、call()方法和bind()方法，这3个方法都通过函数对象来调用，表示将函数中this的指向更改为指定的对象。apply()方法和call()方法都会调用函数并更改this指向，而bind()方法不会调用函数。11.4更改this指向apply()方法、call()方法和bind()方法的第1个参数相同，表示将this指向更改为哪个对象。apply()方法的第2个参数表示给函数传递参数，以数组形式传递，而call()方法和bind()方法的第2~N个参数表示给函数传递的参数，用逗号分隔。11.4更改this指向错误处理11.5掌握错误处理的方式，能够通过try…catch语句处理错误

先定一个小目标！11.5.1错误处理的方式在编写JavaScript程序时，经常会遇到各种各样的错误，如调用的方法不存在、访问的变量不存在等。下面通过代码演示在JavaScript程序中发生错误的情况。varo={};o.func();console.log('test');11.5.1错误处理的方式当发生错误时，JavaScript引擎会抛出一个错误对象，使用try…catch语句可以对错误对象进行捕获，捕获后可以查看错误信息。try…catch语句的语法格式如下。try{//在try中编写可能出现错误的代码}catch(e){//在catch中处理错误}11.5.1错误处理的方式下面通过代码演示try…catch语句的使用。<script>

varo={};

try{

o.func();

console.log('test01');

}catch(e){

console.log(e);

}

console.log('test02');

</script>11.5.1错误处理的方式使用try…catch语句后的运行结果如下图所示。11.5.1错误处理的方式了解错误类型，能够列举常见的错误类型

先定一个小目标！11.5.2错误类型在JavaScript中共有7种错误类型，当发生错误时，JavaScript会根据不同的错误类型抛出不同的错误对象，具体如下表所示。11.5.2错误类型错误类型说明Error表示普通错误，其他6种类型的错误对象都继承自该对象EvalError表示调用eval()函数错误，已经弃用，为了向后兼容，低版本还可以使用RangeError表示超出有效范围，如“newArray(-1)”ReferenceError表示引用了一个不存在的变量，如“vara=1;a+b;”（变量b未定义）SyntaxError表示解析过程语法错误，如“{;}”“if()”“vara=new;”TypeError表示变量或参数不是预期类型的，如调用了不存在的函数或方法URIError表示解析URI编码出错，在调用encodeURI()、escape()等URI处理函数时出现下面通过代码演示存在语法错误的情况。

<script>

try{

varo={;};

//语法错误

}catch(e){

console.log(e.message);

}</script>11.5.2错误类型注意在通过try…catch语句处理错误时，无法处理语法错误（SyntaxError），如果程序存在语法错误，则整个代码都无法执行。掌握错误对象的抛出，能够在程序出错时抛出错误对象

先定一个小目标！11.5.3错误对象的抛出当JavaScript程序出现错误时，程序会自动抛出错误对象，错误对象中保存了错误出现的位置、错误的类型、错误信息等数据。错误对象会传递给catch语句，通过catch(e)的方式来接收，其中e是变量名，表示错误对象，变量名可以自定义。11.5.3错误对象的抛出除了由程序自动抛出错误对象，用户也可以使用throw关键字手动抛出错误对象。错误对象需要先通过Error()构造函数创建，然后使用throw关键字抛出。Error()构造函数的参数表示错误信息。在通过catch捕获错误后，通过“错误对象.message”可以获取错误信息。11.5.3错误对象的抛出下面通过代码演示错误对象的抛出，示例代码如下。

<script>

try{

vare1=newError('错误信息');

throwe1;

}catch(e){

console.log(e.message);

console.log(e1===e);

}</script>11.5.3错误对象的抛出了解错误对象的传递，能够列举错误对象的传递方式

先定一个小目标！11.5.4错误对象的传递11.5.4错误对象的传递在JavaScript中，错误对象也可以作为参数传递给函数或方法。当try中的代码调用了其他函数时，如果在其他函数中出现了错误，并且没有使用try…catch语句处理，程序就会停下来，将错误对象传递到调用当前函数的上一层函数，如果上一层函数仍然没有处理，则继续向上传递。本章小结本章主要讲解了JavaScript面向对象的相关知识，首先讲解了面向过程与面向对象的区别、面向对象的特征，然后讲解了类与对象、类的定义和继承、调用父类的方法，最后讲解了原型、更改this指向和错误处理，在原型中主要讲解了原型对象、成员查找机制和原型链，在错误处理中主要讲解了错误处理的方式、错误类型、错误对象的抛出和错误对象的传递。通过本章的学习，读者应能够使用面向对象思想实现项目的开发。本章小结第12章正则表达式《JavaScript+jQuery交互式Web前端开发（第2版）》学习目标/Target

了解正则表达式，能够描述正则表达式的概念和作用

掌握正则表达式的使用，能够使用正则表达式匹配字符串掌握正则表达式中元字符的使用，能够根据实际需求选择合适的元字符

掌握正则表达式常用方法，能够实现字符串的匹配、分割和替换章节概述/Summary在实际开发中，经常需要对文本内容进行搜索、查找、匹配、分割和替换等操作，正则表达式提供了简单的语法，可以高效完成这些操作。例如，可以使用正则表达式验证用户在表单中输入的数据格式，如用户名、密码、手机号、身份证号等的格式。此外，在处理字符串、数组、对象等数据类型时，正则表达式也可以提供数据匹配、分割、替换等操作。本章将对正则表达式进行详细讲解。目录/Contents12.112.212.3认识正则表达式使用正则表达式正则表达式中的元字符12.4正则表达式常用方法认识正则表达式12.1了解正则表达式，能够描述正则表达式的概念和作用

先定一个小目标！12.1认识正则表达式正则表达式（RegularExpression）是一种描述字符串规律的表达式，用于匹配字符串中的特定内容。正则表达式的语法灵活、匹配能力强大，可以使用各种符号、特殊字符匹配复杂的字符串。12.1认识正则表达式在实际开发中，正则表达式通常被用于匹配或替换符合某个规律的文本，例如，用户在某个网站中注册账号时，网站要求用户的账号由11位有效手机号组成，网站的开发人员在对用户的账号进行格式验证时，就会使用正则表达式。12.1认识正则表达式在JavaScript中，正则表达式是一种对象。创建正则表达式的方式有两种，一种是使用字面量创建，另一种是使用RegExp()构造函数创建。12.1认识正则表达式使用字面量创建正则表达式的语法格式如下。12.1认识正则表达式/pattern/flags使用RegExp()构造函数创建正则表达式的语法格式如下。newRegExp(pattern[,flags])下面分别对元字符、文本字符和模式修饰符进行简单的介绍。12.1认识正则表达式元字符：具有特殊含义的字符，例如，元字符“.”表示匹配除换行符、回车符之外的任意单个字符，元字符“*”表示匹配前面的字符0次或多次。文本字符：又称为原义字符，它没有特殊含义，用于表示原本的字符。例如，“a”表示字符a，“1”表示字符1。模式修饰符：用于指定额外的匹配策略，如果不需要指定额外的匹配策略，则模式修饰符可以省略。例如，“i”表示忽略大小写；“g”表示全局匹配；“m”表示多行匹配；“s”表示允许点字符“.”匹配换行符和回车符；“u”表示使用Unicode模式进行匹配；“y”表示执行黏性搜索，匹配从目标字符串的当前位置开始。下面通过代码演示正则表达式的创建。12.1认识正则表达式//使用字面量创建正则表达式varreg=/ab/i;//使用RegExp()构造函数创建正则表达式varreg1=newRegExp('ab','i');使用正则表达式12.2掌握正则表达式的使用，能够使用正则表达式匹配字符串

先定一个小目标！12.2使用正则表达式1.检测字符串是否包含敏感词当需要检测一个字符串是否包含敏感词时，可以使用正则表达式中的test()方法。test()方法用于检测字符串是否匹配某个正则表达式，匹配成功则返回true，否则返回false。test()方法的语法格式如下。12.2使用正则表达式正则表达式.test(需要匹配的字符串)下面通过代码演示如何使用test()方法检测字符串是否包含敏感词。

varreg=/admin/;

console.log(reg.test('suadmin'));

//输出结果为：true

console.log(reg.test('address'));

//输出结果为：false12.2使用正则表达式2.获取正则表达式匹配结果使用test()方法虽然可以检测字符串是否匹配某个正则表达式，但是无法返回匹配结果。当需要获取正则表达式匹配结果时，可以使用match()方法。match()方法用于在目标字符串中进行搜索匹配，匹配成功时，返回一个包含附加属性的数组，否则返回null。match()方法的语法格式如下。12.2使用正则表达式string.match(regexp)下面通过代码演示如何使用match()方法获取正则表达式匹配结果。

varreg=/a.min/;

console.log('1admin2admin'.match(reg));

//输出结果为：['admin',index:1,input:'1admin2admin',groups:undefined]

console.log('address'.match(reg));

//输出结果为：null12.2使用正则表达式关于['admin',index:1,input:'1admin2admin',groups:undefined]数组的具体解释如下。12.2使用正则表达式数组元素'admin'表示匹配到的内容。附加属性index表示匹配到的内容'admin'在原字符串中的起始索引。附加属性input表示原字符串。附加属性groups是ECMAScript2018中新增的内容，表示捕获数组，由于没有定义命名捕获组，结果为undefined。3.获取正则表达式全局匹配结果当需要匹配字符串中所有符合正则表达式的内容时，可以使用match()方法结合模式修饰符“g”完成匹配。模式修饰符“g”表示全局匹配，即匹配到第1个符合正则表达式的内容后继续向后匹配。12.2使用正则表达式下面通过代码演示如何使用match()方法结合模式修饰符“g”获取正则表达式全局匹配结果。varreg=/a.s/g;varstr='absabcadsabdassamas';console.log(str.match(reg));

//输出结果为：(3)

['abs','ads','ass']12.2使用正则表达式正则表达式中的元字符12.3掌握正则表达式中定位符的使用，能够灵活应用定位符“^”和“$”匹配字符串

先定一个小目标！12.3.1定位符12.3.1定位符定位符可以匹配以指定内容开头或以指定内容结尾的字符串。常用的定位符有“^”和“$”，具体说明如下。定位符“^”：用于匹配以指定内容开头的字符串。例如，正则表达式/^hello/可以匹配以“hello”开头的字符串。定位符“$”：用于匹配以指定内容结尾的字符串。例如，正则表达式/world$/可以匹配以“world”结尾的字符串。当同时使用定位符“^”和“$”时，表示匹配以指定内容开头并且以指定内容结尾的字符串。12.3.1定位符下面通过代码演示使用定位符“^”和“$”匹配字符串。varreg1=/^a/;varreg2=/e$/;console.log(reg1.test('apricot'));

//输出结果为：trueconsole.log(reg2.test('orange'));

//输出结果为：trueconsole.log(/^Happyday$/.test('Happyday'));//输出结果为：trueconsole.log(/^Sadday$/.test('Happyday'));

//输出结果为：false12.3.1定位符掌握正则表达式中字符类的使用，能够灵活应用常用的字符范围

先定一个小目标！12.3.2字符类字符类是一个字符集合，在实际开发中，有时需要匹配特定范围内的字符，例如，匹配a~z范围内的字符，可以使用中括号“[]”实现范围匹配。12.3.2字符类正则表达式中的中括号“[]”表示一个字符集合，只要待匹配的字符符合字符集合中的某一项，即表示匹配成功。当需要匹配某个范围内的字符时，可以在正则表达式中使用中括号“[]”和连字符“-”来表示范围；当需要匹配某个范围外的字符时，可以在“[”的后面加上“^”，此时“^”不再表示定位符，而是反义符，表示某个范围之外。12.3.2字符类常用的字符范围如下表所示。12.3.2字符类示例说明[cat]匹配c、a、t中的任意一个字符[^cat]匹配除c、a、t以外的字符[A-Z]匹配A~Z范围内的字符[a-z]匹配a~z范围内的字符[a-zA-Z0-9]匹配a~z、A~Z和0~9范围内的字符注意连字符“-”只有在表示字符范围时才作为元字符来使用，其他情况下只表示一个本文字符。连字符“-”表示的范围遵循字符编码的顺序，如“a-z”“A-Z”“0-9”是合法的范围，“a-Z”“z-a”“a-9”是不合法的范围。下面通过代码演示常用的字符范围。varstr='beautiful风景!';console.log(str.match(/[abc]/g));

//输出结果为：(2)

['b','a']console.log(str.match(/[^a-z]/g));

//输出结果为：(4)

['','风','景','!']12.3.2字符类掌握正则表达式中反斜线的使用，能够灵活应用常见的预定义符

先定一个小目标！12.3.3反斜线当需要匹配的字符串中包含换行符、制表符和元字符时，就需要用到反斜线“\”。在正则表达式中，不仅可以使用反斜线“\”加一些具有特定含义的字符来进行特定匹配，而且可以将元字符转换为文本字符。使用反斜线“\”进行特定匹配的形式是一些常见模式的简写，被称为预定义符。12.3.3反斜线常见的预定义符如下表所示。预定义符说明\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]12.3.3反斜线>>续上一页表预定义符说明\f匹配一个换页符（formfeed）\b匹配单词分界符。如“\bg”可以匹配“bestgrade”，结果为“g”\B非单词分界符。如“\Bade”可以匹配“bestgrade”，结果为“ade”\t匹配一个水平制表符（horizontaltab）\n匹配一个换行符（linefeed）\xhh匹配ISO-8859-1值为hh（十六进制2位数）的字符，如“\x61”表示“a”12.3.3反斜线>>续上一页表预定义符说明\r匹配一个回车符（carriagereturn）\v匹配一个垂直制表符（verticaltab）\uhhhh匹配Unicode值为hhhh（十六进制4位数）的字符，如“\u597d”表示“好”12.3.3反斜线下面以“\d”和“\w”为例进行演示，示例代码如下。varstr='HelloWorld123';varreg1=/\d/g;varreg2=/\W/g;console.log(str.match(reg1));

//输出结果为：(3)

['1','2','3']console.log(str.match(reg2));

//输出结果为：['']12.3.3反斜线当需要匹配的字符是元字符时，在正则表达式中需要使用反斜线将元字符转换为文本字符。12.3.3反斜线注意当正则表达式是使用字面量的方式创建时，只需要使用一个反斜线将元字符转换为文本字符；当正则表达式是使用RegExp()构造函数的方式创建时，需要使用两个反斜线将元字符转换为文本字符。下面通过代码演示如何使用反斜线将元字符“^”“？”和“.”转换为文本字符。varreg=/\^/g;varreg1=/\?/g;varreg2=newRegExp('\\.','g');console.log('^a1b2'.match(reg));

//输出结果为：['^']console.log('a1?b2'.match(reg1));//输出结果为：['?']console.log('a1.b2'.match(reg2));//输出结果为：['.']12.3.3反斜线掌握正则表达式中点字符和限定符的使用，能够灵活应用点字符和限定符

先定一个小目标！12.3.4点字符和限定符在实际开发中，当需要匹配除换行符（\n）和回车符（\r）之外的任意单个字符时，可以在正则表达式中使用点字符“.”。当需要匹配某个连续出现的字符时，可以使用限定符。限定符包括“?”“+”“*”“{}”。12.3.4点字符和限定符点字符和限定符的说明如下表所示。字符说明.匹配除换行符和回车符之外的任意单个字符?匹配前面的字符零次或一次+匹配前面的字符一次或多次*匹配前面的字符零次或多次{n}匹配前面的字符n次{n,}匹配前面的字符最少n次{n,m}匹配前面的字符最少n次，最多m次12.3.4点字符和限定符下面通过代码演示如何使用点字符和限定符匹配h与t之间除换行符和回车符之外的任意单个字符，使用限定符匹配h与t之间的字符i。console.log('hit'.match(/h.t/g));

//输出结果为：['hit']console.log('hiit'.match(/hi?t/g));

//输出结果为：nullconsole.log('hiit'.match(/hi+t/g));

//输出结果为：['hiit']console.log('ht'.match(/hi*t/g));

//输出结果为：['ht']console.log('hit'.match(/hi{1}t/g));

//输出结果为：['hit']console.log('hiit'.match(/hi{1,}t/g));

//输出结果为：['hiit']console.log('hiiit'.match(/hi{1,3}t/g));

//输出结果为：['hiiit']12.3.4点字符和限定符当同时使用点字符和限定符时，可以实现匹配指定数量范围的任意字符。例如，正则表达式“/hello.*world/”可以匹配hello和world之间包含零个或多个任意字符（不包括换行符、回车符）的字符串。12.3.4点字符和限定符在实现指定数量范围的任意字符匹配时，支持贪婪匹配和懒惰匹配两种方式。贪婪匹配表示匹配尽可能多的字符，懒惰匹配表示匹配尽可能少的字符。正则表达式默认是贪婪匹配，当需要使用懒惰匹配时，可以在限定符的后面加上“?”。varstr='webWEB';varreg1=/w.*b/ig;

//贪婪匹配console.log(str.match(reg1));

//输出结果为：['webWEB']varreg2=/w.*?b/ig;

//懒惰匹配console.log(str.match(reg2));

//输出结果为：(2)

['web','WEB']12.3.4点字符和限定符掌握正则表达式中竖线和小括号的使用，能够灵活应用竖线和小括号匹配字符串

先定一个小目标！12.3.5竖线和小括号竖线“|”表示或，当需要匹配的字符串有多个条件时，可以在正则表达式中使用竖线“|”连接前后两个条件。例如，正则表达式“/hi|ha/g”表示匹配hi或ha，只要在给定的字符串中包含竖线“|”前后中一个，就会匹配成功。varreg=/hi|ha/g;console.log('shill'.match(reg));

//输出结果为：['hi']console.log('happy'.match(reg));

//输出结果为：['ha']12.3.5竖线和小括号在正则表达式中，使用小括号“()”可以对正则表达式进行分组，被小括号标注的内容称为子模式（或称为子表达式），一个子模式可以看作一个组。正则表达式中的小括号“()”主要有4个作用，分别是改变作用范围、捕获内容、反向引用和零宽断言。12.3.5竖线和小括号1.改变作用范围使用小括号“()”对内容进行分组后，小括号“()”中的竖线“|”将只对当前子模式有效，而不会作用于整个模式。限定符原本用于限定其前面的字符出现的次数，而分组后，则用于限定其前面的分组匹配到的内容出现的次数。12.3.5竖线和小括号下面通过代码演示如何通过小括号“()”改变作用范围。12.3.5竖线和小括号varreg1=/happy|te/; //可匹配的结果：happy、tevarreg2=/ha(ppy|te)/; //可匹配的结果：happy、hatevarreg3=/abc{2}/; //可匹配的结果：abccvarreg4=/a(bc){2}/; //可匹配的结果：abcbc2.捕获内容在正则表达式中，当子模式匹配到内容时，匹配到的内容会被临时保存，这个过程称为捕获。使用match()方法进行捕获时，返回结果中会包含子模式的匹配结果，示例代码如下。12.3.5竖线和小括号varreg=/Su(nny)/;console.log('Sunnyday'.match(reg));在实际开发中，如果不需要捕获子模式的匹配内容，可以在子模式前使用“?:”实现非捕获匹配，示例代码如下。12.3.5竖线和小括号varreg=/Su(?:nny)/;console.log('Sunnyday'.match(reg));3.反向引用当一个正则表达式被分组后，每个组将会自动分配一个组号用于代表每个子模式，组号按从左到右的顺序编号，第1个子模式的组号为1，第2个子模式的组号为2，以此类推。有组号后，可以在正则表达式的后半部分引用前半部分中的子模式的捕获结果，这种引用方式称为反向引用。反向引用的语法为“\组号”，例如，“\1”表示引用第1个子模式的捕获结果。12.3.5竖线和小括号下面以查找字符串中连续的3个相同数字为例进行演示，示例代码如下。12.3.5竖线和小括号varstr='133351234556668';varreg=/(\d)\1\1/g;varmatch=str.match(reg);console.log(match);

//输出结果为：(2)

['333','666']4.零宽断言零宽断言是指一种零宽度的子模式匹配，其中，零宽是指子模式匹配到的内容不会保存到匹配结果中，断言是指给子模式所在位置添加一个限定条件，用于规定此位置之前或者之后的内容必须满足限定条件才能使子模式匹配成功。12.3.5竖线和小括号零宽断言分为先行断言、先行否定断言、后行断言和后行否定断言，具体如下表所示。12.3.5竖线和小括号方式语法说明先行断言x(?=y)只有当x后面是y时，才匹配成功先行否定断言x(?!y)只有当x后面不是y时，才匹配成功后行断言(?<=y)x只有当x前面是y时，才匹配成功后行否定断言(?<!y)x只有当x前面不是y时，才匹配成功下面通过代码演示零宽断言的使用，示例代码如下。12.3.5竖线和小括号varreg1=/Countr(?=y)/g;varreg2=/Countr(?!y)/g;varreg3=/(?<=A)dmin/g;varreg4=/(?<!A)dmin/g;

//后行否定断言console.log('Country'.match(reg1));

//输出结果为：['Countr']console.log('Country'.match(reg2));

//输出结果为：nullconsole.log('Admin'.match(reg3));

//输出结果为：['dmin']console.log('Bdmin'.match(reg4));

//输出结果为：['dmin']正则表达式优先级多学一招在JavaScript中，除了运算符有优先级外，正则表达式也有优先级。在使用正则表达式时，元字符和文本字符会遵循优先级顺序。下面将正则表达式中各种符号按照优先级从高到低的顺序进行排列，具体如下。12.3.5竖线和小括号小括号()和非捕获括号(