JavaScript對象編程及應(yīng)用時間：匯報人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動式教程1.JavaScript的字符串對象及方法2.JavaScript的數(shù)值對象及方法3.JavaScript的日期對象及方法4.JavaScript的數(shù)組對象及方法5.JavaScript的自定義對象6.ES6使用class構(gòu)造對象7.JavaScript的this指針8.JavaScript的正則表達(dá)式與應(yīng)用9.JavaScript的RegExp對象及其方法10.支持正則表達(dá)式的String對象的方法目錄JavaScript的字符串對象（String對象）是存儲0個、1個或多個字符的變量，如"Good"。JavaScript字符串用于存儲和操作文本，字符串是用引號括起來的0個、1個或多個字符。1．定義（創(chuàng)建）JavaScript字符串的語法格式JavaScript字符串可以使用單引號（''）或雙引號（""）包圍。也可以在字符串中使用引號，只要該引號不同于包圍字符串的引號即可。（1）通過字面方式定義字符串例如：varanswer="Nicetomeetyou!";varanswer="Heiscalled'常勝'";varstuName1="安靜";typeofstuName1//將返回stringJavaScript的字符串對象及方法（2）通過關(guān)鍵字new將字符串定義為對象例如：varstuName2=newString("安靜")typeofstuName2//將返回object建議不要把字符串定義為對象，因為new關(guān)鍵字會使代碼復(fù)雜化，也會拖慢代碼的執(zhí)行速度，還可能會產(chǎn)生一些意想不到的結(jié)果。當(dāng)使用“==”運算符時，兩個相同的字符串的運算結(jié)果為true，例如，(stuName1==stuName2)的運算結(jié)果為true，因為字符串變量stuName1和stuName2的值相等。當(dāng)使用“===”運算符時，兩個相同的字符串的運算結(jié)果不一定為true，因為“===”運算符同時需要類型相同和值相等。只有當(dāng)兩個字符串的類型相同和值相等時，運算結(jié)果才為true；如果僅有值相等，類型不同，則運算結(jié)果為false，例如，(stuName1===stuName2)的運算結(jié)果為false，因為字符串變量stuName1和stuName2的值相等，但類型不同，stuName1的類型為string，stuName2的類型為object。另外，JavaScript對象無法進行對比，比較兩個JavaScript對象時將始終返回false。JavaScript的字符串對象及方法2．轉(zhuǎn)義字符及其應(yīng)用如果需要在字符串中使用單引號（''）、雙引號（""）或反斜杠（\），則可以通過使用以反斜杠開頭的轉(zhuǎn)義字符實現(xiàn)。反斜杠轉(zhuǎn)義字符可以把特殊字符轉(zhuǎn)換為字符串中的字符.JavaScript的字符串對象及方法轉(zhuǎn)義字符輸出形式功能描述\''單引號\""雙引號\\\反斜杠\b（見功能描述）退格鍵\f（見功能描述）換頁符\n（見功能描述）換行符\r（見功能描述）回車符\t（見功能描述）水平制表符\v（見功能描述）垂直制表符JavaScript中的轉(zhuǎn)義字符從表中可以看出，\"表示在字符串中插入雙引號，\'表示在字符串中插入單引號，\\表示在字符串中插入反斜杠。例如：varstr='It\'sgoodtoseeyouagain';varx="字符\\被稱為反斜杠。"3．String對象的方法或?qū)傩訨avaScript的字符串對象及方法3．String對象的方法或?qū)傩訨avaScript的字符串對象及方法3．String對象的方法或?qū)傩訨avaScript的字符串對象及方法3．String對象的方法或?qū)傩訨avaScript的字符串對象及方法String對象的substring()方法和substr()方法的區(qū)別如下。String對象的substring()方法的一般形式為substring(start,end)，用于從字符串中截取子字符串，它的兩個參數(shù)分別是截取子字符串的起始字符和終止字符的索引值，截取的子字符串不包含索引值較大的參數(shù)對應(yīng)的字符。若忽略indexEnd，則字符串的末尾字符是終止值。若indexStart=indexEnd，則返回空字符串。String對象的substr()方法的一般形式為substr(start,length)，用于從start索引開始，向后截取length個字符。若省略length，則一直截取到字符串結(jié)尾；若length設(shè)定的值大于字符串的長度，則返回從起始字符到字符串結(jié)尾的子字符串。JavaScript的字符串對象及方法4．JavaScript字符串模板字符串模板的字面量使用反引號(``)而不是引號("")來定義字符串，在輸入英文字母狀態(tài)下按【Esc】鍵下方那個鍵（即【`】）即可輸入反引號。例如：letstr=`HelloWorld!`;（1）字符串內(nèi)的引號通過使用字符串模板的字面量，可以在字符串中同時使用單引號和雙引號。例如：lettext=`He'softencalled"Ginny"`;（2）多行字符串字符串模板的字面量允許輸入多行字符串。（3）插值字符串模板的字面量提供了一種將變量和表達(dá)式插入字符串的簡單方法，該方法稱為字符串插值（StringInterpolation）。語法格式如下。${...}①變量替換：字符串模板的字面量允許字符串中出現(xiàn)變量。②表達(dá)式替換：字符串模板的字面量允許字符串中出現(xiàn)表達(dá)式。例：代碼如下。letuserName="向陽";document.write(`歡迎${userName}登錄!`);document.write("<br>");letprice=9.5;letnum=20;document.write(`金額為：${price*num}`);數(shù)值對象（Math對象）包含用于各種數(shù)學(xué)運算的屬性和方法，Math對象的內(nèi)置方法可以在不使用構(gòu)造函數(shù)創(chuàng)建對象時直接調(diào)用，調(diào)用形式為Math.數(shù)學(xué)函數(shù)(參數(shù))。例如，計算cos(π/6)的表達(dá)式可以寫為Math.cos(Math.PI/6)。1．Math屬性（常量）JavaScript提供8種可由Math對象訪問的數(shù)值（常量）。（1）歐拉指數(shù)：Math.E。（2）圓周率：Math.PI。（3）2的平方根：Math.SQRT2。（4）1/2的平方根：Math.SQRT1_2。（5）2的自然對數(shù)：Math.LN2。（6）10的自然對數(shù)：Math.LN10。（7）以2為底的e的對數(shù)：Math.LOG2E。（8）以10為底的e的對數(shù)：Math.LOG10E。JavaScript的數(shù)值對象及方法2．Math對象通常JavaScript的數(shù)值是通過字面量創(chuàng)建的原始值，也可以通過關(guān)鍵字new定義為對象。例如：varx=123; //typeofx返回numbervary=newNumber(123); //typeofy返回object建議不要創(chuàng)建數(shù)值對象，否則會拖慢程序的執(zhí)行速度，new關(guān)鍵字也會使代碼復(fù)雜化，并產(chǎn)生某些無法預(yù)料的結(jié)果。當(dāng)使用“==”運算符時，只要值相等，數(shù)值的比較結(jié)果就相等。當(dāng)使用“===”運算符時，相等的數(shù)可能變得不相等，因為“===”運算符同時需要滿足類型相同和值相等兩個條件。例：代碼如下。varx=500;vary=newNumber(500);document.write(x==y);//(x==y)的運算結(jié)果為true，因為x和y有相等的值document.write("<br>");document.write(x===y);//(x===y)的運算結(jié)果為false，因為x和y的類型不同此外，JavaScript對象之間無法進行比較。JavaScript的數(shù)值對象及方法3．Math對象的函數(shù)除了可以被Math對象訪問的數(shù)值，Math對象還有多個函數(shù)可以使用，如表5-3所示。JavaScript的數(shù)值對象及方法4．JavaScript的Math方法JavaScript的所有Math方法都可用于任意類型的數(shù)值，包括字面量、變量或表達(dá)式。（1）toString()方法toString()方法以字符串方式返回數(shù)值。例：代碼如下。varx=123;x.toString(); //根據(jù)變量x返回123(123).toString(); //根據(jù)文本123返回123(100+23).toString(); //根據(jù)表達(dá)式100+23返回123（2）toFixed()方法toFixed()方法用于返回字符串值，返回值包含指定小數(shù)位數(shù)的數(shù)值。例：代碼如下。varx=9.656;x.toFixed(0); //返回10x.toFixed(2); //返回9.66x.toFixed(4); //返回9.6560JavaScript的數(shù)值對象及方法（3）toPrecision()方法toPrecision()用于返回字符串值，返回值包含指定長度的數(shù)值。例：代碼如下。varx=9.656;x.toPrecision(); //返回9.656x.toPrecision(2); //返回9.7x.toPrecision(4); //返回9.656x.toPrecision(5); //返回9.6560（4）valueOf()方法所有JavaScript數(shù)據(jù)類型都有valueOf()和toString()方法，其中valueOf()以數(shù)值方式返回。例：代碼如下。varx=123;x.valueOf(); //根據(jù)變量x返回123(123).valueOf(); //根據(jù)文本123返回123(100+23).valueOf(); //根據(jù)表達(dá)式100+23返回123JavaScript的數(shù)值對象及方法5．JavaScript的全局方法JavaScript的全局方法可用于所有JavaScript數(shù)據(jù)類型。（1）Number()方法Number()方法用于把JavaScript變量轉(zhuǎn)換為數(shù)值，如果無法轉(zhuǎn)換為數(shù)值，則返回NaN。例：代碼如下。x=true;Number(x); //返回1x=false;Number(x); //返回0x="10"Number(x); //返回10x="1020"Number(x); //返回NaNJavaScript的數(shù)值對象及方法Number()方法還可以把日期轉(zhuǎn)換為數(shù)值。例：代碼如下。d1=newDate();Number(d1); //返回日期對應(yīng)的數(shù)值d2=newDate("2024-10-16")Number(d2); 上述代碼中的Number()方法用于返回1970年1月1日至2024年10月16日的毫秒數(shù)。（2）parseInt()方法parseInt()方法用于解析一段字符串并返回數(shù)值，允許字符串包含空格，并且只返回首個整數(shù)，如果字符串無法轉(zhuǎn)換為數(shù)值，則返回NaN。例：代碼如下。parseInt("10"); //返回10parseInt("10.33"); //返回10parseInt("102030"); //返回10parseInt("10years"); //返回10parseInt("years10"); //返回NaNJavaScript的數(shù)值對象及方法（3）parseFloat()方法parseFloat()方法用于解析一段字符串并返回數(shù)值，允許字符串包含空格，并且只返回首個數(shù)字型數(shù)據(jù)，如果無法轉(zhuǎn)換為數(shù)值，則返回NaN?！揪幊逃?xùn)練】【示例5-10】demo0510.html代碼如下。parseFloat("10"); //返回10parseFloat("10.33"); //返回10.33parseFloat("102030"); //返回10parseFloat("10years"); //返回10parseFloat("years10"); //返回NaN數(shù)。日期對象（Date對象）主要用于從系統(tǒng)中獲得當(dāng)前的日期和時間、設(shè)置當(dāng)前日期和時間、將時間和日期與字符串進行轉(zhuǎn)換等操作。1．JavaScript的日期格式JavaScript將日期存儲為自1970年1月1日00:00:00UTC以來的毫秒數(shù)，零時間為1970年1月1日00:00:00UTC，現(xiàn)在的時間則為1970年1月1日之后的毫秒數(shù)。UTC（UniversalTimeCoordinated，世界協(xié)調(diào)時）又稱世界統(tǒng)一時間、世界標(biāo)準(zhǔn)時間、國際協(xié)調(diào)時間。UTC等同于GMT（GreenwichMeanTime，格林尼治標(biāo)準(zhǔn)時）。默認(rèn)情況下，JavaScript將使用瀏覽器的時區(qū)信息并將日期顯示為文本字符串，例如：SatOct15202406:28:24GMT+0800(中國標(biāo)準(zhǔn)時間)在設(shè)置日期時，如果不規(guī)定時區(qū)，則JavaScript會使用瀏覽器的時區(qū)信息。當(dāng)獲取日期時，如果不規(guī)定時區(qū)，則結(jié)果會被轉(zhuǎn)換為瀏覽器的時區(qū)信息對應(yīng)的日期。JavaScript的日期對象及方法（1）ISO日期格式ISO8601是表示日期和時間的國際標(biāo)準(zhǔn)，ISO8601的日期格式（YYYY-MM-DD）也是JavaScript首選的日期格式。①完整日期，例如：vard=newDate("2024-10-16");②指定年和月，例如：vard=newDate("2024-10");③只指定年，例如：vard=newDate("2024");④使用完整日期加時、分和秒，例如：vard=newDate("2024-10-16T09:18:00");日期和時間使用大寫字母T來分隔，UTC時間使用大寫字母Z來定義。當(dāng)在日期-時間字符串中省略T或Z時，不同瀏覽器中會產(chǎn)生不同結(jié)果。JavaScript的日期對象及方法（2）短日期格式短日期通常使用“MM/DD/YYYY”這樣的語法格式，例如：vard=newDate("10/16/2024");（3）長日期格式長日期通常使用“MMMDDYYYY”這樣的語法格式，例如：vard=newDate("Oct162024");長日期格式有以下特點。①月和天能夠以任意順序出現(xiàn)，例如：vard=newDate("16Oct2024");②月能夠以全稱或縮寫表示，例如：vard=newDate("16October2024");③對字母大小寫不敏感，例如：vard=newDate("16OCT2024");（4）完整日期格式JavaScript接收“完整JavaScript格式”的日期字符串，并且會忽略該字符串中輕微的格式錯誤。例如：vard=newDate("SunOct16202409:18:00GMT+0800(中國標(biāo)準(zhǔn)時間)");JavaScript的日期對象及方法2．定義日期Date對象用于處理日期和時間，可以通過new關(guān)鍵字來定義Date對象。（1）使用newDate()創(chuàng)建Date對象newDate()使用當(dāng)前日期和時間創(chuàng)建新的Date對象。以下代碼定義了名稱為d的Date對象。vard=newDate();（2）使用newDate(year,month,day,hours,minutes,seconds,milliseconds)創(chuàng)建Date對象newDate(year,month,day,hours,minutes,seconds,milliseconds)用指定的日期和時間創(chuàng)建新的Date對象，這7個參數(shù)按順序分別用于指定年、月、日、小時、分鐘、秒和毫秒，例如：vard=newDate(2024,10,16,09,18,30,0);JavaScript的日期對象及方法Date對象自動使用當(dāng)前的日期和時間作為其初始值。使用newDate(year,month,day,hours,minutes,seconds,milliseconds)創(chuàng)建Date對象時，毫秒、秒、分鐘、小時、日允許省略，年和月不允許省略。如果指定6個參數(shù)，則要指定年、月、日、小時、分鐘、秒；如果指定5個參數(shù)，則要指定年、月、日、小時和分鐘；如果指定4個參數(shù)，則要指定年、月、日和小時；如果指定3個參數(shù)，則要指定年、月和日；如果指定2個參數(shù)，則要指定年和月；如果只提供1個參數(shù)，則將其視為毫秒數(shù)。（3）使用newDate(dateString)創(chuàng)建Date對象newDate(dateString)用日期字符串創(chuàng)建一個新的Date對象，例如：vard=newDate("October16,202409:18:00");（4）使用newDate(milliseconds)創(chuàng)建Date對象newDate(milliseconds)用于基于毫秒數(shù)創(chuàng)建一個新的Date對象。以下代碼創(chuàng)建的日期為ThurJan01197008:00:00GMT+0800(中國標(biāo)準(zhǔn)時間)。vard=newDate(0);//創(chuàng)建一個零時加毫秒的Date對象以下代碼創(chuàng)建的日期為FriJan02197008:00:00GMT+0800(中國標(biāo)準(zhǔn)時間)。vard=newDate(86400000);//創(chuàng)建一個1970年1月1日加上1天的毫秒數(shù)的Date對象3．顯示日期默認(rèn)情況下，JavaScript將以全文本字符串格式輸出日期。對于下面定義的Date對象，可以有多種輸出形式：vard=newDate("October16,202409:18:00");（1）使用toString()方法轉(zhuǎn)換為字符串例如，d.toString()的輸出形式為SunOct16202409:18:00GMT+0800(中國標(biāo)準(zhǔn)時間)。（2）使用toDateString()方法將日期轉(zhuǎn)換為更易讀的形式例如，d.toDateString()的輸出形式為SunOct162024。（3）使用toUTCString()方法將日期轉(zhuǎn)換為UTC字符串UTC也是一種日期顯示標(biāo)準(zhǔn)。例如，d.toUTCString()的輸出形式為Sun,16Oct202401:18:00GMT。JavaScript的日期對象及方法4．操作日期使用針對Date對象的方法，可以很容易地對日期進行操作。例：為Date對象設(shè)置一個特定的日期（2024年10月1日）的代碼如下。vard=newDate();d.setFullYear(2024,9,1);document.write(d);5．比較日期Date對象也可用于比較兩個日期。例：將2024年10月16日與2024年10月1日進行比較的代碼如下。vardate1,date2,info;date1=newDate();date1.setFullYear(202410,1);date2=newDate();date2.setFullYear(2024,10,16);if(date1<date2){info="日期date1在日期date2之前";}else{info="日期date1在日期date2之后";}document.write(info);JavaScript的日期對象及方法表示月的參數(shù)為0～11。也就是說，如果希望把月設(shè)置為10月，則參數(shù)應(yīng)該是9。6．Date對象的方法Date對象的方法主要用于獲取并設(shè)置日期值（年、月、日、時、分、秒、毫秒）。（1）JavaScript的日期獲取方法

JavaScript中獲取日期某個部分的方法JavaScript的日期對象及方法（2）JavaScript的日期設(shè)置方法使用設(shè)置日期的方法可以設(shè)置Date對象的日期值（年、月、日、小時、分鐘、秒、毫秒）

JavaScript的日期對象及方法JavaScript的日期設(shè)置方法數(shù)組（Array）是一種特殊的變量，它能夠一次存放一個及以上的值。與普通變量的不同之處在于，數(shù)組可以把多個值和表達(dá)式放在一起，可以同時存放很多值，還可以通過引用索引號來訪問這些值。存放在JavaScript數(shù)組中的數(shù)據(jù)的類型和數(shù)量都沒有限制，在腳本中聲明數(shù)組之后，就可以隨時訪問數(shù)組中的任何數(shù)據(jù)。雖然數(shù)組可以保存JavaScript的任何類型的數(shù)據(jù)，包括其他數(shù)組，但是最常見的做法是把類似的數(shù)據(jù)存儲在同一個數(shù)組中，并給它指定一個與數(shù)組項有關(guān)聯(lián)的名稱。1．定義（創(chuàng)建）數(shù)組（1）使用方括號將多個值括起來定義數(shù)組語法格式如下。vararray-name=[item1,item2,...];JavaScript數(shù)組的元素使用半角逗號“,”予以分隔。例如：varcolor=["red","yellow","blue"];定義可以橫跨多行，允許包括空格和折行，但是最后一個元素之后不要添加逗號。（2）使用關(guān)鍵字new來創(chuàng)建Array對象方法1：創(chuàng)建Array對象的同時指定數(shù)組元素的值。varcolor=newArray("red","yellow","blue");JavaScript的數(shù)組對象及方法方法2：先單獨創(chuàng)建Array對象，再為各數(shù)組元素賦值。下面的代碼單獨定義了一個名為color的Array對象。varcolor=newArray();有多種方法可以為數(shù)組元素賦值，也可以添加任意個值，就像可以定義任意個變量一樣。例如：varcolor=newArray();color[0]="red";color[1]="yellow";color[2]="blue";也可以使用一個整數(shù)來控制數(shù)組的容量。例如：varcolor=newArray(3)由于new關(guān)鍵字會使代碼復(fù)雜化，還會產(chǎn)生某些不可預(yù)期的結(jié)果，因此盡量不要使用JavaScript的內(nèi)建數(shù)組構(gòu)造器newArray()創(chuàng)建Array對象，而使用[]取而代之。下面兩條語句創(chuàng)建了名為points的空數(shù)組。varpoints=newArray(); //差varpoints=[]; //優(yōu)下面兩條語句創(chuàng)建了包含6個數(shù)值的數(shù)組。varpoints=newArray(40,100,1,5,25,10); //差varpoints=[40,100,1,5,25,10]; //優(yōu)JavaScript的數(shù)組對象及方法2．使用關(guān)鍵字const聲明數(shù)組使用const聲明數(shù)組已成為一種常見做法。例如：constfruits=["Apple","Pear"];（1）無法重新賦值使用const聲明的數(shù)組不能重新賦值。例如：constfruits=["Apple","Pear"];fruits=["Orange","Banana"];//出錯不允許在同一作用域或同一塊中重新聲明const數(shù)組或為現(xiàn)有的const數(shù)組重新賦值。（2）數(shù)組不是常量關(guān)鍵字const有一定的誤導(dǎo)性，它定義的是對數(shù)組的常量引用。（3）元素可以重新賦值可以更改常量數(shù)組的元素。例如：//可以創(chuàng)建常量數(shù)組constfruits=["Apple","Pear","Orange"];//也可以更改元素fruits[0]="Mango";//還可以添加元素fruits.push("Lemon");JavaScript的數(shù)組對象及方法（4）const數(shù)組在聲明時必須賦值JavaScript中使用const聲明的數(shù)組必須在聲明時進行初始化。如果使用const聲明數(shù)組但未初始化數(shù)組，則會產(chǎn)生語法錯誤。例如，以下聲明數(shù)組的代碼執(zhí)行時會出現(xiàn)“UncaughtSyntaxError:Missinginitializerinconstdeclaration”的錯誤提示信息。constfruitsfruits=["Apple","Pear","Orange"];而使用var聲明的數(shù)組可以隨時初始化，以下代碼可以正常運行。varfruitsfruits=["Apple","Pear","Orange"];（5）const塊作用域使用const聲明的數(shù)組具有塊作用域，即在塊中聲明的數(shù)組與在塊外聲明的數(shù)組不同。例如：constfruits=["Apple","Pear","Orange"];//此處的fruits[0]為"Apple"{constfruits=["Pear","Apple","Orange"];//此處的fruits[0]為"Pear"}//此處的fruits[0]為"Apple"使用var聲明的數(shù)組沒有塊作用域。JavaScript的數(shù)組對象及方法3．重新聲明數(shù)組在程序中的任何位置都允許使用var重新聲明數(shù)組。varfruits=["Apple","Pear","Orange"]; //允許varfruits=["Apple","Pear"]; //允許fruits=["Orange","Banana"]; //允許4．訪問數(shù)組元素通過指定數(shù)組名及索引可以訪問某個特定的元素。以下代碼聲明（創(chuàng)建）了名為students的數(shù)組，包含3個元素。students=["張山","李斯","王武"];數(shù)組索引的定義是基于0的，即數(shù)組索引從0開始，這意味著第1個元素的索引為[0]，第2個元素的索引為[1]，以此類推。例如：varcolor=newArray("red","yellow","blue");document.write(color[0])//輸出的值是red5．修改數(shù)組元素的值如果需要修改已有數(shù)組中的元素值，則向指定索引的元素添加一個新值即可。例如：color[0]="green";students[0]="安靜";JavaScript的數(shù)組對象及方法6．添加數(shù)組元素向數(shù)組中添加新元素的最佳方法是使用push()方法。例如：students.push("李白");7．訪問完整數(shù)組JavaScript可以通過引用數(shù)組名來訪問完整數(shù)組。例如：varcolor=newArray("red","yellow","blue");document.getElementById("demo").innerHTML=color;8．?dāng)?shù)組的對象特性數(shù)組是一種特殊類型的對象，在JavaScript中對數(shù)組使用typeof運算符會返回“object”。JavaScript數(shù)組最好以數(shù)組形式來描述。在JavaScript中，數(shù)組使用數(shù)字索引，對象使用命名索引。例如：varperson1=["張山","李斯","王武"];數(shù)組可以使用數(shù)字來訪問其元素，這里person1[0]將返回“張山”。varperson2={name:"張山",age:19,nativePlace:"上海"};對象也可以使用名稱來訪問其成員，這里將返回“張山”。JavaScript的數(shù)組對象及方法9．JavaScript的Array對象的主要屬性和方法JavaScript的Array對象常用的屬性是length，用于設(shè)置或返回數(shù)組中元素的數(shù)目，即數(shù)組的長度。例：代碼如下。varperson=["張山","李斯","王武"];person.length; //數(shù)組person的長度為3person[person.length-1]; //訪問數(shù)組的最后一個元素"王武"person[person.length]="安靜"; //使用length屬性向數(shù)組中添加新元素document.write(person);JavaScript的Array對象的方法較多，如表5-6所示。聲明數(shù)組的代碼如下。varfruits=["Apple","Pear","Orange","Banana"];JavaScript的數(shù)組對象及方法JavaScript是一種基于對象的腳本語言，ES6引入了JavaScript類。ES6之前的版本不使用類，JavaScript并不完全支持面向?qū)ο蟮某绦蛟O(shè)計方法，不具有繼承性、封裝性等面向?qū)ο蟮幕咎匦浴S6之前，借助JavaScript的動態(tài)性，可以創(chuàng)建一個空的對象（而不是類），通過動態(tài)添加屬性來完善對象的功能。1．JavaScript的對象JavaScript中“一切皆對象”，JavaScript中的字符串、數(shù)值、數(shù)組、日期、函數(shù)都是對象。對象是擁有屬性和方法的特殊數(shù)據(jù)。JavaScript可提供多個內(nèi)建對象，如String、Date、Array等。如果使用關(guān)鍵字new來聲明JavaScript變量，則該變量會被創(chuàng)建為對象。例如：varstr=newString(); //把str聲明為String對象varnum=newNumber(); //把num聲明為Number對象varbool=newBoolean(); //把bool聲明為Boolean對象盡量避免使用String對象、Number對象或Boolean對象，因為這些對象會增加代碼的復(fù)雜性并降低代碼的執(zhí)行速度。JavaScript允許用戶自定義對象。JavaScript對象其實就是屬性的集合，給定一個JavaScript對象，用戶可以明確地知道某個屬性是不是這個對象的屬性。對象中的屬性是無序的，并且其名稱各不相同，如果出現(xiàn)同名的屬性，則后聲明的屬性會覆蓋先聲明的屬性。在JavaScript中，對象也是變量，對象擁有屬性和方法等。JavaScrip變量是數(shù)據(jù)值的容器，JavaScript對象則是多個被命名值的容器。當(dāng)聲明如下JavaScript變量時，實際上已經(jīng)創(chuàng)建了一個String對象，String對象擁有內(nèi)建的屬性length。varstr="Hello";JavaScript的自定義對象2．自定義（創(chuàng)建）JavaScript對象在JavaScript中，有以下多種方法來創(chuàng)建對象。①定義和創(chuàng)建單個對象。②通過關(guān)鍵字new定義和創(chuàng)建單個對象。③先定義對象構(gòu)造器，再創(chuàng)建構(gòu)造類型的對象。④在ES5中，也可以通過函數(shù)Object.create()來創(chuàng)建對象。通過JavaScript，用戶能夠創(chuàng)建自己的對象。創(chuàng)建新JavaScript對象的方法有很多，并且可以為已存在的對象添加屬性和方法。（1）直接使用鍵值對的形式創(chuàng)建對象自定義JavaScript對象的規(guī)則如下。①把左花括號“{”與對象名放在同一行。②在每個屬性名與其值之間使用半角冒號，并且冒號后面加一個空格。③不要在最后一個鍵值對后面寫逗號。④在對象定義結(jié)束位置的新行上寫右花括號“}”，右花括號“}”前不加前導(dǎo)空格。⑤對象定義始終以分號結(jié)束。定義JavaScript對象時，空格和折行都是允許的，對象定義也允許橫跨多行。JavaScript的自定義對象（2）通過賦值方式創(chuàng)建對象的實例可以通過new關(guān)鍵字創(chuàng)建一個新的對象，并動態(tài)添加屬性，從無到有地創(chuàng)建一個對象?！揪幊逃?xùn)練】【示例5-14】demo0514.html創(chuàng)建一個名為book的對象，并為其添加5個屬性，代碼如下。varbook=newObject();book.bookName="網(wǎng)頁應(yīng)用實踐"book.author="丁一"book.publishing="人民郵電出版社"book.price=38.8book.edition=2document.write("書名："+book.bookName+"<br>");document.write("作者："+book.author+"<br>");document.write("出版社："+book.publishing+"<br>");document.write("價格："+book.price);在JavaScript中，屬性不需要單獨聲明，在賦值時即自動創(chuàng)建?？蓪⒆远x對象的屬性值賦給變量：x=book.bookName;。在以上代碼執(zhí)行后，x的值將是"網(wǎng)頁應(yīng)用實踐"。JavaScript的自定義對象（3）先定義對象的原型，再使用new關(guān)鍵字來創(chuàng)建新的對象首先，創(chuàng)建對象構(gòu)造器。例如：functionbook(bookName,author,publishing,price,edition){this.bookName=bookName;this.author=author;this.publishing=publishing;this.price=price;this.edition=edition}其次，創(chuàng)建新的對象實例。例如：varmyBook=newbook("網(wǎng)頁應(yīng)用實踐","丁一","人民郵電出版社",38.8,2);（4）對象定義的簡寫對于鍵和值，如果值是變量，并且變量和鍵同名，則可以這樣寫：letstuName='LiMin',stuAge=21;letstudent={stuName,stuAge,getName(){console.log(this.stuName)}}JavaScript的自定義對象3．JavaScript對象的屬性和方法在面向?qū)ο蟮某绦蛟O(shè)計語言中，屬性和方法常被稱為對象的成員。（1）JavaScript對象的屬性屬性是與JavaScript對象相關(guān)的信息。例如，汽車是現(xiàn)實生活中的對象，汽車的屬性包括品牌名稱、生產(chǎn)廠家、排量、重量、顏色等，所有汽車都具有這些屬性，但是每款汽車的屬性都不盡相同。汽車的方法可以是啟動、駕駛、剎車等，所有汽車都擁有這些方法，但是它們被執(zhí)行的時間都不盡相同。JavaScript的屬性是由鍵值對組成的，即屬性的名稱和屬性的值。JavaScript對象中的“名稱:值”（name:value）被稱為對象的屬性。JavaScript對象的屬性和方法由花括號“{}”包圍，在花括號內(nèi)部，對象的屬性以“名稱:值”的形式來定義，名稱和值由半角冒號進行分隔，多個屬性使用半角逗號“,”分隔。屬性的名稱是一個變量名，應(yīng)符合變量命名規(guī)則，而值可以為任意JavaScript對象。例如：varperson={name:"張山",sex:"男",age:19};所定義的對象person有3個屬性，即name、sex、age，屬性值分別為"張山""男"、19。JavaScript的自定義對象（2）JavaScript對象的方法JavaScript對象也可以有方法，方法是在對象上執(zhí)行的動作。對象的方法是讓對象完成某些操作的函數(shù)，即方法名稱與屬性名稱相似，方法與函數(shù)的定義形式相似。例如：varcollectBooks={bookName:"網(wǎng)頁應(yīng)用實踐",price:38.8,quantity:5,amount:function(){returnthis.price*this.quantity;}};4．訪問JavaScript對象的屬性和方法在JavaScript中引用對象時，根據(jù)對象的包含關(guān)系，使用成員引用操作符“.”一層一層地引用對象。例如，要引用document對象，應(yīng)使用window.document，由于window對象是默認(rèn)的最上層對象，因此引用其子對象時，可以不使用window，而直接使用document。當(dāng)引用較低層次的對象時，一般有兩種方式：使用對象索引或使用對象名稱（或ID）。例如，要引用網(wǎng)頁文檔中的第一個表單對象，可以使用“document.forms[0]”的形式來實現(xiàn)；如果該表單的name屬性為form1（或者ID屬性為form1），則也可以使用“document.forms["form1"]”的形式或直接使用“document1.form1”的形式來引用該表單。如果在名為form1的表單中包括一個名為text1的文本框，則可以使用“document.form1.text1”的形式來引用該文本框?qū)ο?。如果要獲取該文本框中的內(nèi)容，則可以使用“document.form1.text1.value”的形式。對于不同的對象，通常還有一些特殊的引用方法，例如，要引用表單對象包含的對象，可以使用elements數(shù)組；要引用當(dāng)前對象，可以使用this。要獲取網(wǎng)頁文檔中圖片的數(shù)量，可以使用“document.images.length”的形式。要設(shè)置圖片的alt屬性，可以使用“document.images[0].alt="圖片1"”的形式。要設(shè)置圖片的src屬性，可以使用“document.images[0].src=document.images[1].src”的形式JavaScript的自定義對象（1）訪問對象的屬性屬性是與對象相關(guān)的信息。訪問對象屬性的語法格式如下。①語法格式之一：對象名.屬性名稱。例如，person.age，book.bookName。②語法格式之二：對象名["屬性名稱"]。例如，person["age"]，book["bookName"]。使用String對象的length屬性來獲取字符串的長度的示例如下。varmessage="HelloWorld!";varx=message.length;在以上代碼執(zhí)行后，x的值為12。定義對象后可以更改其屬性。例如：person.age="20";還可以為對象添加新屬性。例如：person.nativePlace="上海";JavaScript的自定義對象（2）訪問對象的方法方法是能夠在對象上執(zhí)行的動作。①調(diào)用對象的方法?？梢允褂孟旅娴恼Z法格式調(diào)用方法：對象名.方法名稱(參數(shù)列表)。使用String對象的toUpperCase()方法將文本轉(zhuǎn)換為大寫形式的示例如下。varmessage="Helloworld!";varx=message.toUpperCase();在以上代碼執(zhí)行后，x的值是HELLOWORLD!。②返回對象方法的定義。若不使用圓括號“()”訪問對象方法，則將返回對象方法的定義代碼。例如，collectBooks.amount將返回對象方法amount()的定義代碼。ES6引入了JavaScript類，JavaScript類是JavaScript對象的模板。1．使用關(guān)鍵字class創(chuàng)建JavaScript類使用關(guān)鍵字class創(chuàng)建JavaScript類時，始終添加名為constructor的方法，語法格式如下。classClassName{constructor(){…}}例如：classPerson{constructor(name,year){=name;this.year=year;}}上面的示例創(chuàng)建了一個名為Person的類，該類有兩個初始屬性：name和year。ES6使用class構(gòu)造對象2．使用JavaScript類創(chuàng)建對象如果創(chuàng)建了一個類，那么可以使用該類來創(chuàng)建對象。例如：letperson1=newPerson("安好",2002);letperson2=newPerson("安康",2004);以上代碼使用Person類創(chuàng)建了兩個Person對象，在創(chuàng)建新的對象時會自動調(diào)用constructor()方法。3．JavaScript類的構(gòu)造器為創(chuàng)建新對象而設(shè)計的函數(shù)被稱為對象構(gòu)造器。JavaScript類的構(gòu)造器constructor()是一種特殊的方法，用于初始化對象屬性，其特點如下。①它必須擁有確切名稱。②創(chuàng)建新對象時自動執(zhí)行。③如果未定義構(gòu)造器，則JavaScript會添加空的構(gòu)造器。4．創(chuàng)建類方法類方法與對象方法相同，必須先使用關(guān)鍵字class創(chuàng)建類，并且要始終添加constructor()方法，再添加任意數(shù)量的類方法。語法格式如下。classClassName{constructor(){…}method_1(){…}method_2(){…}}ES6使用class構(gòu)造對象以下代碼創(chuàng)建了2個類方法，一個名為getName，該方法用于返回姓名；另一個名為getAge，該方法用于返回年齡。classPerson{constructor(name,year){=name;this.year=year;}getName(){return;}getAge(year1){returnyear1-this.year;}}letdate=newDate();letyear1=date.getFullYear();letperson1=newPerson("安好",2002);letperson2=newPerson("安康",2004);document.write("今年"+person1.getName()+person1.getAge(year1)+"歲。");document.write("<br>");document.write("今年"+person2.getName()+person2.getAge(year1)+"歲。");document.write("<br>");5．類繼承如果需創(chuàng)建類繼承，則可使用extends關(guān)鍵字，使用類繼承創(chuàng)建的類繼承了其父類的所有方法。繼承對代碼可重用性很重要，在創(chuàng)建新類時可以重用現(xiàn)有類的屬性和方法。創(chuàng)建繼承類時，通過在constructor()方法中調(diào)用super()方法而調(diào)用了父類的constructor()方法，獲得了父類的屬性和方法的訪問權(quán)限。ES6使用class構(gòu)造對象例：//定義類PointclassPoint{constructor(x,y){this.x=x;this.y=y;}//不要加逗號

toSting(){return`(${this.x},${this.y})`;}}//實例化，得到一個對象varp=newPoint(10,20);console.log(p.x)console.log(p.toSting());classColorPointextendsPoint{constructor(x,y,color){super(x,y);//調(diào)用父類的constructor(x,y)this.color=color;}//不要加逗號

showColor(){console.log('Mycoloris'+this.color);}}varcp=newColorPoint(10,20,"red");console.log(cp.x);console.log(cp.toSting());cp.showColor()在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計語言中，this

指針是在類中聲明的，表示對象本身；而在

JavaScript中，this表示其所屬的對象，即調(diào)用者的引用。例：varstu1={//定義一個人，名字為向東

name:"向東",age:20}varstu2={//定義另一個人，名字為向楠

name:"向楠",age:19}functionprintName(){//定義一個全局的函數(shù)對象return;}//設(shè)置printName()的上下文為stu1，此時的this為stu1document.write(printName.call(stu1));//設(shè)置printName()的上下文為stu2，此時的this為stu2document.write(printName.call(stu2));應(yīng)該注意的是，this的值并非由函數(shù)被聲明的方式而確定，而是由函數(shù)被調(diào)用的方式而確定，這一點與傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計語言截然不同。JavaScript的this指針在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計語言中，this

指針是在類中聲明的，表示對象本身；而在

JavaScript中，this表示其所屬的對象，即調(diào)用者的引用。1．this是什么？JavaScript中this指的是它所屬的對象，它擁有不同的值，具體取決于其使用位置。①在方法中，this指的是擁有者對象。②單獨使用時，擁有者是全局對象，this指的是全局對象。③在函數(shù)中，this指的是全局對象。④在函數(shù)中，嚴(yán)格模式下，this是undefined。⑤在事件中，this指的是接收事件的元素。⑥在頂層調(diào)用全局函數(shù)時，this指window對象，因為全局函數(shù)其實就是window的屬性。⑦類似call()和apply()這樣的方法可以將this引用到任何對象。call()和apply()方法是預(yù)定義的JavaScript方法，它們都可以用于將另一個對象作為參數(shù)來調(diào)用對象方法。JavaScript的this指針2．方法中的this在對象方法中，this指的是該方法的擁有者。下面的示例中this指的是“擁有”amount()方法的collectBooks對象。collectBooks對象是amount()方法的擁有者。例如：varcollectBooks={bookName:"網(wǎng)頁應(yīng)用實踐",price:38.8,quantity:5,amount:function(){returnthis.price*this.quantity;}};這里this.price的意思是this對象（collectBooks）的price屬性。JavaScript的this指針3．函數(shù)中的this（1）默認(rèn)狀態(tài)（非嚴(yán)格模式）下在JavaScript函數(shù)中，函數(shù)的擁有者默認(rèn)綁定this，因此，在函數(shù)中，this指的是全局對象。例如：functionmyFunction(){returnthis;}（2）嚴(yán)格模式下JavaScript的嚴(yán)格模式不允許默認(rèn)綁定對象，因此，在函數(shù)中使用this時，this是undefined（未定義的）。例如："usestrict";functionmyFunction(){returnthis;}4．事件處理程序中的this在HTML事件處理程序中，this指的是接收此事件的HTML元素。例如：<inputtype="button"onclick="this.style.display='none'"value="單擊后隱藏">JavaScript的this指針1．什么是正則表達(dá)式正則表達(dá)式是構(gòu)成搜索模式（SearchPattern）的字符序列，當(dāng)需要搜索文本中的數(shù)據(jù)時，就可以使用搜索模式來描述所需搜索的內(nèi)容。正則表達(dá)式可以是單字符，或者更復(fù)雜的形式。正則表達(dá)式可用于執(zhí)行所有類型的文本搜索和文本替換操作。正則表達(dá)式的直接量語法格式如下。/pattern/attributes例如：varpatt=/is/i;這里的/is/i是一個正則表達(dá)式，其中is表示在搜索中使用的模式，i表示對字母大小寫不敏感的修飾符，即is、Is、iS、IS都可以搜索到。JavaScript的正則表達(dá)式與應(yīng)用2．正則表達(dá)式的修飾符修飾符可用于字母大小寫不敏感的全局搜索，正則表達(dá)式的修飾符如表5-7所示。JavaScript的正則表達(dá)式與應(yīng)用（1）i修飾符i修飾符用于執(zhí)行對字母大小寫不敏感的匹配。所有主流瀏覽器都支持i修飾符。（2）g修飾符g修飾符用于執(zhí)行全局匹配，即查找所有匹配項而非在找到第一個匹配項后停止查找。所有主流瀏覽器都支持g修飾符。（3）m修飾符m修飾符規(guī)定正則表達(dá)式可以執(zhí)行多行匹配。m修飾符的作用是修改^和$在正則表達(dá)式中的作用，使其分別表示行首和行尾。3．正則表達(dá)式的模式符（1）帶方括號的模式表達(dá)式方括號用于查找某個范圍內(nèi)的字符，帶方括號的模式表達(dá)式如表5-8所示。（2）模式表達(dá)式中的元字符元字符（Metacharacter）是擁有特殊含義的字符，模式表達(dá)式中的元字符如表5-9所示JavaScript的正則表達(dá)式與應(yīng)用帶方括號的模式表達(dá)式JavaScript的正則表達(dá)式與應(yīng)用模式表達(dá)式中的元字符JavaScript的正則表達(dá)式與應(yīng)用模式表達(dá)式中的量詞（3）模式表達(dá)式中的量詞JavaScript的RegExp對象及其方法在JavaScript中，RegExp對象是帶有預(yù)定義屬性和方法的正則表達(dá)式對象，它是對字符串執(zhí)行模式匹配的強大工具。當(dāng)檢索某段文本時，可以使用一種模式來描述要檢索的內(nèi)容，RegExp對象就是這種模式。簡單的模式可以是一個單獨的字符，更復(fù)雜的模式包括更多的字符，并可用于解析、格式檢查、替換等，可以規(guī)定字符串中的檢索位置，以及要檢索的字符類型等。1．創(chuàng)建RegExp對象（1）創(chuàng)建RegExp對象的語法格式newRegExp(pattern,attributes);（2）RegExp對象的參數(shù)說明其中，參數(shù)pattern表示一個字符串，用于指定正則表達(dá)式的模式或其他正則表達(dá)式；參數(shù)attributes表示一個可選的字符串，包含修飾符g、i和m，分別用于指定全局匹配、不區(qū)分字母大小寫的匹配和多行匹配，ECMAScript標(biāo)準(zhǔn)化之前，不支持m修飾符，如果pattern是正則表達(dá)式，而不是字符串，則必須省略該參數(shù)。（3）RegExp對象的返回值一個新的RegExp對象具有指定的模式和標(biāo)志。如果參數(shù)pattern是正則表達(dá)式而不是字符串，那么RegExp()構(gòu)造器將使用與指定的RegExp對象相同的模式和標(biāo)志創(chuàng)建一個新的RegExp對象。如果不使用new關(guān)鍵字，而將RegExp()作為函數(shù)調(diào)用，那么它的行為與用new關(guān)鍵字調(diào)用時的一樣，只是當(dāng)pattern是正則表達(dá)式時，它只返回pattern，而不再創(chuàng)建一個新的RegExp對象。JavaScript的RegExp對象及其方法（4）創(chuàng)建RegExp對象時拋出的異常①SyntaxError：如果pattern不是合法的正則表達(dá)式，或attributes含有g(shù)、i和m之外的字符，則創(chuàng)建RegExp對象時會拋出該異常。②TypeError：如果pattern是RegExp對象，但沒有省略attributes參數(shù)，則拋出該異常。2．創(chuàng)建RegExp對象的修飾符3．RegExp對象的屬性JavaScript的RegExp對象及其方法4．RegExp對象的方法RegExp對象有3種方法：test()、exec()和compile()。（1）test()方法test()方法用于檢測一個字符串是否匹配某個模式，或者檢索字符串中是否包含指定值，返回值是true或false。語法格式如下。RegExpObject.test(str)其中，RegExpObject是正則表達(dá)式對象，參數(shù)str是要測試的字符串。（2）exec()方法exec()方法用于檢索字符串中的正則表達(dá)式的匹配項，或者檢索字符串中是否包含指定值，返回值是被找到的值。如果沒有發(fā)現(xiàn)匹配項或者字符串中不包含指定值，則返回null。語法格式如下。RegExpObject.exec(str)其中，參數(shù)str為必需參數(shù)，表示要檢查的字符串。exec()方法的功能非常強大，它是一個通用的方法，使用起來比test()方法以及支持正則表達(dá)式的String對象的方法更為復(fù)雜。JavaScript的RegExp對象及其方法（3）compile()方法compile()方法用于改變RegExp對象，或者在腳本執(zhí)行過程中編譯正則表達(dá)式，也可以用于改變和重新編譯正則表達(dá)式。語法格式如下。RegExpOpile(regexp,modifier)其中，參數(shù)regexp表示正則表達(dá)式；參數(shù)modifier用于規(guī)定匹配的類型。g用于全局匹配，i用于不區(qū)分字母大小寫的匹配，gi用于全局且不區(qū)分字母大小寫的匹配。例：以下代碼中，在字符串中全局搜索“to”，并用“for”替換，使用compile()方法改變正則表達(dá)式，用“he”替換“me”。<scripttype="text/javascript">varstr="goodlucktome,goodlucktoyou";patt=/to/g;str2=str.replace(patt,"for");document.write(str2+"<br>");patt=/me/;pile(patt);str2=str.replace(patt,"he");document.write(str2);</script>輸出結(jié)果如下。goodluckforme,goodluckforyougoodlucktohe,goodlucktoyou支持正則表達(dá)式的String對象的方法在JavaScript中，正則表達(dá)式常用于search()、match()、replace()、split()等多個方法。1．search()方法search()方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串。語法格式如下。strObject.search(regexp)其中，參數(shù)regexp可以是需要在strObject中檢索的子字符串（子字符串參數(shù)將被轉(zhuǎn)換為正則表達(dá)式），也可以是需要檢索的RegExp對象。如果要執(zhí)行忽略字母大小寫的檢索，則需要添加修飾符i。其返回值是strObject中第1個與regexp相匹配的子字符串的起始位置。如果沒有找到任何匹配的子字符串，則返回-1。search()方法不執(zhí)行全局匹配，它將同時忽略修飾符g和regexp的lastIndex屬性，并且總是從字符串的起始位置進行檢索，這意味著它總是返回strObject的第一個匹配項的起始位置。例：從字符串“javascript”中分別檢索“a”“R”的代碼如下。<scripttype="text/javascript">varstr="javascript";document.write(str.search(/a/));document.write("|");document.write(str.search(/R/));//區(qū)分字母大小寫

document.write("|");document.write(str.search(/R/i))//不區(qū)分字母大小寫</script>輸出結(jié)果如下。1|-1|6支持正則表達(dá)式的String對象的方法2．match()方法match()方法可以在字符串內(nèi)檢索指定的值，或找到一個或多個正則表達(dá)式的匹配項。該方法的作用類似于indexOf()和lastIndexOf()的作用，但是它返回的是指定的值，而不是字符串的位置。語法格式如下。（1）語法格式1：strObject.match(searchvalue)其中，參數(shù)searchvalue用于指定要檢索的字符串值。（2）語法格式2：strObject.match(regexp)其中，參數(shù)regexp用于規(guī)定要匹配模式的RegExp對象。如果該參數(shù)不是RegExp對象，則需要把它傳遞給RegExp()，將其轉(zhuǎn)換為RegExp對象。其返回值為存放匹配結(jié)果的數(shù)組，該數(shù)組的內(nèi)容依賴于regexp是否具有全局修飾符g。其中，參數(shù)regexp用于規(guī)定要匹配模式的RegExp對象。如果該參數(shù)不是RegExp對象，則需要把它傳遞給RegExp()，將其轉(zhuǎn)換為RegExp對象。其返回值為存放匹配結(jié)果的數(shù)組，該數(shù)組的內(nèi)容依賴于regexp是否具有全局修飾符g。支持正則表達(dá)式的String對象的方法match()方法將檢索字符串strOb