JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第11、12章 JavaScript面向對象、正則表達式

第11章JavaScript面向對象《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target

了解面向過程與面向對象，能夠闡述面向過程與面向對象的區(qū)別熟悉面向對象的特征，能夠歸納面向對象的三大特征了解類與對象的概念，能夠闡述類與對象的區(qū)別掌握類的定義和繼承，能夠定義類及類中的屬性和方法、實現(xiàn)子類繼承父類學習目標/Target

掌握調用父類的方法，能夠使用super關鍵字調用父類的構造方法或普通方法

掌握原型對象的使用，能夠實現(xiàn)原型對象的訪問與使用了解成員查找機制，能夠描述成員查找的順序

熟悉原型鏈的相關知識，能夠繪制原型鏈學習目標/Target

掌握this指向的更改，能夠靈活應用apply()方法、call()方法和bind()方法更改this

指向

掌握錯誤處理的方式，能夠通過try…catch語句處理錯誤

了解錯誤類型，能夠列舉常見的錯誤類型

掌握錯誤對象的拋出，能夠在程序出錯時拋出錯誤對象

了解錯誤對象的傳遞，能夠列舉錯誤對象的傳遞方式章節(jié)概述/Summary面向對象（ObjectOriented）是軟件開發(fā)的一種編程思想，被廣泛應用于數據庫系統(tǒng)、交互式界面、應用結構、應用平臺、分布式系統(tǒng)、網絡管理結構、CAD（ComputerAidedDesign，計算機輔助設計）技術、人工智能等領域。在實際開發(fā)中，使用面向對象編程不僅可以使項目的結構更加清晰，而且可以使代碼更易維護和更新。本章將詳細講解JavaScript面向對象。目錄/Contents11.111.211.3面向對象概述類與對象概述原型11.4更改this指向11.5錯誤處理面向對象概述11.1了解面向過程與面向對象，能夠闡述面向過程與面向對象的區(qū)別

先定一個小目標！11.1.1面向過程與面向對象的區(qū)別11.1.1面向過程與面向對象的區(qū)別當使用面向過程與面向對象思想解決問題時，面向過程的重點在于過程，也就是分析出解決問題需要的步驟，然后按照步驟逐步執(zhí)行。面向過程的缺點在于，當步驟過多時，程序會變得復雜，代碼的可復用性差，一旦步驟發(fā)生修改，就容易出現(xiàn)牽一發(fā)而動全身的情況。面向對象則是把問題分解為多個對象，這些對象可以完成它們各自負責的工作，只需要發(fā)出指令，就可以讓這些對象去完成實際的操作。相比面向過程，面向對象可以讓開發(fā)者從復雜的步驟中解放出來，讓一個團隊能更好地分工協(xié)作。11.1.1面向過程與面向對象的區(qū)別下面對比面向對象和面向過程的區(qū)別，具體如下表所示。分類優(yōu)點缺點面向過程代碼無浪費，無額外開銷，適合對性能要求極其苛刻的情況和項目規(guī)模非常小、功能非常少的情況不易維護、復用和擴展面向對象易維護、易復用和易擴展，適合業(yè)務邏輯復雜的大型項目增加了額外的開銷11.1.1面向過程與面向對象的區(qū)別熟悉面向對象的特征，能夠歸納面向對象的三大特征

先定一個小目標！11.1.2面向對象的特征1.封裝封裝是指隱藏內部的實現(xiàn)細節(jié)，只對外開放操作接口。接口是對象開放的屬性和方法，無論對象的內部多么復雜，用戶只需知道這些接口怎么使用即可，而不需要知道內部的實現(xiàn)細節(jié)。封裝有利于對象的修改和升級，無論一個對象內部的代碼經過了多少次修改，只要不改變接口，就不會影響到使用這個對象時編寫的代碼。11.1.2面向對象的特征2.繼承繼承是指一個對象繼承另一個對象的成員，從而在不改變另一個對象的前提下進行擴展。例如，貓和犬都屬于動物，在程序中可以描述貓和犬繼承自動物。同理，波斯貓和巴厘貓都繼承自貓科，沙皮犬和斑點犬都繼承自犬科，它們之間的繼承關系如下圖所示。11.1.2面向對象的特征在實際開發(fā)中，使用繼承不僅可以在保持接口兼容的前提下對功能進行擴展，而且可以增強代碼的復用性，為程序的修改和補充提供便利。11.1.2面向對象的特征3.多態(tài)多態(tài)是指同一個操作作用于不同的對象，會產生不同的執(zhí)行結果。例如，項目中有視頻對象、音頻對象、圖片對象，用戶在對這些對象進行增、刪、改、查操作時，如果這些接口的命名、用法都是相同的，用戶的學習成本就會很低，如果每種對象都有一套對應的接口，則用戶就需要學習每一種對象的使用方法，學習成本高。11.1.2面向對象的特征實際上JavaScript被設計為一種弱類型語言（即一個變量可以存儲任意類型的數據），就是多態(tài)的體現(xiàn)。例如，數字、數組、函數都具有toString()方法，當使用不同的對象調用該方法時，執(zhí)行結果不同，示例代碼如下。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面向對象的特征在面向對象中，多態(tài)的實現(xiàn)往往離不開繼承，這是因為多個對象繼承同一個對象后，就獲取了相同的方法，然后可以根據每個對象的特點來改變同名方法的執(zhí)行結果。11.1.2面向對象的特征雖然面向對象具有封裝、繼承和多態(tài)的特征，但并不代表只要滿足這些特征就可以設計出優(yōu)秀的程序，開發(fā)人員還需要考慮如何合理地運用這些特征。例如，在封裝時，如何給外部調用者提供完整且最小的接口，使外部調用者可以順利得到想要的功能，而不需要研究其內部的細節(jié)；在進行繼承和多態(tài)設計時，如何為同類對象設計一套相同的方法進行操作等。11.1.2面向對象的特征類與對象概述11.2了解類與對象的概念，能夠闡述類與對象的區(qū)別11.2.1類與對象

先定一個小目標！假如開發(fā)一個學生管理系統(tǒng)，系統(tǒng)中每個學生都是一個對象，每個學生都有姓名、學號等屬性，并且每個學生可能會有一些相同的方法，例如唱歌、跳舞等。為了方便創(chuàng)建這樣的對象，JavaScript提供了構造函數。11.2.1類與對象然而，在Java等主流的面向對象語言中，是通過類創(chuàng)建對象的，語法相比JavaScript有較大差別。為了符合面向對象的編程習慣，JavaScript從ECMAScript6.0開始，也新增了類的語法。11.2.1類與對象類是指創(chuàng)建對象的模板，類的作用是將對象的特征抽取出來，形成一段代碼，通過這段代碼可以創(chuàng)建出同一類的對象。例如，開發(fā)學生管理系統(tǒng)時，可以創(chuàng)建一個學生類，將學生的共同特征寫在類中，然后通過類創(chuàng)建出所需的學生對象。創(chuàng)建同類對象的意義是這些對象擁有相同的屬性名和方法名，即擁有相同的特征，在使用對象時，只需要記住同類對象的屬性名和方法名，而不需要區(qū)分每個對象。11.2.1類與對象在面向對象開發(fā)中，首先需要分析項目中有哪些對象，然后分析這些對象的共同特征，即共有的屬性和方法，將這些共同特征抽取出來，創(chuàng)建成類，最后通過實例化對象，實現(xiàn)項目的各個功能。11.2.1類與對象掌握類的定義和繼承，能夠定義類及類中的屬性和方法、實現(xiàn)子類繼承父類11.2.2類的定義和繼承

先定一個小目標！1.類的定義在ECMAScript6.0中，使用class關鍵字可以定義一個類，在命名習慣上，類名使用首字母大寫的駝峰命名法，在類中可以定義constructor()構造方法，用于初始化對象的成員，該構造方法在使用類創(chuàng)建對象時會自動調用，在調用時會傳入實例化的參數。11.2.2類的定義和繼承下面以定義Student類為例演示類的定義。<script>

//定義類

classStudent{

constructor(name){

//構造方法

=name;

//為新創(chuàng)建的對象添加name屬性

}

}

//使用類創(chuàng)建對象

varstu1=newStudent('小明');

varstu2=newStudent('小智');

console.log(stu1); //輸出結果為：Student

{name:'小明'}

console.log(stu2); //輸出結果為：Student

{name:'小智'}</script>11.2.2類的定義和繼承2.類的繼承在JavaScript中，子類可以繼承父類的屬性和方法，繼承之后，子類還可以擁有獨有的屬性和方法。在ECMAScript6.0中，子類繼承父類的屬性或方法可以通過extends關鍵字實現(xiàn)，示例代碼如下。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關鍵字實現(xiàn)。11.2.3調用父類的方法1.調用父類的構造方法當子類繼承父類后，若需要在子類的構造方法中調用父類的構造方法，可以使用super()函數調用。11.2.3調用父類的方法若需要在子類的方法中調用父類的普通方法，可以使用super對象。需要說明的是，如果子類想要繼承父類的方法，同時在自己內部擴展自己的方法，使用super關鍵字調用父類的構造方法時，super必須在子類的this之前調用。2.調用父類的普通方法原型11.3掌握原型對象的使用，能夠實現(xiàn)原型對象的訪問與使用

先定一個小目標！11.3.1原型對象構造函數是使用function關鍵字聲明的，并在內部使用this關鍵字為對象添加屬性和方法；而類是使用class關鍵字聲明的，類中的成員屬性和方法使用constructor()方法進行定義。11.3.1原型對象雖然使用構造函數和類都能創(chuàng)建對象，但是兩者創(chuàng)建對象的方式有所不同。當使用類創(chuàng)建多個對象時，多個對象的方法都是共享的，而使用構造函數創(chuàng)建多個對象時，每個對象都保存了自己的方法。為了使構造函數創(chuàng)建的對象能夠實現(xiàn)方法共享，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('你好！');};使用構造函數創(chuàng)建的對象，不能實現(xiàn)方法共享。如果想要實現(xiàn)方法共享，可以將方法定義在原型對象中，當實例對象調用方法時就會訪問原型對象的方法。11.3.1原型對象11.3.1原型對象傳統(tǒng)的繼承方式多學一招在ECMAScript6.0之前，JavaScript中并沒有類的概念，在沒有類的情況下，可以使用4種傳統(tǒng)的方式實現(xiàn)繼承。下面分別介紹JavaScript中4種傳統(tǒng)的繼承方式。11.3.1原型對象多學一招1.使用原型對象實現(xiàn)繼承如果一個對象中本來沒有某個屬性和方法，但是可以從原型對象中獲取，就會繼承對象的屬性和方法。2.替換原型對象實現(xiàn)繼承在JavaScript中，可以將構造函數的原型對象替換為另一個對象，基于構造函數創(chuàng)建的對象就會繼承新的原型對象。注意在基于構造函數創(chuàng)建對象時，代碼應寫在替換原型對象之后，否則創(chuàng)建的對象仍然會繼承原來的原型對象。11.3.1原型對象多學一招3.使用Object.create()實現(xiàn)繼承Object對象的create()方法用于創(chuàng)建一個新對象，該方法的參數表示將新對象的prototype指向指定的對象。4.混入繼承混入繼承是將一個對象成員加入另一個對象中，實現(xiàn)對象功能的擴展。實現(xiàn)混入繼承的方法是將一個對象的成員賦值給另一個對象。了解成員查找機制，能夠描述成員查找的順序

先定一個小目標！11.3.2成員查找機制當訪問一個實例對象的成員時，JavaScript首先會判斷實例對象是否擁有這個成員，如果實例對象擁有這個成員，則直接使用，否則將會在原型對象中搜索這個成員。如果原型對象中有這個成員，就使用該成員，否則繼續(xù)在原型對象的原型對象中查找。如果按照這個順序沒有查找到，則返回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);如果繼續(xù)訪問Ototype的原型對象，則結果為null，示例代碼如下。console.log(Ototype.__proto__);11.3.3原型鏈4.繪制原型鏈通過前面的分析，可以將原型鏈的結構總結為以下4點。每個構造函數都有一個prototype屬性指向原型對象。原型對象通過constructor屬性指回構造函數。通過構造函數創(chuàng)建的實例對象通過__proto__屬性可以訪問原型對象。原型對象可以通過__proto__屬性訪問原型對象的原型對象，即Object原型對象，再繼續(xù)訪問，__proto__屬性值為null。11.3.3原型鏈下面根據原型鏈的結構總結繪制原型鏈的結構圖，如下圖所示。函數的構造函數多學一招在JavaScript中，函數也屬于對象類型，也擁有屬性和方法。通過constructor屬性可以訪問函數的構造函數。實際上函數的構造函數是Function()函數，F(xiàn)unction()函數的構造函數是它本身。下面通過代碼演示如何訪問函數的構造函數。11.3.3原型鏈functionStudent(){}console.log(Student.constructor);

//輸出結果為：?Function(){[nativecode]}console.log(Function.constructor);

//輸出結果為：?Function(){[nativecode]}多學一招此外，通過實例化Function()構造函數可以創(chuàng)建函數，語法格式如下。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原型鏈掌握利用原型對象擴展數組方法的案例，能夠編寫代碼實現(xiàn)案例

先定一個小目標！11.3.4【案例】利用原型對象擴展數組方法本案例將實現(xiàn)擴展Array()數組對象操作方法，為數組對象添加sum()方法，實現(xiàn)數組元素的求和。根據成員查找機制，當對象不存在某個屬性或方法時，將會到該對象的原型對象中進行查找，因此可以將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程序中發(fā)生錯誤的情況。varo={};o.func();console.log('test');11.5.1錯誤處理的方式當發(fā)生錯誤時，JavaScript引擎會拋出一個錯誤對象，使用try…catch語句可以對錯誤對象進行捕獲，捕獲后可以查看錯誤信息。try…catch語句的語法格式如下。try{//在try中編寫可能出現(xiàn)錯誤的代碼}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種錯誤類型，當發(fā)生錯誤時，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處理函數時出現(xiàn)下面通過代碼演示存在語法錯誤的情況。

<script>

try{

varo={;};

//語法錯誤

}catch(e){

console.log(e.message);

}</script>11.5.2錯誤類型注意在通過try…catch語句處理錯誤時，無法處理語法錯誤（SyntaxError），如果程序存在語法錯誤，則整個代碼都無法執(zhí)行。掌握錯誤對象的拋出，能夠在程序出錯時拋出錯誤對象

先定一個小目標！11.5.3錯誤對象的拋出當JavaScript程序出現(xiàn)錯誤時，程序會自動拋出錯誤對象，錯誤對象中保存了錯誤出現(xiàn)的位置、錯誤的類型、錯誤信息等數據。錯誤對象會傳遞給catch語句，通過catch(e)的方式來接收，其中e是變量名，表示錯誤對象，變量名可以自定義。11.5.3錯誤對象的拋出除了由程序自動拋出錯誤對象，用戶也可以使用throw關鍵字手動拋出錯誤對象。錯誤對象需要先通過Error()構造函數創(chuàng)建，然后使用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中的代碼調用了其他函數時，如果在其他函數中出現(xiàn)了錯誤，并且沒有使用try…catch語句處理，程序就會停下來，將錯誤對象傳遞到調用當前函數的上一層函數，如果上一層函數仍然沒有處理，則繼續(xù)向上傳遞。本章小結本章主要講解了JavaScript面向對象的相關知識，首先講解了面向過程與面向對象的區(qū)別、面向對象的特征，然后講解了類與對象、類的定義和繼承、調用父類的方法，最后講解了原型、更改this指向和錯誤處理，在原型中主要講解了原型對象、成員查找機制和原型鏈，在錯誤處理中主要講解了錯誤處理的方式、錯誤類型、錯誤對象的拋出和錯誤對象的傳遞。通過本章的學習，讀者應能夠使用面向對象思想實現(xiàn)項目的開發(fā)。本章小結第12章正則表達式《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target

了解正則表達式，能夠描述正則表達式的概念和作用

掌握正則表達式的使用，能夠使用正則表達式匹配字符串掌握正則表達式中元字符的使用，能夠根據實際需求選擇合適的元字符

掌握正則表達式常用方法，能夠實現(xiàn)字符串的匹配、分割和替換章節(jié)概述/Summary在實際開發(fā)中，經常需要對文本內容進行搜索、查找、匹配、分割和替換等操作，正則表達式提供了簡單的語法，可以高效完成這些操作。例如，可以使用正則表達式驗證用戶在表單中輸入的數據格式，如用戶名、密碼、手機號、身份證號等的格式。此外，在處理字符串、數組、對象等數據類型時，正則表達式也可以提供數據匹配、分割、替換等操作。本章將對正則表達式進行詳細講解。目錄/Contents12.112.212.3認識正則表達式使用正則表達式正則表達式中的元字符12.4正則表達式常用方法認識正則表達式12.1了解正則表達式，能夠描述正則表達式的概念和作用

先定一個小目標！12.1認識正則表達式正則表達式（RegularExpression）是一種描述字符串規(guī)律的表達式，用于匹配字符串中的特定內容。正則表達式的語法靈活、匹配能力強大，可以使用各種符號、特殊字符匹配復雜的字符串。12.1認識正則表達式在實際開發(fā)中，正則表達式通常被用于匹配或替換符合某個規(guī)律的文本，例如，用戶在某個網站中注冊賬號時，網站要求用戶的賬號由11位有效手機號組成，網站的開發(fā)人員在對用戶的賬號進行格式驗證時，就會使用正則表達式。12.1認識正則表達式在JavaScript中，正則表達式是一種對象。創(chuàng)建正則表達式的方式有兩種，一種是使用字面量創(chuàng)建，另一種是使用RegExp()構造函數創(chuàng)建。12.1認識正則表達式使用字面量創(chuàng)建正則表達式的語法格式如下。12.1認識正則表達式/pattern/flags使用RegExp()構造函數創(chuàng)建正則表達式的語法格式如下。newRegExp(pattern[,flags])下面分別對元字符、文本字符和模式修飾符進行簡單的介紹。12.1認識正則表達式元字符：具有特殊含義的字符，例如，元字符“.”表示匹配除換行符、回車符之外的任意單個字符，元字符“*”表示匹配前面的字符0次或多次。文本字符：又稱為原義字符，它沒有特殊含義，用于表示原本的字符。例如，“a”表示字符a，“1”表示字符1。模式修飾符：用于指定額外的匹配策略，如果不需要指定額外的匹配策略，則模式修飾符可以省略。例如，“i”表示忽略大小寫；“g”表示全局匹配；“m”表示多行匹配；“s”表示允許點字符“.”匹配換行符和回車符；“u”表示使用Unicode模式進行匹配；“y”表示執(zhí)行黏性搜索，匹配從目標字符串的當前位置開始。下面通過代碼演示正則表達式的創(chuàng)建。12.1認識正則表達式//使用字面量創(chuàng)建正則表達式varreg=/ab/i;//使用RegExp()構造函數創(chuàng)建正則表達式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個符合正則表達式的內容后繼續(xù)向后匹配。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字符類字符類是一個字符集合，在實際開發(fā)中，有時需要匹配特定范圍內的字符，例如，匹配a~z范圍內的字符，可以使用中括號“[]”實現(xiàn)范圍匹配。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反斜線>>續(xù)上一頁表預定義符說明\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反斜線>>續(xù)上一頁表預定義符說明\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反斜線注意當正則表達式是使用字面量的方式創(chuàng)建時，只需要使用一個反斜線將元字符轉換為文本字符；當正則表達式是使用RegExp()構造函數的方式創(chuàng)建時，需要使用兩個反斜線將元字符轉換為文本字符。下面通過代碼演示如何使用反斜線將元字符“^”“？”和“.”轉換為文本字符。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點字符和限定符在實際開發(fā)中，當需要匹配除換行符（\n）和回車符（\r）之外的任意單個字符時，可以在正則表達式中使用點字符“.”。當需要匹配某個連續(xù)出現(xiàn)的字符時，可以使用限定符。限定符包括“?”“+”“*”“{}”。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點字符和限定符當同時使用點字符和限定符時，可以實現(xiàn)匹配指定數量范圍的任意字符。例如，正則表達式“/hello.*world/”可以匹配hello和world之間包含零個或多個任意字符（不包括換行符、回車符）的字符串。12.3.4點字符和限定符在實現(xiàn)指定數量范圍的任意字符匹配時，支持貪婪匹配和懶惰匹配兩種方式。貪婪匹配表示匹配盡可能多的字符，懶惰匹配表示匹配盡可能少的字符。正則表達式默認是貪婪匹配，當需要使用懶惰匹配時，可以在限定符的后面加上“?”。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.改變作用范圍使用小括號“()”對內容進行分組后，小括號“()”中的豎線“|”將只對當前子模式有效，而不會作用于整個模式。限定符原本用于限定其前面的字符出現(xiàn)的次數，而分組后，則用于限定其前面的分組匹配到的內容出現(xiàn)的次數。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));在實際開發(fā)中，如果不需要捕獲子模式的匹配內容，可以在子模式前使用“?:”實現(xiàn)非捕獲匹配，示例代碼如下。12.3.5豎線和小括號varreg=/Su(?:nny)/;console.log('Sunnyday'.match(reg));3.反向引用當一個正則表達式被分組后，每個組將會自動分配一個組號用于代表每個子模式，組號按從左到右的順序編號，第1個子模式的組號為1，第2個子模式的組號為2，以此類推。有組號后，可以在正則表達式的后半部分引用前半部分中的子模式的捕獲結果，這種引用方式稱為反向引用。反向引用的語法為“\組號”，例如，“\1”表示引用第1個子模式的捕獲結果。12.3.5豎線和小括號下面以查找字符串中連續(xù)的3個相同數字為例進行演示，示例代碼如下。12.3.5豎線和小括號varstr='133351234556668';varreg=/(\d)\1\1/g;varmatch=str.match(reg);console.log(match);

//輸出結果為：(2)

['333','666']4.零寬斷言零寬斷言是指一種零寬度的子模式匹配，其中，零寬是指子模式匹配到的內容不會保存到匹配結果中，斷言是指給子模式所在位置添加一個限定條件，用于規(guī)定此位置之前或者之后的內容必須滿足限定條件才能使子模式匹配成功。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']正則表達式優(yōu)先級多學一招在JavaScript中，除了運算符有優(yōu)先級外，正則表達式也有優(yōu)先級。在使用正則表達式時，元字符和文本字符會遵循優(yōu)先級順序。下面將正則表達式中各種符號按照優(yōu)先級從高到低的順序進行排列，具體如下。12.3.5豎線和小括號小括號()和非捕獲括號(