網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第8章 JavaScript對象基礎(chǔ)_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第8章 JavaScript對象基礎(chǔ)_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第8章 JavaScript對象基礎(chǔ)_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第8章 JavaScript對象基礎(chǔ)_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 課件 第8章 JavaScript對象基礎(chǔ)_第5頁
已閱讀5頁，還剩95頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

在JavaScript中，可以將對象主要分為三種類型：本地對象、內(nèi)置對象和宿主對象。第8章JavaScript對象基礎(chǔ)8.1JavaScript對象概述目錄第8章JavaScript對象基礎(chǔ)8.1JavaScript對象概述8.2對象8.3內(nèi)置對象習(xí)題88.1JavaScript對象概述1．本地對象本地對象是獨(dú)立于宿主環(huán)境的JavaScript預(yù)定義對象，通俗的說就是構(gòu)造函數(shù)。本地對象主要包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。8.1JavaScript對象概述2．內(nèi)置對象內(nèi)置對象是由本地對象實(shí)現(xiàn)的，并且是獨(dú)立于宿主環(huán)境的所有對象。在JavaScript程序開始執(zhí)行時(shí)，內(nèi)置對象會(huì)自動(dòng)初始化并存在。根據(jù)ECMA-262標(biāo)準(zhǔn)，定義了兩個(gè)內(nèi)置對象：Global和Math。內(nèi)置對象與本地對象相同，可看作是本地對象的一類特例。8.1JavaScript對象概述3．宿主對象宿主對象是JavaScript所寄宿的環(huán)境（例如BOM和DOM）定義的對象。宿主對象由客戶端瀏覽器環(huán)境定義，與JavaScript語言本身沒有直接關(guān)系。盡管如此，JavaScript仍然能夠控制這些對象的行為，可以對它們進(jìn)行讀寫操作。祝賀你又學(xué)完了一節(jié)《網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源JavaScript語言采用的是基于對象的（Object-Based）、事件驅(qū)動(dòng)的編程機(jī)制，因此，必須理解對象以及對象的屬性、事件和方法等概念。第8章JavaScript對象基礎(chǔ)8.2對象目錄第8章JavaScript對象基礎(chǔ)8.1JavaScript對象概述8.2對象8.3內(nèi)置對象習(xí)題88.2對象8.2.1對象的概念在JavaScript中，可以使用的對象有：JavaScript的內(nèi)置對象、由瀏覽器根據(jù)Web頁面的內(nèi)容自動(dòng)提供的對象、用戶自定義的對象。所以，要使用一個(gè)對象，有下面3種方法：引用JavaScript內(nèi)置對象。由瀏覽器環(huán)境中提供的對象。創(chuàng)建新對象。8.2對象8.2.2類1．使用構(gòu)造函數(shù)function類名(參數(shù)1,參數(shù)2,…){//在此處定義類的屬性

this.屬性1=參數(shù)1;this.屬性2=參數(shù)2;…}//在此處定義類的方法類名.prototype.方法名=function(形參1,形參2,…){//在此處實(shí)現(xiàn)方法};8.2對象例如，用構(gòu)造函數(shù)創(chuàng)建一個(gè)User類，代碼如下：functionUser(name,sex,age){//創(chuàng)建一個(gè)類User，有3個(gè)屬性

=name;//name屬性

this.sex=sex;//sex屬性

this.age=age;//age屬性}Utotype.getName=function(){//getName方法

return;//返回名};8.2對象2．使用class關(guān)鍵字class類名{constructor(參數(shù)1,參數(shù)2,...){//定義類的屬性

this.屬性1=參數(shù)1;this.屬性2=參數(shù)2;...}

方法名(形參1,形參2,…){//實(shí)現(xiàn)方法

}}8.2對象例如，用class關(guān)鍵字創(chuàng)建一個(gè)Person類，代碼如下：classPerson{constructor(name,age){=name;//name屬性

this.age=age;//age屬性

}getName(){//getName方法

return"我的名字是"+;}}8.2對象8.2.3創(chuàng)建對象1．用構(gòu)造函數(shù)方式創(chuàng)建對象其格式為：var對象名=new構(gòu)造函數(shù)名(值1,值2,…);例如，依據(jù)構(gòu)造函數(shù)User創(chuàng)建對象user：varuser=newUser("張三","女",18);8.2對象2．用ES6的類語法創(chuàng)建對象創(chuàng)建對象使用new關(guān)鍵字后跟類名，其格式為：var對象名=new類名(值1,值2,…);例如，創(chuàng)建Person類的一個(gè)對象person：varperson=newPerson("李四",19);8.2對象3．用字面量方式創(chuàng)建對象語法格式為：const對象名={屬性名1:屬性值1,屬性名2:屬性值2,…};例如，創(chuàng)建對象并傳入相應(yīng)的屬性：varstudent={id:1001,name:"Jenny",age:18};8.2對象4．用Object構(gòu)造函數(shù)創(chuàng)建對象var對象名=newObject();對象名.屬性名1=屬性值1;對象名.屬性名2=屬性值2;…例如，創(chuàng)建對象并傳入相應(yīng)的屬性：varperson=newObject();="李四";person.age=19;8.2對象【例8-1】定義類，然后創(chuàng)建對象。本例文件8-1.html在瀏覽器中顯示如圖8-1所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>定義類，創(chuàng)建對象</title><scripttype="text/javascript">functionUser(name,sex,age){//創(chuàng)建一個(gè)構(gòu)造函數(shù)User，有3個(gè)屬性，1個(gè)方法

=name;//name屬性，this表示此類的成員

this.sex=sex;//sex屬性

this.age=age;//age屬性

this.getName=function(){//getName方法

return;//返回名

};}8.2對象varuser=newUser("張三","女",18);//創(chuàng)建對象

document.write(user.getName());//調(diào)用方法輸出：張三

document.write("<br>");//換行

classPerson{//創(chuàng)建一個(gè)類

constructor(name,age){=name;//name屬性

this.age=age;//age屬性

}getName(){//getName方法

return"我的名字是"+;//返回name}}varperson=newPerson("李四",19);document.write(person.getName());//調(diào)用方法輸出：李四

</script></head><body></body></html>8.2對象8.2.4對象的屬性1．添加屬性或?yàn)橐延袑傩再x值其格式為：對象名.屬性名=屬性值;或?qū)ο竺鸞"屬性名"]=屬性值;如果該屬性不存在，則為該對象添加這個(gè)屬性和屬性值；如果該屬性已經(jīng)在對象中存在，則為該屬性賦新值。8.2對象2．引用屬性常用的引用屬性的方法有兩種，其格式為：對象名.屬性名或?qū)ο竺鸞"屬性名"]如果引用的屬性不存在，則該值為undefined。8.2對象【例8-2】創(chuàng)建一個(gè)空對象student，然后為student對象添加id、name、age這3個(gè)屬性，并為屬性賦值。本例文件8-2.html在瀏覽器中顯示如圖8-2所示。<scripttype="text/javascript">varstudent={};//創(chuàng)建一個(gè)空對象

student.id=1001;student["name"]="張方";student.age=18;document.write(student.id+"<br>"++"<br>"+student.age+"<br><br>");="張芳";//name重新賦值

student["age"]=19;//age重新賦值

document.write(student.id+"<br>"++"<br>"+student.age+"<br>"+student.sex);</script>8.2對象3．刪除屬性delete操作符可以刪除一個(gè)對象的屬性。其格式為：delete對象名.屬性名;或delete對象名["屬性名"];請注意，delete操作符不能刪除整個(gè)對象，只能刪除對象的屬性。8.2對象4．檢測屬性要判斷一個(gè)屬性是否存在于一個(gè)對象中，可以使用“'屬性名'in對象名”或“對象名.hasOwnProperty('屬性名')”等方式進(jìn)行檢測?！纠?-3】先創(chuàng)建一個(gè)空對象user，然后為其添加屬性id、name、gender、age共4個(gè)屬性，刪掉屬性gender，然后通過屬性名判斷該屬性在對象中是否存在。本例文件8-3.html在瀏覽器中顯示如圖8-3所示。8.2對象<scripttype="text/javascript">varuser={};//創(chuàng)建一個(gè)空對象

user.id="1001";//添加屬性

="李真";user.gender="男";user["age"]=20;varflag;if("age"inuser){flag="user對象中有age屬性";}else{flag="user對象中沒有age屬性";}document.write(flag+"<br>");//顯示：user對象中有age屬性

deleteuser["gender"];if(user.hasOwnProperty("gender")){flag="有g(shù)ender屬性";}else{flag="無gender屬性";}document.write(flag);//顯示：無gender屬性</script>8.2對象8.2.5對象的方法1．添加方法可以通過“對象名.方法名”創(chuàng)建方法，其格式為：對象名.方法名=function(形參1,形參2,…){//語句塊;return返回值;}8.2對象2．調(diào)用方法對象名.方法名(實(shí)參1,實(shí)參2,…);【例8-4】創(chuàng)建一個(gè)空對象student，為該對象添加5個(gè)屬性：id、name、gender、dateofbirth、courses，然后添加getName()、chooseCourse()方法。本例文件8-4.html在瀏覽器中顯示如圖8-4所示。8.2對象<scripttype="text/javascript">varstudent={};//創(chuàng)建一個(gè)空對象

student.id=1003;//為該對象添加屬性

="劉強(qiáng)";student.gender="男";student.dateofbirth="2003-5-17";student.courses=[];//所選課程聲明為數(shù)組，可以添加多門課程

student.getName=function(){//添加獲取姓名的方法

return;//返回對象的姓名屬性

}student.chooseCourse=function(courseName){//添加選擇課程的方法

this.courses.push(courseName);//向課程數(shù)組中添加課程

}8.2對象

student.getName();//調(diào)用獲取姓名的方法

student.chooseCourse("Web前端開發(fā)");//調(diào)用選擇課程的方法，添加一門課程

student.chooseCourse("數(shù)據(jù)庫原理及應(yīng)用");student.chooseCourse("C#面向?qū)ο蟪绦蛟O(shè)計(jì)");document.write(student.getName()+"<br>");//輸出:劉強(qiáng)

document.write(student.courses);//輸出:Web前端開發(fā),數(shù)據(jù)庫原理及應(yīng)用,C#面向?qū)ο蟪绦蛟O(shè)計(jì)</script>8.2對象3．刪除方法刪除方法的格式為：delete對象名.方法名;例如，要?jiǎng)h除student對象的getName()方法，代碼如下：deletestudent.getName;//注意：調(diào)用delete時(shí)，方法名后沒有小括號(hào)()8.2對象8.2.6對象的遍歷for...in語句的基本格式為：for(var鍵in對象){//語句塊;}8.2對象【例8-5】遍歷例8-4中的屬性和方法。使用for...in循環(huán)遍歷student對象，獲取該對象的所有屬性和方法，然后通過student[key]讀取每個(gè)屬性的值。本例文件8-5.html在瀏覽器中顯示如圖8-5所示。for(varkeyinstudent){//用forin遍歷出student的鍵

document.write(key+"="+student[key]);document.write("<br>");}8.2對象8.2.7對象的事件事件是對象上發(fā)生的一些動(dòng)作。這些動(dòng)作是預(yù)先定義好的，并且可以被對象識(shí)別，例如單擊（Click）事件、雙擊（DblClick）事件、頁面加載（Load）事件、鼠標(biāo)移動(dòng)（MouseMove）事件等。不同的對象可以識(shí)別不同的事件。通過這些事件，可以調(diào)用對象的方法，以產(chǎn)生不同的行為。JavaScript的事件將在第9章進(jìn)行詳細(xì)介紹。祝賀你又學(xué)完了一節(jié)《網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源JavaScript是一種基于對象的編程語言，JavaScript將對象分為內(nèi)置對象、瀏覽器內(nèi)置對象和自定義對象三種。本章主要講述常用JavaScript內(nèi)置對象。第7章JavaScript語法基礎(chǔ)7.8內(nèi)置對象目錄第8章JavaScript對象基礎(chǔ)8.1JavaScript對象概述8.2對象8.3內(nèi)置對象習(xí)題88.3內(nèi)置對象8.3.1數(shù)學(xué)對象1.數(shù)學(xué)對象的屬性8.3內(nèi)置對象使用Math對象的屬性的語法如下：var變量名=Math.屬性;例如，引用Math對象的PI屬性，代碼為：varpi_value=Math.PI;8.3內(nèi)置對象2.數(shù)學(xué)對象的方法8.3內(nèi)置對象使用Math對象的方法的語法如下：var變量名=Math.方法(參數(shù));例如：varsqrt_value=Math.sqrt(16);8.3內(nèi)置對象8.3內(nèi)置對象保留小數(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)置對象8.3.2字符串對象1.字符串對象的創(chuàng)建（1）直接聲明字符串變量語法格式如下：var字符串變量名=字符串;例如，創(chuàng)建字符串對象st，并對其賦值，代碼如下：varst="HelloWorld";8.3內(nèi)置對象（2）使用new關(guān)鍵字創(chuàng)建字符串對象使用new關(guān)鍵字創(chuàng)建字符串對象的語法格式如下：var字符串對象名=newString(字符串);8.3內(nèi)置對象2.String對象的屬性String對象的屬性只有3個(gè)，見表。8.3內(nèi)置對象3.String對象的方法8.3內(nèi)置對象【例8-6】創(chuàng)建一個(gè)String對象，調(diào)用anchor方法創(chuàng)建一個(gè)錨點(diǎn)，該錨點(diǎn)的name屬性為Anchor1。本例文件8-6.html在瀏覽器中顯示如圖8-6所示。8.3內(nèi)置對象<scripttype="text/javascript">varstrVariable="歡迎訪問網(wǎng)易/";//創(chuàng)建字符串對象

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

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

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)置對象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)置對象例如，下面代碼獲取兩日期月份之差。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)置對象例如，下面代碼得到間隔時(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)置對象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)置對象例如，下面的代碼將當(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)置對象8.3.4數(shù)組對象1.定義數(shù)組（1）常規(guī)方式用Array()構(gòu)造函數(shù)和new關(guān)鍵字創(chuàng)建指定長度的數(shù)組對象，語法格式如下：var數(shù)組名=newArray([size]);例如，下面代碼分別定義名為cars1長度為0和名為cars2長度為5的數(shù)組對象：varcars1=newArray();varcars2=newArray(5);cars2數(shù)組的下標(biāo)元素為cars2[0]、cars2[1]、cars2[2]、cars2[3]和cars2[4]。8.3內(nèi)置對象（2）簡潔方式語法格式如下：var數(shù)組名=newArray(元素1,元素2,元素3,…);例如，下面代碼定義數(shù)組包含元素“TOYOTA”、“Audi”、“BMW”的數(shù)組cars3。varcars3=newArray("TOYOTA","Audi","BMW");8.3內(nèi)置對象（3）字面方式語法格式如下：var數(shù)組名=[元素1,元素2,元素3,…];例如，下面代碼定義數(shù)組同樣包含元素“TOYOTA”、“Audi”、“BMW”的數(shù)組cars4。varcars4=["TOYOTA","Audi","BMW"];8.3內(nèi)置對象2.數(shù)組對象的屬性例如，聲明元素個(gè)數(shù)為3的數(shù)組對象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)置對象3.數(shù)組對象的方法8.3內(nèi)置對象4.訪問數(shù)組可以對數(shù)組元素賦值或取值，其語法格式如下：數(shù)組變量[i]=值;//為數(shù)組元素賦值，i是下標(biāo)序列號(hào)變量名=數(shù)組變量[i];//用數(shù)組元素為變量賦值8.3內(nèi)置對象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)置對象（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)置對象6.遍歷數(shù)組（1）使用for循環(huán)變量數(shù)組【例8-9】遍歷數(shù)組cars，本例文件8-9.html在瀏覽器中顯示如圖8-9所示。8.3內(nèi)置對象<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)置對象（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)置對象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)置對象（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)置對象（3）用splice()方法刪除數(shù)組元素splice()方法從指定位置刪除指定的元素，并縮減數(shù)組長度，語法格式為：數(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)置對象8．插入數(shù)組元素（1）用unshift()方法插入元素unshift()方法向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。語法格式為：數(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)置對象（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)置對象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)置對象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)置對象11．?dāng)?shù)組元素反序reverse()方法將數(shù)組中的元素按相反順序排列，而且是改變當(dāng)前的數(shù)組，不創(chuàng)建新的數(shù)組。語法格式為：數(shù)組名.reverse()例如，以下代碼直接在number數(shù)組中對元素反序排列。varnumber=["111","222","333","444"];number.reverse();document.write(number);//444,333,222,1118.3內(nèi)置對象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)置對象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)置對象（2）未知長度的二維數(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)置對象【例8-10】構(gòu)造二維數(shù)組，本例文件8-10.html在瀏覽器中顯示如圖8-10所示。<scripttype="text/javascript">vararr=newArray();//先聲明一維數(shù)組

n=10;//一維長度為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)置對象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)置對象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)置對象使用擴(kuò)展運(yùn)算符向數(shù)組中添加元素，代碼如下：letarr3=['this','is','an'];arr3=[...arr3,'array'];//添加元素document.write(arr3);//輸出:['this','is','an','array']8.3內(nèi)置對象使用擴(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)置對象使用擴(kuò)展運(yùn)算符將一個(gè)字符串分解成單個(gè)字符的數(shù)組，代碼如下：conststr='Hello';constarr=[...str];//對這個(gè)字符串使用擴(kuò)展運(yùn)算符，得到一個(gè)字符數(shù)組document.write(arr);//輸出:['H','e','l','l','o']8.3內(nèi)置對象使用擴(kuò)展運(yùn)算符復(fù)制數(shù)組，代碼如下：constarr5=[1,2,3];constarr6=[...arr5];document.write(arr6);//顯示：[1,2,3]8.3內(nèi)置對象3

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論