網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象基礎(chǔ)-內(nèi)置對(duì)象

JavaScript是一種基于對(duì)象的編程語言，JavaScript將對(duì)象分為內(nèi)置對(duì)象、瀏覽器內(nèi)置對(duì)象和自定義對(duì)象三種。本章主要講述常用JavaScript內(nèi)置對(duì)象。

JavaScript語法基礎(chǔ)

內(nèi)置對(duì)象目錄

JavaScript對(duì)象基礎(chǔ)8.1JavaScript對(duì)象概述8.2對(duì)象8.3內(nèi)置對(duì)象習(xí)題88.3內(nèi)置對(duì)象8.3.1數(shù)學(xué)對(duì)象1.數(shù)學(xué)對(duì)象的屬性8.3內(nèi)置對(duì)象使用Math對(duì)象的屬性的語法如下：var變量名=Math.屬性;例如，引用Math對(duì)象的PI屬性，代碼為：varpi_value=Math.PI;8.3內(nèi)置對(duì)象2.數(shù)學(xué)對(duì)象的方法8.3內(nèi)置對(duì)象使用Math對(duì)象的方法的語法如下：var變量名=Math.方法(參數(shù));例如：varsqrt_value=Math.sqrt(16);8.3內(nèi)置對(duì)象8.3內(nèi)置對(duì)象保留小數(shù)位數(shù)的toFixed()函數(shù)和toPrecision()函數(shù)的使用格式如下：數(shù)字.toFixed(n)數(shù)字.toPrecision(n)例如，下面代碼：varnum=3021.1258;vardec1=num.toFixed(3);//保留3位小數(shù)，結(jié)果為3021.126vardec2=num.toPrecision(6);//保留6位數(shù)字，結(jié)果為3021.138.3內(nèi)置對(duì)象8.3.2字符串對(duì)象1.字符串對(duì)象的創(chuàng)建（1）直接聲明字符串變量語法格式如下：var字符串變量名=字符串;例如，創(chuàng)建字符串對(duì)象st，并對(duì)其賦值，代碼如下：varst="HelloWorld";8.3內(nèi)置對(duì)象（2）使用new關(guān)鍵字創(chuàng)建字符串對(duì)象使用new關(guān)鍵字創(chuàng)建字符串對(duì)象的語法格式如下：var字符串對(duì)象名=newString(字符串);8.3內(nèi)置對(duì)象2.String對(duì)象的屬性String對(duì)象的屬性只有3個(gè)，見表。8.3內(nèi)置對(duì)象3.String對(duì)象的方法8.3內(nèi)置對(duì)象【例8-6】創(chuàng)建一個(gè)String對(duì)象，調(diào)用anchor方法創(chuàng)建一個(gè)錨點(diǎn)，該錨點(diǎn)的name屬性為Anchor1。本例文件8-6.html在瀏覽器中顯示如圖8-6所示。8.3內(nèi)置對(duì)象<scripttype="text/javascript">varstrVariable="歡迎訪問網(wǎng)易/";//創(chuàng)建字符串對(duì)象

strVariable=strVariable.anchor("Anchor1");//調(diào)用anchor()方法創(chuàng)建一個(gè)a元素字符串

alert(strVariable);//在對(duì)話框中顯示strVariable的值</script>運(yùn)行上面代碼，在瀏覽器中將彈出一個(gè)對(duì)話框，其中顯示strVariable的值為：<aname="Anchor1">歡迎訪問網(wǎng)易/</a>8.3內(nèi)置對(duì)象8.3.3日期對(duì)象1.創(chuàng)建日期對(duì)象創(chuàng)建Date對(duì)象必須使用new關(guān)鍵字，創(chuàng)建Date對(duì)象有4種方法。方法1的，其語法格式為：var日期對(duì)象名=newDate();方法2的，其語法格式為：var日期對(duì)象名=newDate(日期字符串);方法3的，其語法格式為：var日期對(duì)象名=newDate(年,月,日[,時(shí),分,秒[,毫秒]])方法4的，其語法格式為：var日期對(duì)象名=newDate(毫秒)8.3內(nèi)置對(duì)象2.Date對(duì)象的方法8.3內(nèi)置對(duì)象【例8-7】顯示當(dāng)前的日期、時(shí)間。本例文件8-7.html在瀏覽器中顯示如圖8-7所示。<scripttype="text/javascript">vard=newDate();//創(chuàng)建一個(gè)日期對(duì)象，假設(shè)當(dāng)前系統(tǒng)日期時(shí)間是：2023/8/323:8:19document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"<br>");document.write(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+"<br>");document.write(d.getTime()+"<br>");document.write("當(dāng)前日期時(shí)間:"+d.toLocaleString()+"<br>");</script>8.3內(nèi)置對(duì)象3.日期的運(yùn)算1）日期對(duì)象與整數(shù)年、月、日相加或者相減，得到一個(gè)新的日期對(duì)象。例如，設(shè)置日期、年，代碼如下：d=newDate();//創(chuàng)建一個(gè)日期對(duì)象，假設(shè)當(dāng)前日期是：2023/8/323:13:52alert(d.toLocaleString());//顯示當(dāng)前的日期和時(shí)間：2023/8/323:13:52d.setDate(25);//設(shè)置日期在25號(hào)alert(d.toLocaleString());//顯示設(shè)置新日期后的日期：2023/8/2523:13:52d.setYear(2000);//設(shè)置年為2000年alert(d.toLocaleString());//顯示設(shè)置新日期后的日期：2000/8/2523:13:528.3內(nèi)置對(duì)象例如，計(jì)算當(dāng)前日期10天后的日期，計(jì)算當(dāng)前時(shí)間20分鐘前的時(shí)間，代碼如下：vard1=newDate();//創(chuàng)建一個(gè)對(duì)象d1，假設(shè)當(dāng)前日期是：2023/8/323:18:21d1.setDate(d1.getDate()+10);//返回一個(gè)月中的日期，然后加上10，最后把d1的值設(shè)置成新的日期對(duì)象document.write("當(dāng)前日期的10天后:"+d1.toLocaleString()+"<br>");//2023/8/1323:18:21vard2=newDate();//創(chuàng)建一個(gè)對(duì)象d2，假設(shè)當(dāng)前日期是：2023/8/323:18:21d2.setMinutes(d2.getMinutes()-20);document.write("當(dāng)前時(shí)間的20分鐘前:"+d2.toLocaleString()+"<br>");//2023/8/322:58:218.3內(nèi)置對(duì)象【例8-8】獲取當(dāng)前時(shí)間的前n天或后n天的日期。本例文件8-8.html在瀏覽器中顯示如圖8-8所示。<scripttype="text/javascript">functionshowdate(n){vard=newDate();//返回當(dāng)前的日期和時(shí)間

d.setDate(d.getDate()+n);//設(shè)置成新的日期對(duì)象

dd=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();returndd;}document.write("今天是："+showdate(0)+"<br>");document.write("昨天是："+showdate(-1)+"<br>");document.write("明天是："+showdate(1)+"<br>");document.write("5天前是："+showdate(-5)+"<br>");document.write("10天后是："+showdate(10)+"<br>");</script>8.3內(nèi)置對(duì)象2）兩個(gè)日期相減，得到兩個(gè)日期之間的毫秒數(shù)。通常會(huì)將毫秒轉(zhuǎn)換成天、小時(shí)、分、秒等。例如，下面代碼得到間隔天數(shù)。vard1=newDate("2025/5/10");vard2=newDate("2025/5/13");varoneday=24*60*60*1000;//1天的毫秒數(shù)vardiff=Math.ceil((d2.getTime()-d1.getTime())/(oneday));//兩個(gè)日期相減document.write("相差:"+diff+"天");//相差:3天8.3內(nèi)置對(duì)象例如，下面代碼獲取兩日期月份之差。vard1=newDate("2025/5/13");vard2=newDate("2025/10/10");vardiff=(d1.getFullYear()-d2.getFullYear())*12+d1.getMonth()-d2.getMonth();document.write("相差:"+diff+"月");//相差:-5月8.3內(nèi)置對(duì)象例如，下面代碼得到間隔時(shí)間。vard1=newDate("2025/10/1010:06:01");vard2=newDate("2025/10/1020:30:58");vard3=d1-d2;varh=Math.floor(d3/3600000);varm=Math.floor((d3-h*3600000)/60000);vars=(d3-h*3600000-m*60000)/1000;document.write("相差:"+h+"小時(shí)"+m+"分"+s+"秒");//相差:-11小時(shí)35分3秒8.3內(nèi)置對(duì)象3）可以比較兩個(gè)日期的大小，得到布爾值true或false。例如下面代碼：vard1=newDate(2025,4,13,12,22,51,380);vard2=newDate(2025,1,25,22,15,35,491);document.write(d1<d2);//false8.3內(nèi)置對(duì)象例如，下面的代碼將當(dāng)前日期與2025年11月20日做比較。vard=newDate();d.setFullYear(2025,10,20);//注意這里的10代表11月dstring="今天是"+d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";vartoday=newDate();if(d>today){document.write(dstring+"之前");}else{document.write(dstring+"之后");}8.3內(nèi)置對(duì)象8.3.4數(shù)組對(duì)象1.定義數(shù)組（1）常規(guī)方式用Array()構(gòu)造函數(shù)和new關(guān)鍵字創(chuàng)建指定長(zhǎng)度的數(shù)組對(duì)象，語法格式如下：var數(shù)組名=newArray([size]);例如，下面代碼分別定義名為cars1長(zhǎng)度為0和名為cars2長(zhǎng)度為5的數(shù)組對(duì)象：varcars1=newArray();varcars2=newArray(5);cars2數(shù)組的下標(biāo)元素為cars2[0]、cars2[1]、cars2[2]、cars2[3]和cars2[4]。8.3內(nèi)置對(duì)象（2）簡(jiǎn)潔方式語法格式如下：var數(shù)組名=newArray(元素1,元素2,元素3,…);例如，下面代碼定義數(shù)組包含元素“TOYOTA”、“Audi”、“BMW”的數(shù)組cars3。varcars3=newArray("TOYOTA","Audi","BMW");8.3內(nèi)置對(duì)象（3）字面方式語法格式如下：var數(shù)組名=[元素1,元素2,元素3,…];例如，下面代碼定義數(shù)組同樣包含元素“TOYOTA”、“Audi”、“BMW”的數(shù)組cars4。varcars4=["TOYOTA","Audi","BMW"];8.3內(nèi)置對(duì)象2.數(shù)組對(duì)象的屬性例如，聲明元素個(gè)數(shù)為3的數(shù)組對(duì)象myArr，并賦予初始值80、70、90，輸出length屬性，將length修改為2，代碼如下：varmyArr=newArray(80,70,90);//創(chuàng)建數(shù)組document.write("數(shù)組的個(gè)數(shù):"+myArr.length);//輸出數(shù)組的元素個(gè)數(shù)myArr.length=2;//修改元素個(gè)數(shù)8.3內(nèi)置對(duì)象3.數(shù)組對(duì)象的方法8.3內(nèi)置對(duì)象4.訪問數(shù)組可以對(duì)數(shù)組元素賦值或取值，其語法格式如下：數(shù)組變量[i]=值;//為數(shù)組元素賦值，i是下標(biāo)序列號(hào)變量名=數(shù)組變量[i];//用數(shù)組元素為變量賦值8.3內(nèi)置對(duì)象5.添加數(shù)組元素（1）直接為元素賦值例如，下面代碼先聲明一個(gè)空的數(shù)組cars，然后分別為下標(biāo)為0、1、2、4的元素賦值。varcars=newArray();cars[0]="Tesla";cars[1]="TOYOTA";cars[2]="Benz";cars[4]="Audi";8.3內(nèi)置對(duì)象（2）用push()方法追加元素例如，以下代碼先聲明一個(gè)數(shù)組cars，然后調(diào)用數(shù)組的push()方法在數(shù)組尾部追加元素。varcars=newArray();cars.push("Tesla");cars.push("TOYOTA");cars.push("Benz");cars.push("BMW");cars.push("Audi");document.write(cars);//顯示所有數(shù)組元素8.3內(nèi)置對(duì)象6.遍歷數(shù)組（1）使用for循環(huán)變量數(shù)組【例8-9】遍歷數(shù)組cars，本例文件8-9.html在瀏覽器中顯示如圖8-9所示。8.3內(nèi)置對(duì)象<scripttype="text/javascript">varcars=newArray("Tesla","TOYOTA","Benz","BMW","Audi");

for(vari=0;i<cars.length;i++){document.write(i+":"+cars[i]);document.write("<br>");}</script>8.3內(nèi)置對(duì)象（2）使用forin循環(huán)遍歷數(shù)組例如，下面代碼，與例8-9運(yùn)行結(jié)果相同。varcars=newArray("Tesla","TOYOTA","Benz","BMW","Audi");for(variincars){document.write(i+":"+cars[i]);document.write("<br>");}8.3內(nèi)置對(duì)象7．刪除元素（1）用pop()方法刪除數(shù)組元素pop()方法的語法格式為：數(shù)組名.pop()例如，以下代碼先使用pop()方法刪除尾部的1個(gè)元素，然后將數(shù)組元素個(gè)數(shù)設(shè)置為1個(gè)。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.pop();//從尾部彈出一個(gè)元素document.write(car+"<br>");//BMWdocument.write(cars.length+""+cars+"<br>");//3Tesla,TOYOTA,Benzcars.length=1;//將數(shù)組元素個(gè)數(shù)設(shè)置為1個(gè)document.write(cars.length+""+cars);//1Tesla8.3內(nèi)置對(duì)象（2）用shift()方法刪除數(shù)組元素shift()方法的語法格式為：數(shù)組名.shift()例如，以下代碼從頭部刪除元素。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.shift();//從頭部刪除一個(gè)元素Tesladocument.write(car+"<br>");//Tesladocument.write(cars.length+""+cars+"<br>");//3TOYOTA,Benz,BMW8.3內(nèi)置對(duì)象（3）用splice()方法刪除數(shù)組元素splice()方法從指定位置刪除指定的元素，并縮減數(shù)組長(zhǎng)度，語法格式為：數(shù)組名.splice(索引位置,刪除個(gè)數(shù))例如，以下代碼從索引位置1開始，刪除2個(gè)元素。varcars=["Tesla","TOYOTA","Benz","BMW"];varcar=cars.splice(1,2);//從下標(biāo)1的位置開始，刪除2個(gè)元素document.write(car+"<br>");//TOYOTA,Benzdocument.write(cars.length+""+cars+"<br>");//2Tesla,BMW8.3內(nèi)置對(duì)象8．插入數(shù)組元素（1）用unshift()方法插入元素unshift()方法向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。語法格式為：數(shù)組名.unshift(元素1,元素2,元素3,…)例如，以下代碼先定義了一個(gè)初始化元素的數(shù)組fruits，然后調(diào)用數(shù)組的unshift()方法在數(shù)組頭部插入兩個(gè)元素。varfruits=["Banana","Orange","Apple","Mango"];fruits.unshift("Lemon","Pineapple");document.write(fruits);//Lemon,Pineapple,Banana,Orange,Apple,Mango8.3內(nèi)置對(duì)象（2）用splice()方法插入元素語法格式為：數(shù)組名.splice(索引位置,刪除個(gè)數(shù),插入元素1,插入元素2,…,插入元素n)例如，以下代碼先定義了一個(gè)初始化元素的數(shù)組fruits，然后調(diào)用數(shù)組的splice()方法從索引位置2上刪除0個(gè)元素，插入3個(gè)元素。varfruits=["Banana","Orange","Apple","Mango"];fruits.splice(2,0,"Lemon","Kiwi","Cherries");document.write(fruits);//Banana,Orange,Lemon,Kiwi,Cherries,Apple,Mango8.3內(nèi)置對(duì)象9．合并數(shù)組concat()方法將多個(gè)數(shù)組連接成一個(gè)新數(shù)組，語法格式為：var數(shù)組名=數(shù)組名1.concat(數(shù)組名2,數(shù)組名3,…,數(shù)組名n);例如，以下代碼在arr2數(shù)組后連接arr1、arr3數(shù)組，形成一個(gè)新數(shù)組newArr。vararr1=[1,2];vararr2=[11,22,33];vararr3=["333","444"];varnewArr=arr2.concat(arr1,arr3);document.write(newArr);//11,22,33,1,2,333,4448.3內(nèi)置對(duì)象10．?dāng)?shù)組轉(zhuǎn)字符串join()方法把數(shù)組的所有元素合并成一個(gè)用指定分隔符分隔的字符串。語法格式為：數(shù)組名.join(分隔符)例如，以下代碼分別用指定分隔符和默認(rèn)分隔符轉(zhuǎn)換成字符串并顯示。varfruits=["Banana","Orange","Apple","Mango"];varfruitsString=fruits.join("->");//分隔符是"->"document.write(fruitsString+"<br>");//Banana->Orange->Apple->MangovarfruitsString=fruits.join();//默認(rèn)分隔符是","document.write(fruitsString+"<br>");//Banana,Orange,Apple,Mango8.3內(nèi)置對(duì)象11．?dāng)?shù)組元素反序reverse()方法將數(shù)組中的元素按相反順序排列，而且是改變當(dāng)前的數(shù)組，不創(chuàng)建新的數(shù)組。語法格式為：數(shù)組名.reverse()例如，以下代碼直接在number數(shù)組中對(duì)元素反序排列。varnumber=["111","222","333","444"];number.reverse();document.write(number);//444,333,222,1118.3內(nèi)置對(duì)象12．?dāng)?shù)組元素的排序sort()方法將數(shù)組中的元素按照默認(rèn)的規(guī)則排序，語法格式為：數(shù)組名.sort()例如，以下代碼：varfruits=newArray();fruits[0]="Banana";fruits[1]="Orange";fruits[2]="Apple";fruits[3]="Mango";document.write("排序前:"+fruits+"<br>");//Banana,Orange,Apple,Mangofruits.sort();document.write("排序后:"+fruits);//Apple,Banana,Mango,Orange8.3內(nèi)置對(duì)象13．二維數(shù)組（1）直接定義并且初始化這種方法在元素?cái)?shù)量少的情況下可以用。例如，以下代碼：vararr=[["0-0","0-1","0-2"],["1-0","1-1","1-2"],["2-0","2-1","2-2"]];（8.3內(nèi)置對(duì)象（2）未知長(zhǎng)度的二維數(shù)組構(gòu)造動(dòng)態(tài)二維數(shù)組的方法步驟如下：1）先定義一維數(shù)組：vararr=newArray();2）構(gòu)造二維數(shù)組，每一個(gè)一維數(shù)組的元素都聲明為一個(gè)新數(shù)組：arr[0]=newArray();arr[1]=newArray();arr[2]=newArray();3）給數(shù)組元素賦值：arr[0][0]="0-0";arr[0][1]="0-1";arr[1][0]="1-0";arr[1][1]="1-1";8.3內(nèi)置對(duì)象【例8-10】構(gòu)造二維數(shù)組，本例文件8-10.html在瀏覽器中顯示如圖8-10所示。<scripttype="text/javascript">vararr=newArray();//先聲明一維數(shù)組

n=10;//一維長(zhǎng)度為n,n為變量，可以根據(jù)實(shí)際情況改變

m=5;//一維數(shù)組里面每個(gè)元素?cái)?shù)組可以包含的數(shù)量p，p也是一個(gè)變量

for(vari=0;i<n;i++){arr[i]=newArray();//每一個(gè)一維數(shù)組中的元素都是一個(gè)數(shù)組，構(gòu)造二維數(shù)組

for(varj=0;j<m;j++){arr[i][j]=i.toString()+"-"+j.toString()+",";//將變量初始化

}}//按行、列顯示二維數(shù)組中的元素

varn=arr.length;//獲取arr的元素個(gè)數(shù)

varm=arr[0].length;//獲取子數(shù)組的元素的個(gè)數(shù)

for(vari=0;i<n;i++){for(varj=0;j<m;j++){document.write(arr[i][j]);}document.write("<br>")}</script>8.3內(nèi)置對(duì)象8.3.5擴(kuò)展運(yùn)算符擴(kuò)展運(yùn)算符（spreadoperator）是ES6的新增語法，用三個(gè)點(diǎn)（...）表示。1．在函數(shù)調(diào)用中使用擴(kuò)展運(yùn)算符例如，以下代碼演示了如何使用擴(kuò)展運(yùn)算符將數(shù)組轉(zhuǎn)為函數(shù)參數(shù)：functionmyFunc(a,b,c){document.write(a+b+c);}letnumbers=[1,2,3];//數(shù)組myFunc(...numbers);//把數(shù)組用擴(kuò)展運(yùn)算符轉(zhuǎn)為函數(shù)的多個(gè)參數(shù)。輸出:6document.write("<br>");myFunc(numbers[0],numbers[1],numbers[2]);//傳入3個(gè)參數(shù)，不用…運(yùn)算符 8.3內(nèi)置對(duì)象2．在數(shù)組字面量中使用擴(kuò)展運(yùn)算符例如，以下代碼演示了如何使用擴(kuò)展運(yùn)算符合并兩個(gè)數(shù)組：letarr1=[1,2,3];letarr2=[4,5,6];letcombined1=[...arr1,...arr2];//使用擴(kuò)展運(yùn)算符合并兩個(gè)數(shù)組letcombined2=[...arr2,...arr1];//不同的排列方式合并為不同的順序document.write(combined1+"<br>");//輸出:[1,2,3,4,5,6]document.write(combined2);//輸出:[4,5,6,1,2,3]8.3內(nèi)置對(duì)象使用擴(kuò)展運(yùn)算符向數(shù)組中添加元素，代碼如下：letarr3=['this','is','an'];arr3=[...arr3,'array'];//添加元素document.write(arr3);//輸出:['this','is','an','array']8.3內(nèi)置對(duì)象使用擴(kuò)展運(yùn)算符和Math.min/Math.max方法獲得數(shù)值數(shù)組中的最小值/最大值，代碼如下：constarr4=[1,-1,0,5,3];constmin=Math.min(...arr4);constmax=Math.max(...arr4);document.write("min=",min,"max=",max);//輸出:min=-1max=58.3內(nèi)置對(duì)象使用擴(kuò)展運(yùn)算符將一個(gè)字符串分解成單個(gè)字符的數(shù)組，代碼如下：conststr='Hello