JavaScript+jQuery交互式Web前端開(kāi)發(fā)（第2版） 課件 第5章 對(duì)象

第5章對(duì)象《JavaScript+jQuery交互式Web前端開(kāi)發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解什么是對(duì)象，能夠闡述JavaScript中對(duì)象的概念

掌握對(duì)象的創(chuàng)建方式，能夠靈活應(yīng)用3種方式創(chuàng)建對(duì)象

掌握對(duì)象的遍歷，能夠遍歷對(duì)象的屬性和方法

掌握Math對(duì)象的使用，能夠使用Math對(duì)象的常用方法和屬性實(shí)現(xiàn)有關(guān)數(shù)學(xué)的

運(yùn)算學(xué)習(xí)目標(biāo)/Target掌握日期對(duì)象的使用，能夠使用日期對(duì)象的常用方法處理日期和時(shí)間

掌握數(shù)組對(duì)象的使用，能夠使用數(shù)組對(duì)象的常用方法對(duì)數(shù)組進(jìn)行操作

掌握字符串對(duì)象的使用，能夠使用字符串對(duì)象的常用方法處理字符串

掌握MDNWeb文檔的查閱方式，能夠在MDNWeb文檔中查詢(xún)對(duì)象章節(jié)概述/Summary在日常生活中，對(duì)象通常是指具體的事物，如桌子、水杯、計(jì)算機(jī)等看得見(jiàn)、摸得著的實(shí)物。在JavaScript中，也有對(duì)象的概念。JavaScript中的對(duì)象屬于復(fù)雜數(shù)據(jù)類(lèi)型，使用對(duì)象可以方便地管理多個(gè)數(shù)據(jù)，例如，保存網(wǎng)站用戶(hù)的姓名、年齡、電話(huà)號(hào)碼等信息。相對(duì)于將數(shù)據(jù)保存為基本數(shù)據(jù)類(lèi)型，將數(shù)據(jù)保存為對(duì)象不僅更加靈活，而且更易于區(qū)分各種數(shù)據(jù)。本章將對(duì)JavaScript中的對(duì)象進(jìn)行詳細(xì)講解。目錄/Contents5.15.25.3初識(shí)對(duì)象對(duì)象的創(chuàng)建對(duì)象的遍歷5.4Math對(duì)象目錄/Contents5.55.65.7日期對(duì)象數(shù)組對(duì)象字符串對(duì)象5.8查閱MDNWeb文檔初識(shí)對(duì)象5.1了解什么是對(duì)象，能夠闡述JavaScript中對(duì)象的概念

先定一個(gè)小目標(biāo)！5.1初識(shí)對(duì)象在現(xiàn)實(shí)生活中，通過(guò)描述對(duì)象的特征可以區(qū)分不同的對(duì)象，例如，通過(guò)描述員工的姓名、年齡、身高等特征來(lái)區(qū)分不同的員工對(duì)象。在學(xué)習(xí)對(duì)象前，如果需要在程序中描述員工的特征，可能需要聲明多個(gè)變量，例如，聲明變量name描述員工的姓名、聲明變量age描述員工的年齡、聲明變量height描述員工的身高等。5.1初識(shí)對(duì)象當(dāng)需要描述多個(gè)員工的特征時(shí)，如果每個(gè)員工的姓名、年齡、身高等特征都通過(guò)聲明變量來(lái)描述，會(huì)使程序出現(xiàn)大量的變量，導(dǎo)致程序代碼冗余，難以維護(hù)。因此，可以使用對(duì)象來(lái)描述員工的特征，將員工的多個(gè)特征保存在對(duì)象中，能夠更加方便地管理和操作員工的特征。5.1初識(shí)對(duì)象對(duì)象是一種復(fù)雜數(shù)據(jù)類(lèi)型，由屬性和方法組成。屬性是指對(duì)象的特征，如學(xué)生的姓名、性別、年齡等；方法是指對(duì)象的行為，如學(xué)生唱歌、跳舞、寫(xiě)作業(yè)等。對(duì)象的屬性和方法統(tǒng)稱(chēng)為對(duì)象的成員。通過(guò)對(duì)象可以更直觀地描述一個(gè)實(shí)體的特征和行為，并提供訪(fǎng)問(wèn)和操作方法。5.1初識(shí)對(duì)象在JavaScript中，屬性可以看成保存在對(duì)象中的變量，使用“對(duì)象.屬性名”進(jìn)行訪(fǎng)問(wèn)；方法可以看成保存在對(duì)象中的函數(shù)，使用“對(duì)象.方法名()”進(jìn)行訪(fǎng)問(wèn)。對(duì)象的創(chuàng)建5.2掌握對(duì)象的創(chuàng)建方式，能夠靈活應(yīng)用字面量的方式創(chuàng)建對(duì)象

先定一個(gè)小目標(biāo)！5.2.1 利用字面量創(chuàng)建對(duì)象利用字面量創(chuàng)建對(duì)象就是指用大括號(hào)“{}”來(lái)標(biāo)注對(duì)象成員，每個(gè)對(duì)象成員通過(guò)鍵值對(duì)的形式保存，即“key:value”的形式。對(duì)象字面量的語(yǔ)法格式如下。{key1:value1,key2:value2,…}上述語(yǔ)法格式中，key1和key2表示對(duì)象成員的名稱(chēng)，即屬性名或方法名；value1和value2表示對(duì)象成員的值，即屬性名對(duì)應(yīng)的值或方法名對(duì)應(yīng)的值。多個(gè)對(duì)象成員之間使用逗號(hào)“,”隔開(kāi)。5.2.1 利用字面量創(chuàng)建對(duì)象需要說(shuō)明的是，當(dāng)對(duì)象中沒(méi)有成員時(shí)，鍵值對(duì)可以省略，此時(shí)“{}”表示空對(duì)象。5.2.1 利用字面量創(chuàng)建對(duì)象下面通過(guò)代碼演示如何利用字面量創(chuàng)建對(duì)象。<script>//創(chuàng)建一個(gè)空對(duì)象varobj={};//創(chuàng)建一個(gè)學(xué)生對(duì)象varstudent={name:'小智', //name屬性sex:'男', //sex屬性

age:'20', //age屬性

sayHello:function(){ //sayHello()方法

console.log('Hello');

}};</script>5.2.1 利用字面量創(chuàng)建對(duì)象當(dāng)創(chuàng)建對(duì)象后，如果想要訪(fǎng)問(wèn)對(duì)象的成員，可以使用兩種方式，第1種方式是使用“.”，第2種方式是使用“[]”，示例代碼如下。//第1種方式：使用“.”訪(fǎng)問(wèn)對(duì)象的成員console.log();//輸出對(duì)象的屬性，輸出結(jié)果為：小智student.sayHello(); //調(diào)用對(duì)象的方法，輸出結(jié)果為：Hello//第2種方式：使用“[]”訪(fǎng)問(wèn)對(duì)象的成員console.log(student['sex']);

//輸出對(duì)象的屬性，輸出結(jié)果為：男student['sayHello'](); //調(diào)用對(duì)象的方法，輸出結(jié)果為：Hello5.2.1 利用字面量創(chuàng)建對(duì)象如果對(duì)象的成員名中包含特殊字符，則可以用字符串來(lái)表示成員名，通過(guò)“[]”進(jìn)行訪(fǎng)問(wèn)，示例代碼如下。varstudent02={'name-sex':'小強(qiáng)-男',};console.log(student02['name-sex']); //輸出結(jié)果為：小強(qiáng)-男5.2.1 利用字面量創(chuàng)建對(duì)象如果一個(gè)對(duì)象中沒(méi)有任何成員，則可以通過(guò)為屬性或方法賦值的方式來(lái)添加對(duì)象成員，示例代碼如下。5.2.1 利用字面量創(chuàng)建對(duì)象<script>varobj={}; //創(chuàng)建一個(gè)空對(duì)象='小娜'; //為對(duì)象添加name屬性（使用“.”語(yǔ)法）obj['sex']='女'; //為對(duì)象添加sex屬性（使用“[]”語(yǔ)法）obj.sayHello=function(){ //為對(duì)象添加sayHello()方法（使用“.”語(yǔ)法）console.log('Hello');};obj['dance']=function(){ //為對(duì)象添加dance()方法（使用“[]”語(yǔ)法）console.log('小娜在跳民族舞');};console.log(); //訪(fǎng)問(wèn)name屬性，輸出結(jié)果為：小娜console.log(obj.sex); //訪(fǎng)問(wèn)sex屬性，輸出結(jié)果為：女obj.sayHello(); //調(diào)用對(duì)象的方法，輸出結(jié)果為：Helloobj.dance(); //調(diào)用對(duì)象的方法，輸出結(jié)果為：小娜在跳民族舞</script>如果訪(fǎng)問(wèn)對(duì)象中不存在的成員，則返回undefined，示例代碼如下。5.2.1 利用字面量創(chuàng)建對(duì)象varobj={};console.log(); //輸出結(jié)果為：undefined掌握對(duì)象的創(chuàng)建方式，能夠靈活應(yīng)用構(gòu)造函數(shù)的方式創(chuàng)建對(duì)象

先定一個(gè)小目標(biāo)！5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象當(dāng)需要?jiǎng)?chuàng)建一個(gè)班級(jí)中所有的學(xué)生對(duì)象時(shí)，如果利用字面量的方式逐一創(chuàng)建學(xué)生對(duì)象，需要編寫(xiě)很多重復(fù)的代碼，開(kāi)發(fā)效率比較低。為此，可以利用構(gòu)造函數(shù)的方式來(lái)創(chuàng)建對(duì)象。首先將學(xué)生看成一類(lèi)對(duì)象，并將學(xué)生擁有的共同特征和行為寫(xiě)在構(gòu)造函數(shù)中，然后通過(guò)構(gòu)造函數(shù)一次性創(chuàng)建整個(gè)班級(jí)中的所有學(xué)生對(duì)象。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象構(gòu)造函數(shù)是一種特殊的函數(shù)，它提供了生成對(duì)象的模板，并描述了對(duì)象基本結(jié)構(gòu)，主要用于在創(chuàng)建對(duì)象時(shí)進(jìn)行初始化，即為對(duì)象的成員賦初始值。通過(guò)一個(gè)構(gòu)造函數(shù)可以創(chuàng)建多個(gè)具有相同結(jié)構(gòu)的對(duì)象，這個(gè)過(guò)程稱(chēng)為實(shí)例化，通過(guò)構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象被稱(chēng)為構(gòu)造函數(shù)的實(shí)例對(duì)象。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象定義構(gòu)造函數(shù)的語(yǔ)法格式和定義普通函數(shù)的語(yǔ)法格式類(lèi)似，二者的區(qū)別是，構(gòu)造函數(shù)的名稱(chēng)推薦首字母大寫(xiě)。定義構(gòu)造函數(shù)的語(yǔ)法格式如下。function構(gòu)造函數(shù)名([參數(shù)1,參數(shù)2,...]){

函數(shù)體}5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象上述語(yǔ)法格式中，構(gòu)造函數(shù)名要以大寫(xiě)字母開(kāi)頭，以便與普通函數(shù)區(qū)分；構(gòu)造函數(shù)的參數(shù)可以有一個(gè)或多個(gè)，也可以省略。在構(gòu)造函數(shù)的函數(shù)體中，可以為新創(chuàng)建的對(duì)象添加成員，其語(yǔ)法格式如下。this.屬性=值;this.方法=function([參數(shù)1,參數(shù)2,...]){

方法體};5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象上述語(yǔ)法格式中，this表示新創(chuàng)建的對(duì)象。定義構(gòu)造函數(shù)后，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的語(yǔ)法格式如下。var變量名=new構(gòu)造函數(shù)([參數(shù)1,參數(shù)2,...]);5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象上述語(yǔ)法格式中，參數(shù)可以有一個(gè)或多個(gè)，當(dāng)不需要傳入?yún)?shù)時(shí)，參數(shù)可以省略，且小括號(hào)也可以省略。定義一個(gè)Student()構(gòu)造函數(shù)，利用Student()構(gòu)造函數(shù)創(chuàng)建學(xué)生對(duì)象，實(shí)現(xiàn)學(xué)生的自我介紹，示例代碼如下。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象<script>

//定義一個(gè)Student()構(gòu)造函數(shù)

functionStudent(name,age){

=name;

this.age=age;

roduce=function(){

console.log(`大家好，我叫${}，今年${this.age}歲`);

};

}5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象

//使用Student()構(gòu)造函數(shù)創(chuàng)建對(duì)象

varstu1=newStudent('小智',20);

roduce();

varstu2=newStudent('小麗',19);

roduce();

varstu3=newStudent('小娜',18);

roduce();</script>>>續(xù)上一頁(yè)代碼5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象靜態(tài)成員和實(shí)例成員多學(xué)一招在JavaScript中，構(gòu)造函數(shù)也屬于對(duì)象，因此，構(gòu)造函數(shù)也有成員。為了區(qū)分構(gòu)造函數(shù)的成員和實(shí)例對(duì)象的成員，我們將構(gòu)造函數(shù)的成員稱(chēng)為靜態(tài)成員，將實(shí)例對(duì)象的成員稱(chēng)為實(shí)例成員。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象多學(xué)一招下面通過(guò)代碼演示靜態(tài)成員和實(shí)例成員在創(chuàng)建與使用過(guò)程中的區(qū)別。5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象

<script>

functionCat(name){

//添加實(shí)例成員

=name;

this.say=function(){

console.log('喵喵喵');

};

}

//添加靜態(tài)成員

Cat.type='小貓';

Cat.run=function(){

console.log('抓老鼠');

};多學(xué)一招5.2.2 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象//使用靜態(tài)成員

console.log(Cat.type);

//輸出結(jié)果為：小貓

Cat.run();

//輸出結(jié)果為：抓老鼠

//使用實(shí)例成員

varcat1=newCat('小花');

console.log();

//輸出結(jié)果為：小花

cat1.say();

//輸出結(jié)果為：喵喵喵</script>>>續(xù)上一頁(yè)代碼掌握對(duì)象的創(chuàng)建方式，能夠靈活應(yīng)用Object()的方式創(chuàng)建對(duì)象

先定一個(gè)小目標(biāo)！5.2.3 利用Object()創(chuàng)建對(duì)象在JavaScript中，除了可以利用字面量或構(gòu)造函數(shù)創(chuàng)建對(duì)象，還可以利用Object()創(chuàng)建對(duì)象。對(duì)象也有構(gòu)造函數(shù)，它的構(gòu)造函數(shù)是Object()。5.2.3 利用Object()創(chuàng)建對(duì)象5.2.3 利用Object()創(chuàng)建對(duì)象使用Object()創(chuàng)建對(duì)象的示例代碼如下。varobj=newObject();上述示例代碼使用new關(guān)鍵字和Object()構(gòu)造函數(shù)創(chuàng)建了一個(gè)空對(duì)象，并將其賦值給obj變量。5.2.3 利用Object()創(chuàng)建對(duì)象使用Object()創(chuàng)建對(duì)象后，可以為對(duì)象添加成員，示例代碼如下。<script>

varobj=newObject();

='小智';

obj.sex='男';

obj.sayHello=function(){

console.log('Hello');

};</script>this的指向多學(xué)一招在定義函數(shù)時(shí)并不能確定this的指向，只有在運(yùn)行函數(shù)的過(guò)程中才能確定this的指向。通常，this指向的是調(diào)用的對(duì)象。下面通過(guò)3個(gè)具體場(chǎng)景進(jìn)行講解。5.2.3 利用Object()創(chuàng)建對(duì)象多學(xué)一招5.2.3 利用Object()創(chuàng)建對(duì)象在全局作用域或者普通函數(shù)中，this指向全局對(duì)象window，示例代碼如下。console.log(this);

//this指向全局對(duì)象windowfunctionfn(){ console.log(this);}fn();多學(xué)一招5.2.3 利用Object()創(chuàng)建對(duì)象在方法中，this指向調(diào)用它所在方法的對(duì)象，示例代碼如下。varuser={sayHi:function(){console.log(this);}};user.sayHi(); //sayHi()方法中的this指向user對(duì)象多學(xué)一招5.2.3 利用Object()創(chuàng)建對(duì)象在構(gòu)造函數(shù)中，this指向新創(chuàng)建的實(shí)例，示例代碼如下。functionFun(){console.log(this);}varfun=newFun();//Fun中的this指向新創(chuàng)建的實(shí)例fun對(duì)象的遍歷5.3掌握對(duì)象的遍歷，能夠遍歷對(duì)象的屬性和方法

先定一個(gè)小目標(biāo)！5.3對(duì)象的遍歷for(var變量in對(duì)象){

具體操作}在實(shí)際開(kāi)發(fā)中，如果需要查詢(xún)對(duì)象的屬性和方法，就需要進(jìn)行對(duì)象的遍歷。對(duì)象的遍歷是指訪(fǎng)問(wèn)對(duì)象中的所有成員。在JavaScript中，使用for…in語(yǔ)法可以實(shí)現(xiàn)對(duì)象的遍歷，其語(yǔ)法格式如下。5.3對(duì)象的遍歷在上述語(yǔ)法格式中，變量表示對(duì)象中的成員名；對(duì)象表示需要進(jìn)行遍歷的對(duì)象；在具體操作中，可以通過(guò)“console.log(對(duì)象[變量])”訪(fǎng)問(wèn)對(duì)象的屬性，通過(guò)“對(duì)象[變量]()”調(diào)用對(duì)象的方法。//準(zhǔn)備一個(gè)待遍歷的學(xué)生對(duì)象studentvarstudent={

name:'小智',

sex:'男',

age:20};//遍歷學(xué)生對(duì)象studentfor(varainstudent){

console.log(a);

console.log(student[a]);}下面通過(guò)代碼演示如何進(jìn)行對(duì)象的遍歷，示例代碼如下。5.3對(duì)象的遍歷判斷對(duì)象成員是否存在多學(xué)一招當(dāng)需要判斷對(duì)象中的某個(gè)成員是否存在時(shí)，可以使用in運(yùn)算符，如果判斷的結(jié)果為true，則表示該成員存在，如果判斷的結(jié)果為false，則表示該成員不存在，示例代碼如下。5.3對(duì)象的遍歷varobj={name:'小娜',sex:'女'};console.log('name'inobj); //輸出結(jié)果為：trueconsole.log('age'inobj); //輸出結(jié)果為：falseMath對(duì)象5.4掌握Math對(duì)象的使用，能夠使用Math對(duì)象的常用方法和屬性實(shí)現(xiàn)有關(guān)數(shù)學(xué)的運(yùn)算

先定一個(gè)小目標(biāo)！5.4.1 Math對(duì)象的使用Math對(duì)象表示數(shù)學(xué)對(duì)象，用于進(jìn)行與數(shù)學(xué)相關(guān)的運(yùn)算，該對(duì)象不是構(gòu)造函數(shù)，不需要實(shí)例化，可以直接使用其屬性和方法。5.4.1 Math對(duì)象的使用5.4.1 Math對(duì)象的使用Math對(duì)象的常用屬性和方法如下表所示。屬性和方法作用PI獲取圓周率，結(jié)果為3.141592653589793abs(x)獲取x的絕對(duì)值max([value1[,value2,…]])獲取所有參數(shù)中的最大值min([value1[,value2,…]])獲取所有參數(shù)中的最小值pow(base,exponent)獲取基數(shù)（base）的指數(shù)（exponent）次冪，即baseexponentsqrt(x)獲取x的平方根，若x為負(fù)數(shù)，則返回NaNceil(x)獲取大于或等于x的最小整數(shù)，即向上取整floor(x)獲取小于或等于x的最大整數(shù)，即向下取整round(x)獲取x的四舍五入后的整數(shù)值random()獲取大于或等于0且小于1的隨機(jī)值使用PI屬性獲取圓周率，并計(jì)算半徑為6的圓的面積，示例代碼如下。console.log(Math.PI*6*6);

//輸出結(jié)果為：113.097335529232555.4.1 Math對(duì)象的使用使用abs()方法計(jì)算數(shù)字-13的絕對(duì)值，示例代碼如下。console.log(Math.abs(-13));

//輸出結(jié)果為：135.4.1 Math對(duì)象的使用console.log(Math.max(12,9,21,36,15)); //輸出結(jié)果為：36console.log(Math.min(12,9,21,36,15)); //輸出結(jié)果為：9使用max()方法和min()方法計(jì)算一組數(shù)“12，9，21，36，15”的最大值和最小值，示例代碼如下。使用pow()方法計(jì)算3的4次冪，然后使用sqrt()方法對(duì)計(jì)算結(jié)果求平方根，示例代碼如下。a=Math.pow(3,4);console.log(a); //輸出結(jié)果為：81console.log(Math.sqrt(a)); //輸出結(jié)果為：95.4.1 Math對(duì)象的使用console.log(Math.ceil(3.1));

//輸出結(jié)果為：4console.log(Math.ceil(3.9));

//輸出結(jié)果為：4console.log(Math.floor(3.1));

//輸出結(jié)果為：3console.log(Math.floor(3.9));

//輸出結(jié)果為：3使用ceil()方法計(jì)算大于或等于3.1和3.9的最小整數(shù)，使用floor()方法計(jì)算小于或等于3.1和3.9的最大整數(shù)，示例代碼如下。5.4.1 Math對(duì)象的使用console.log(Math.round(2.1));

//輸出結(jié)果為：2console.log(Math.round(2.5));

//輸出結(jié)果為：3console.log(Math.round(2.9));

//輸出結(jié)果為：3console.log(Math.round(-2.5));

//輸出結(jié)果為：-2console.log(Math.round(-2.6));

//輸出結(jié)果為：-3使用round()方法實(shí)現(xiàn)計(jì)算數(shù)字2.1、2.5、2.9、-2.5和-2.6四舍五入后的整數(shù)值，

示例代碼如下。使用random()方法生成一個(gè)大于等于0且小于等于1的隨機(jī)數(shù)，示例代碼如下。console.log(Math.random());//輸出結(jié)果0.44156518524455257掌握random()方法的使用，能夠使用random()方法生成指定范圍的隨機(jī)數(shù)

先定一個(gè)小目標(biāo)！5.4.2 生成指定范圍的隨機(jī)數(shù)5.4.2 生成指定范圍的隨機(jī)數(shù)在使用random()方法生成隨機(jī)數(shù)時(shí)，每次調(diào)用輸出的結(jié)果都不相同，并且返回結(jié)果是一個(gè)很長(zhǎng)的浮點(diǎn)數(shù)，如0.44156518524455257，其范圍是0~1（不包括1）。若希望生成指定范圍內(nèi)的隨機(jī)數(shù)，可使用下列方式。//生成大于或等于m且小于n的隨機(jī)數(shù)Math.random()*(n-m)+m;//生成大于或等于m且小于或等于n的隨機(jī)整數(shù)Math.floor(Math.random()*(n-m+1)+m);//生成大于或等于0且小于或等于n的隨機(jī)整數(shù)Math.floor(Math.random()*(n+1));//生成大于或等于1且小于或等于n的隨機(jī)整數(shù)Math.floor(Math.random()*n+1);5.4.2 生成指定范圍的隨機(jī)數(shù)下面通過(guò)代碼演示如何獲取1~5的隨機(jī)整數(shù)。functiongetRandom(min,max){

returnMath.floor(Math.random()*(max-min+1)+min);}console.log(getRandom(1,5));使用隨機(jī)數(shù)可以實(shí)現(xiàn)在數(shù)組中隨機(jī)獲取一個(gè)元素，示例代碼如下。vararr=['老虎','獅子','熊貓','袋鼠','斑馬','大象'];//調(diào)用前面定義的getRandom()函數(shù)獲取隨機(jī)數(shù)console.log(arr[getRandom(0,arr.length-1)]);掌握猜數(shù)字游戲的案例，能夠編寫(xiě)代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！5.4.3 【案例】猜數(shù)字游戲某班級(jí)開(kāi)展活動(dòng)日，老師提出了猜數(shù)字游戲，游戲的規(guī)則是：老師隨機(jī)抽取1~10的數(shù)字，然后邀請(qǐng)一位同學(xué)來(lái)猜這個(gè)數(shù)字，如果該同學(xué)猜的數(shù)字比老師抽取的數(shù)字大，則提示“猜大了”；如果該同學(xué)猜的數(shù)字比老師抽取的數(shù)字小，則提示“猜小了”；如果該同學(xué)猜的數(shù)字等于老師抽取的數(shù)字，則提示“恭喜，猜對(duì)了”。5.4.3 【案例】猜數(shù)字游戲首先定義getRandom()函數(shù)，實(shí)現(xiàn)隨機(jī)生成1~10的數(shù)字，然后使用循環(huán)結(jié)構(gòu)實(shí)現(xiàn)讓程序一直運(yùn)行，在程序中接收用戶(hù)輸入的數(shù)字，并判斷輸入的數(shù)字和隨機(jī)數(shù)的大小關(guān)系。如果輸入的數(shù)字大于隨機(jī)數(shù)，則程序提示“猜大了”；如果輸入的數(shù)字小于隨機(jī)數(shù)，則程序提示“猜小了”；如果輸入的數(shù)字等于隨機(jī)數(shù)，則程序提示“恭喜，猜對(duì)了”，結(jié)束程序。5.4.3 【案例】猜數(shù)字游戲5.4.3 【案例】猜數(shù)字游戲5.4.3 【案例】猜數(shù)字游戲日期對(duì)象5.5掌握日期對(duì)象的使用，能夠使用日期對(duì)象的常用方法處理日期和時(shí)間

先定一個(gè)小目標(biāo)！5.5.1 日期對(duì)象的使用在JavaScript中，日期對(duì)象用于處理日期和時(shí)間，需要使用Date()構(gòu)造函數(shù)創(chuàng)建后才能使用。在創(chuàng)建日期對(duì)象時(shí)，可以向Date()構(gòu)造函數(shù)中傳入表示具體日期的參數(shù)。5.5.1 日期對(duì)象的使用Date()構(gòu)造函數(shù)有3種使用方式，第1種方式是省略參數(shù)；第2種方式是傳入數(shù)字型參數(shù)；第3種方式是傳入字符串型參數(shù)。5.5.1 日期對(duì)象的使用在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對(duì)象時(shí)，省略參數(shù)表示使用系統(tǒng)當(dāng)前時(shí)間，示例代碼如下。5.5.1 日期對(duì)象的使用1.省略參數(shù)vardate01=newDate();console.log(date01);//輸出結(jié)果為：FriMar10202309:36:37GMT+0800(中國(guó)標(biāo)準(zhǔn)時(shí)間)在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對(duì)象時(shí)，可以傳入以數(shù)字表示的年、月、日、時(shí)、分、秒?yún)?shù)，并且最少需要指定年、月兩個(gè)參數(shù)，若省略日、時(shí)、分、秒?yún)?shù)會(huì)自動(dòng)使用默認(rèn)值，即當(dāng)前的日期和時(shí)間。5.5.1 日期對(duì)象的使用2.傳入數(shù)字型參數(shù)注意月的取值范圍是0~11，其中0表示1月，1表示2月，以此類(lèi)推。當(dāng)傳入的數(shù)字大于取值范圍時(shí)，會(huì)自動(dòng)轉(zhuǎn)換成相鄰數(shù)字，例如，將月份設(shè)置為12表示明年1月，將月份設(shè)置為-1表示去年12月。為Date()構(gòu)造函數(shù)傳入數(shù)字型參數(shù)的示例代碼如下。5.5.1 日期對(duì)象的使用vardate02=newDate(2023,12-1,13,09,35,40);console.log(date02);//輸出結(jié)果為：WedDec13202309:35:40GMT+0800(中國(guó)標(biāo)準(zhǔn)時(shí)間)在使用Date()構(gòu)造函數(shù)創(chuàng)建日期對(duì)象時(shí)，可以傳入以字符串表示的日期和時(shí)間，字符串中最少需要指定年份。日期和時(shí)間的格式有多種，下面以“年-月-日時(shí):分:秒”的格式為例進(jìn)行講解。5.5.1 日期對(duì)象的使用3.傳入字符串型參數(shù)為Date()構(gòu)造函數(shù)傳入字符串型參數(shù)的示例代碼如下。vardate03=newDate('2023-12-1315:05:33');console.log(date03);//輸出結(jié)果為：WedDec13202315:05:33GMT+0800(中國(guó)標(biāo)準(zhǔn)時(shí)間)5.5.1 日期對(duì)象的使用創(chuàng)建日期對(duì)象后，若需要單獨(dú)獲取或設(shè)置年、月、日、時(shí)、分、秒中的某一項(xiàng)，可以調(diào)用日期對(duì)象的相關(guān)方法實(shí)現(xiàn)，獲取日期和時(shí)間的方法如下表所示。方法作用getFullYear()獲取表示年份的4位數(shù)字，如2023getMonth()獲取月份，取值范圍為0~11（0表示1月，1表示2月，以此類(lèi)推）

getDate()獲取月份中的某一天，取值范圍1~31getDay()獲取星期，取值范圍為0~6（0表示星期日，1表示星期一，以此類(lèi)推）getHours()獲取小時(shí)數(shù)，取值范圍為0~23getMinutes()獲取分鐘數(shù)，取值范圍為0~59getSeconds()獲取秒數(shù)，取值范圍為0~59getMilliseconds()獲取毫秒數(shù)，取值范圍為0~999getTime()獲取從1970-01-0100:00:00（UTC）到日期對(duì)象中存放的時(shí)間經(jīng)歷的毫秒數(shù)5.5.1 日期對(duì)象的使用設(shè)置日期和時(shí)間的方法如下表所示。方法作用setFullYear(value)設(shè)置年份setMonth(value)設(shè)置月份setDate(value)設(shè)置月份中的某一天setHours(value)設(shè)置小時(shí)數(shù)setMinutes(value)設(shè)置分鐘數(shù)setSeconds(value)設(shè)置秒數(shù)setMilliseconds(value)設(shè)置毫秒數(shù)setTime(value)通過(guò)從1970-01-0100:00:00（UTC）開(kāi)始計(jì)時(shí)的毫秒數(shù)來(lái)設(shè)置時(shí)間下面通過(guò)代碼演示如何使用日期對(duì)象提供的方法設(shè)置和獲取日期，并將獲取到的日期輸出到控制臺(tái)。5.5.1 日期對(duì)象的使用<script>

vardate=newDate();

//設(shè)置年、月、日

date.setFullYear(2023);

date.setMonth(8-1);

date.setDate(1);

//獲取年、月、日

varyear=date.getFullYear();

varmonth=date.getMonth()+1;

varday=date.getDate();

//通過(guò)數(shù)組將星期值轉(zhuǎn)換為字符串

varweek=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

console.log(`${year}年${month}月${day}日`+week[date.getDay()]);</script>在實(shí)際開(kāi)發(fā)中，還經(jīng)常需要將日期對(duì)象中的時(shí)間轉(zhuǎn)換成指定的格式，示例代碼如下。5.5.1 日期對(duì)象的使用//返回當(dāng)前時(shí)間，格式為“時(shí):分:秒”，用兩位數(shù)字表示functiongetTime(){vartime=newDate();varh=time.getHours();h=h<10?'0'+h:h;varm=time.getMinutes();m=m<10?'0'+m:m;vars=time.getSeconds();s=s<10?'0'+s:s;returnh+':'+m+':'+s;}console.log(getTime()); //輸出結(jié)果示例：14:45:23掌握統(tǒng)計(jì)代碼運(yùn)行時(shí)間的案例，能夠編寫(xiě)代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！5.5.2 【案例】統(tǒng)計(jì)代碼運(yùn)行時(shí)間通過(guò)日期對(duì)象可以獲取從1970年1月1日0時(shí)0分0秒到當(dāng)前UTC（CoordinatedUniversalTime，協(xié)調(diào)時(shí)間時(shí)）所經(jīng)過(guò)的毫秒數(shù)，這個(gè)值可以作為時(shí)間戳使用。通過(guò)時(shí)間戳可以計(jì)算兩個(gè)時(shí)間的時(shí)間差。5.5.2 【案例】統(tǒng)計(jì)代碼運(yùn)行時(shí)間獲取時(shí)間戳的常見(jiàn)方式有3種，第1種方式是通過(guò)日期對(duì)象的valueOf()方法或getTime()方法獲取，第2種方式是通過(guò)使用“+”運(yùn)算符將日期對(duì)象轉(zhuǎn)換為數(shù)字，這個(gè)數(shù)字代表的就是時(shí)間戳，第3種方式是使用HTML5新增的Date.now()方法獲取。5.5.2 【案例】統(tǒng)計(jì)代碼運(yùn)行時(shí)間獲取時(shí)間戳的示例代碼如下。//方式1：通過(guò)日期對(duì)象的valueOf()方法或getTime()方法獲取vardate1=newDate();console.log(date1.valueOf());

//輸出結(jié)果示例：1678440875203console.log(date1.getTime());

//輸出結(jié)果示例：1678440875203//方式2：使用“+”運(yùn)算符將日期對(duì)象轉(zhuǎn)換為數(shù)字vardate2=+newDate();console.log(date2);

//輸出結(jié)果示例：1678440875203//方式3：使用HTML5新增的Date.now()方法獲取console.log(Date.now());

//輸出結(jié)果示例：16784408752035.5.2 【案例】統(tǒng)計(jì)代碼運(yùn)行時(shí)間掌握獲取時(shí)間戳的方式后，下面通過(guò)代碼演示如何統(tǒng)計(jì)代碼運(yùn)行時(shí)間。5.5.2 【案例】統(tǒng)計(jì)代碼運(yùn)行時(shí)間<script>

vartimestamp1=+newDate();

for(vari=1,str='';i<=60000;i++){

str+=i;

}

vartimestamp2=+newDate();

console.log(`代碼運(yùn)行時(shí)間為：${(timestamp2-timestamp1)}毫秒`);</script>掌握倒計(jì)時(shí)的案例，能夠編寫(xiě)代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！5.5.3 【案例】倒計(jì)時(shí)用戶(hù)在電商網(wǎng)站購(gòu)物時(shí)，經(jīng)常會(huì)看到商家推出一些搶購(gòu)活動(dòng)，電商網(wǎng)站頁(yè)面上會(huì)顯示搶購(gòu)活動(dòng)開(kāi)始時(shí)間的倒計(jì)時(shí)，例如“距離搶購(gòu)活動(dòng)開(kāi)始還有02天23小時(shí)09分25秒”，像這樣的倒計(jì)時(shí)效果就可以通過(guò)日期對(duì)象實(shí)現(xiàn)。倒計(jì)時(shí)的核心算法是用搶購(gòu)活動(dòng)的開(kāi)始時(shí)間減去當(dāng)前的時(shí)間，得到的結(jié)果就是倒計(jì)時(shí)。5.5.3 【案例】倒計(jì)時(shí)定義一個(gè)函數(shù)，該函數(shù)的參數(shù)表示搶購(gòu)活動(dòng)的開(kāi)始時(shí)間，在函數(shù)內(nèi)獲取當(dāng)前的時(shí)間，并計(jì)算當(dāng)前時(shí)間到搶購(gòu)活動(dòng)開(kāi)始時(shí)間還有多長(zhǎng)時(shí)間，以

天

小時(shí)

分

秒的格式返回計(jì)算結(jié)果。5.5.3 【案例】倒計(jì)時(shí)數(shù)組對(duì)象5.6掌握數(shù)組對(duì)象的創(chuàng)建，能夠使用Array()構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象

先定一個(gè)小目標(biāo)！5.6.1 創(chuàng)建數(shù)組對(duì)象使用Array()構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象的語(yǔ)法格式如下。newArray(元素1,元素2,…)5.6.1 創(chuàng)建數(shù)組對(duì)象在上述語(yǔ)法格式中，“元素1,元素2,…”是指數(shù)組中實(shí)際保存的元素，元素的數(shù)量可以是0個(gè)或多個(gè)，各元素之間使用逗號(hào)分隔。若元素的數(shù)量是0個(gè)，則表示創(chuàng)建一個(gè)空數(shù)組。下面通過(guò)代碼演示如何使用Array()構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象。vararr01=newArray();vararr02=newArray(2);vararr03=newArray('土豆','黃瓜','玉米');vararr04=newArray(13,'蘋(píng)果',true,null,undefined);vararr05=newArray(11,newArray(22,33),44);console.log(arr01);

//輸出結(jié)果為：[]console.log(arr02);

//輸出結(jié)果為：(2)

[empty×2]console.log(arr03);

//輸出結(jié)果為：(3)

['土豆','黃瓜','玉米']console.log(arr04);

//輸出結(jié)果為：(5)

[13,'蘋(píng)果',true,null,undefined]console.log(arr05);

//輸出結(jié)果為：(3)

[11,Array(2),44]5.6.1 創(chuàng)建數(shù)組對(duì)象數(shù)組類(lèi)型的檢測(cè)多學(xué)一招在實(shí)際開(kāi)發(fā)中，有時(shí)候需要檢測(cè)變量的類(lèi)型是否為數(shù)組類(lèi)型。例如，在函數(shù)中，要求傳入的參數(shù)必須是一個(gè)數(shù)組，不能傳入其他類(lèi)型的值，否則會(huì)出錯(cuò)，此種情況就可以在函數(shù)中檢測(cè)參數(shù)的類(lèi)型是否為數(shù)組類(lèi)型。5.6.1 創(chuàng)建數(shù)組對(duì)象多學(xué)一招數(shù)組類(lèi)型檢測(cè)有兩種常用的方式，分別是使用instanceof運(yùn)算符和使用Array.isArray()方法，示例代碼如下。5.6.1 創(chuàng)建數(shù)組對(duì)象vararr=[];varobj={};//第1種方式console.log(arrinstanceofArray);

//輸出結(jié)果：trueconsole.log(objinstanceofArray);

//輸出結(jié)果：false//第2種方式console.log(Array.isArray(arr));

//輸出結(jié)果：trueconsole.log(Array.isArray(obj));

//輸出結(jié)果：false掌握添加或刪除數(shù)組元素，能夠使用數(shù)組對(duì)象提供的方法實(shí)現(xiàn)數(shù)組元素的添加或刪除

先定一個(gè)小目標(biāo)！5.6.2 添加或刪除數(shù)組元素在JavaScript中，數(shù)組對(duì)象提供了添加或刪除數(shù)組元素的方法，可以實(shí)現(xiàn)在數(shù)組的末尾或開(kāi)頭添加新的數(shù)組元素，以及在數(shù)組的末尾或開(kāi)頭刪除數(shù)組元素。添加或刪除數(shù)組元素的方法如下表所示。5.6.2 添加或刪除數(shù)組元素方法作用push(element1,…)在數(shù)組末尾添加一個(gè)或多個(gè)元素，會(huì)修改原數(shù)組，返回值為數(shù)組的新長(zhǎng)度unshift(element1,…)在數(shù)組開(kāi)頭添加一個(gè)或多個(gè)元素，會(huì)修改原數(shù)組，返回值為數(shù)組的新長(zhǎng)度pop()刪除數(shù)組的最后一個(gè)元素，會(huì)修改原數(shù)組，若是空數(shù)組則返回undefined，否則返回值為刪除的元素shift()刪除數(shù)組的第一個(gè)元素，會(huì)修改原數(shù)組，若是空數(shù)組則返回undefined，否則返回值為刪除的元素splice(start[,deleteCount][,item1][,…])在指定索引處刪除或添加數(shù)組元素，會(huì)修改原數(shù)組，返回值是一個(gè)由被刪除的元素組成的新元素下面通過(guò)代碼演示添加或刪除數(shù)組元素的方法的使用。5.6.2 添加或刪除數(shù)組元素//使用push()方法和unshift()方法添加數(shù)組元素vararr=['星期一','星期二','星期三','星期四','星期五'];console.log(arr.push('星期六'));

//輸出結(jié)果為：6console.log(arr.unshift('星期日'));

//輸出結(jié)果為：7//使用pop()方法和shift()方法刪除數(shù)組元素console.log(arr.pop());

//輸出結(jié)果為：星期六console.log(arr.shift()); //輸出結(jié)果為：星期日//使用splice()方法在數(shù)組的指定索引處添加或刪除數(shù)組元素vararr=['老虎','熊貓','獅子','大象'];>>續(xù)上一頁(yè)代碼5.6.2 添加或刪除數(shù)組元素//從索引2開(kāi)始，刪除2個(gè)元素arr.splice(2,2);console.log(arr);

//輸出結(jié)果為：(2)

['老虎','熊貓']//從索引1開(kāi)始，刪除1個(gè)元素，再添加獅子元素arr.splice(1,1,'獅子');console.log(arr);

//輸出結(jié)果為：(2)

['老虎','獅子']//從索引1處添加斑馬和獅子元素arr.splice(1,0,'斑馬','猴子');console.log(arr);

//輸出結(jié)果為：(4)

['老虎','斑馬','猴子','獅子']掌握篩選數(shù)組元素的案例，能夠編寫(xiě)代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！5.6.3 【案例】篩選數(shù)組元素下面通過(guò)一個(gè)案例演示數(shù)組對(duì)象的使用。本案例要求在保存學(xué)生成績(jī)的數(shù)組中，對(duì)每個(gè)成績(jī)進(jìn)行判斷，然后篩選大于或等于90分的學(xué)生成績(jī)，并將篩選出來(lái)的成績(jī)放到一個(gè)新的數(shù)組中。其中學(xué)生成績(jī)的數(shù)組為[83,92,88,76,93,90,84,77,96,90]

。5.6.3 【案例】篩選數(shù)組元素掌握數(shù)組元素排序，能夠靈活應(yīng)用數(shù)組元素排序方法

先定一個(gè)小目標(biāo)！5.6.4 數(shù)組元素排序在實(shí)際開(kāi)發(fā)中，有時(shí)候需要對(duì)數(shù)組元素進(jìn)行排序。數(shù)組對(duì)象提供了數(shù)組元素排序的方法，可以實(shí)現(xiàn)數(shù)組元素排序或者顛倒數(shù)組元素的順序，數(shù)組元素排序的方法如下表所示。5.6.4 數(shù)組元素排序方法作用reverse()顛倒數(shù)組中元素的順序，該方法會(huì)改變?cè)瓟?shù)組，返回新數(shù)組sort([compareFunction])對(duì)數(shù)組的元素進(jìn)行排序，返回新數(shù)組。compareFunction為可選參數(shù)，它是一個(gè)用于指定按某種順序排列元素的函數(shù)當(dāng)sort()方法沒(méi)有傳入?yún)?shù)時(shí)，會(huì)先將元素轉(zhuǎn)換為字符串，然后根據(jù)字符的Unicode代碼點(diǎn)進(jìn)行排序。如果讓元素按某種順序進(jìn)行排序，可以在sort()方法中傳入compareFunction參數(shù)，該參數(shù)是一個(gè)函數(shù)，會(huì)被sort()方法多次調(diào)用，每次調(diào)用時(shí)選取數(shù)組中的兩個(gè)元素進(jìn)行排序，直到整個(gè)數(shù)組元素排序完成。5.6.4 數(shù)組元素排序通過(guò)compareFunction參數(shù)傳入函數(shù)的語(yǔ)法格式如下。function(參數(shù)1,參數(shù)2){return值;}5.6.4 數(shù)組元素排序在上述語(yǔ)法格式中，參數(shù)1和參數(shù)2由sort()方法傳入，表示數(shù)組中待排序的兩個(gè)元素，函數(shù)的返回值決定了兩個(gè)元素的排列順序，具體規(guī)則如下。返回值是正數(shù)，第2個(gè)元素會(huì)被排列到第1個(gè)元素之前。返回值是0，兩個(gè)元素的順序不變。返回值是負(fù)數(shù)，第1個(gè)元素會(huì)被排列到第2個(gè)元素之前。下面通過(guò)代碼演示數(shù)組元素排序方法的使用。5.6.4 數(shù)組元素排序//反轉(zhuǎn)數(shù)組vararr=['蘋(píng)果','香蕉','芒果','雪梨'];arr.reverse();console.log(arr);

//輸出結(jié)果為：(4)

['雪梨','芒果','香蕉','蘋(píng)果']//升序排序vararr01=[23,3,43,33,13]arr01.sort(function(a,b){

returna-b;});console.log(arr01);

//輸出結(jié)果為：(5)

[3,13,23,33,43]//降序排序arr01.sort(function(a,b){

returnb-a;});console.log(arr01);

//輸出結(jié)果為：(5)

[43,33,23,13,3]掌握數(shù)組元素索引，能夠靈活應(yīng)用獲取數(shù)組元素索引的方法

先定一個(gè)小目標(biāo)！5.6.5 數(shù)組元素索引在實(shí)際開(kāi)發(fā)中，若要查找指定的元素在數(shù)組中的索引，可以使用數(shù)組對(duì)象提供的獲取數(shù)組元素索引的方法，具體如下表所示。5.6.5 數(shù)組元素索引方法作用indexOf(searchElement[,fromIndex])返回指定元素在數(shù)組中第一次出現(xiàn)的索引，若不存在，返回-1lastIndexOf(searchElement[,fromIndex])返回指定元素在數(shù)組中最后一次出現(xiàn)的索引，若不存在，返回-1searchElement參數(shù)表示要查找的元素，fromIndex參數(shù)為可選參數(shù)，表示從指定索引開(kāi)始查找。需要注意的是，indexOf()方法用于逆向查找，即從后向前查找，當(dāng)?shù)谝淮握业皆貢r(shí)就返回其索引，此時(shí)找到的元素剛好是數(shù)組中最后一次出現(xiàn)的元素。使用indexOf()方法和lastIndexOf()方法查找元素索引時(shí)，默認(rèn)是從指定數(shù)組索引的位置開(kāi)始檢索，并且檢索方式與運(yùn)算符“===”相同，即查找的元素值與數(shù)組元素值全等時(shí)才查找成功。5.6.5 數(shù)組元素索引下面通過(guò)代碼演示獲取數(shù)組元素索引方法的使用。vararr=['Monday','Wednesday','Friday','Monday'];console.log(arr.indexOf('Friday')); //輸出結(jié)果為：2console.log(arr.lastIndexOf('Monday'));

//輸出結(jié)果為：35.6.5 數(shù)組元素索引掌握去除數(shù)組中重復(fù)元素的案例，能夠編寫(xiě)代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！5.6.6 【案例】去除數(shù)組中的重復(fù)元素某學(xué)校將根據(jù)學(xué)生的需求開(kāi)設(shè)選修課，選修課由各個(gè)班級(jí)提交的課程名單決定，由于每個(gè)班級(jí)提交的課程名單中有些課程可能會(huì)重復(fù)出現(xiàn)，所以需要去除名單中重復(fù)的課程。下面通過(guò)一個(gè)案例演示如何使用數(shù)組索引去除名單中的重復(fù)課程，其中選修課數(shù)組為['新聞攝影','音樂(lè)鑒賞','話(huà)劇表演','古典詩(shī)詞','營(yíng)養(yǎng)與健康','音樂(lè)鑒賞','話(huà)劇表演']。5.6.6 【案例】去除數(shù)組中的重復(fù)元素掌握數(shù)組轉(zhuǎn)換為字符串，能夠靈活應(yīng)用數(shù)組轉(zhuǎn)換為字符串的方法

先定一個(gè)小目標(biāo)！5.6.7 數(shù)組轉(zhuǎn)換為字符串在實(shí)際開(kāi)發(fā)中，若要實(shí)現(xiàn)數(shù)組轉(zhuǎn)換為字符串，不僅可以使用“+”，還可以使用數(shù)組對(duì)象的join()方法和toString()方法。數(shù)組轉(zhuǎn)換為字符串的方法如下表所示。方法作用join([separator])將數(shù)組的所有元素連接成一個(gè)字符串，默認(rèn)使用逗號(hào)分隔數(shù)組中的每個(gè)元素。separator為可選參數(shù)，用于指定字符串的分隔符toString()將數(shù)組轉(zhuǎn)換為字符串，使用逗號(hào)分隔數(shù)組中的每個(gè)元素5.6.7 數(shù)組轉(zhuǎn)換為字符串注意當(dāng)數(shù)組元素為undefined、null或空數(shù)組時(shí)，對(duì)應(yīng)的元素會(huì)被轉(zhuǎn)換為空字符串。下面通過(guò)代碼演示數(shù)組轉(zhuǎn)換為字符串的方法的使用。vararr=['莫等閑','白了少年頭','空悲切'];//使用join()方法console.log(arr.join());

//輸出結(jié)果為：莫等閑,白了少年頭,空悲切console.log(arr.join(''));

//輸出結(jié)果為：莫等閑白了少年頭空悲切console.log(arr.join('-'));

//輸出結(jié)果為：莫等閑-白了少年頭-空悲切//使用toString()方法console.log(arr.toString());

//輸出結(jié)果為：莫等閑,白了少年頭,空悲切5.6.7 數(shù)組轉(zhuǎn)換為字符串?dāng)?shù)組對(duì)象的其他方法多學(xué)一招在JavaScript中還提供了數(shù)組對(duì)象的其他常用方法，具體如下表所示。5.6.7 數(shù)組轉(zhuǎn)換為字符串方法作用fill(value[,start][,end])用一個(gè)固定值填充數(shù)組中從起始索引到終止索引內(nèi)的全部元素，不包括終止索引的值。返回填充后的數(shù)組。value表示要填充的數(shù)組元素值，start和end為可選參數(shù)，分別表示填充的起始索引和終止索引slice([begin][,end])截取數(shù)組元素，返回被截取元素組成的新數(shù)組。begin和end為可選參數(shù)，表示截取的起始索引和終止索引，截取的結(jié)果不包含終止索引的值concat(value1[,value2][,…][,valueN])連接兩個(gè)或多個(gè)數(shù)組，或者將值添加到數(shù)組中，不影響原數(shù)組，返回一個(gè)新數(shù)組，value1,value2,…,valueN為數(shù)組或值多學(xué)一招下面通過(guò)代碼演示fill()方法、slice()方法和concat()方法的使用。5.6.7 數(shù)組轉(zhuǎn)換為字符串//使用fill()方法填充數(shù)組元素console.log([0,1,2].fill(4)); //輸出結(jié)果為：(3)[4,4,4]console.log([0,1,2].fill(4,1));

//輸出結(jié)果為：(3)[0,4,4]console.log([0,1,2].fill(4,1,2));

//輸出結(jié)果為：(3)[0,4,2]//使用slice()方法截取數(shù)組元素console.log([0,1,2].slice());

//輸出結(jié)果為：(3)[0,1,2]console.log([0,1,2].slice(1));

//輸出結(jié)果為：(2)[1,2]console.log([0,1,2].slice(1,2));

//輸出結(jié)果為：[1]//使用concat()方法將元素添加到數(shù)組中并連接兩個(gè)數(shù)組console.log([0,1,2].concat(3));

//輸出結(jié)果為：(4)[0,1,2,3]console.log([0,1,2].concat([3,4]));//輸出結(jié)果為：(5)[0,1,2,3,4]字符串對(duì)象5.7掌握字符串對(duì)象的創(chuàng)建，能夠靈活應(yīng)用String()構(gòu)造函數(shù)創(chuàng)建字符串對(duì)象

先定一個(gè)小目標(biāo)！5.7.1 創(chuàng)建字符串對(duì)象字符串對(duì)象使用String()構(gòu)造函數(shù)來(lái)創(chuàng)建，在String()構(gòu)造函數(shù)中傳入字符串，就會(huì)在創(chuàng)建的字符串對(duì)象中保存?zhèn)魅氲淖址?，示例代碼如下。varstr=newString('Monday');

//創(chuàng)建字符串對(duì)象console.log(str);

//輸出結(jié)果為：String

{'Monday'}5.7.1 創(chuàng)建字符串對(duì)象首先創(chuàng)建一個(gè)字符串對(duì)象，然后訪(fǎng)問(wèn)該字符串對(duì)象的length屬性，并使用typeof運(yùn)算符檢測(cè)字符串對(duì)象的數(shù)據(jù)類(lèi)型，示例代碼如下。//創(chuàng)建字符串對(duì)象varstr01=newString('Tuesday');//訪(fǎng)問(wèn)字符串對(duì)象的length屬性console.log(str01.length);

//輸出結(jié)果為：7//使用typeof運(yùn)算符檢測(cè)字符串對(duì)象的數(shù)據(jù)類(lèi)型console.log(typeofstr01);

//輸出結(jié)果為：object5.7.1 創(chuàng)建字符串對(duì)象需要說(shuō)明的是，通過(guò)保存了字符串?dāng)?shù)據(jù)的變量也可以訪(fǎng)問(wèn)字符串對(duì)象的屬性和方法，示例代碼如下。//定義保存了字符串?dāng)?shù)據(jù)的變量varstr02='Tuesday';//訪(fǎng)問(wèn)變量str02的length屬性console.log(str02.length);

//輸出結(jié)果為：7//使用typeof運(yùn)算符檢測(cè)變量str02的數(shù)據(jù)類(lèi)型console.log(typeofstr02);

//輸出結(jié)果為：string5.7.1 創(chuàng)建字符串對(duì)象掌握根據(jù)字符返回索引，能夠靈活應(yīng)用根據(jù)字符返回索引的方法

先定一個(gè)小目標(biāo)！5.7.2 根據(jù)字符返回索引字符串對(duì)象提供了用于根據(jù)字符串返回索引的方法，具體如下表所示。方法作用indexOf(searchValue[,fromIndex])獲取searchValue在字符串中首次出現(xiàn)的索引，如果找不到則返回-1。可選參數(shù)fromIndex表示從指定索引開(kāi)始向后搜索，默認(rèn)為0lastIndexOf(searchValue[,fromIndex])獲取searchValue在字符串中最后一次出現(xiàn)的索引，如果找不到則返回-1?？蛇x參數(shù)fromIndex表示從指定索引開(kāi)始向前搜索，默認(rèn)為最后一個(gè)字符的索引5.7.2 根據(jù)字符返回索引下面通過(guò)代碼演示indexOf()方法和lastIndexOf()方法的使用。varstr='HelloWorld';str.indexOf('1');//獲取'1'在字符串中首次出現(xiàn)的索引，返回結(jié)果為：2str.lastIndexOf('1');//獲取'1'在字符串中最后出現(xiàn)的索引，返回結(jié)果為：85.7.2 根據(jù)字符返回索引要求在字符串'HelloWorld,HelloJavaScript'中找到所有字符'o'的索引，并統(tǒng)計(jì)字符'o'出現(xiàn)的次數(shù)，示例代碼如下。varstr='HelloWorld,HelloJavaScript';varindex=str.indexOf('o');varnum=0;while(index!=-1){

console.log(index);

index=str.indexOf('o',index+1);

num++;}console.log(`o出現(xiàn)的次數(shù)是：${num}`);5.7.2 根據(jù)字符返回索引掌握根據(jù)索引返回字符，能夠靈活應(yīng)用根據(jù)索引返回字符的方法

先定一個(gè)小目標(biāo)！5.7.3 根據(jù)索引返回字符字符串對(duì)象除了提供用于根據(jù)字符返回索引的方法外，還提供用于根據(jù)索引返回字符的方法，具體如下表所示。5.7.3 根據(jù)索引返回字符方法作用charAt(index)獲取索引index對(duì)應(yīng)的字符（字符串第1個(gè)字符的索引為0）charCodeAt(index)獲取索引index對(duì)應(yīng)的字符的ASCII值下面以charAt()方法和charCodeAt()方法為例進(jìn)行演示如何根據(jù)索引返回字符，示例代碼如下。varstr='Monday';//使用charAt()方法查找索引為3的字符console.log(str.charAt(3)); //輸出結(jié)果為：d//使用charCodeAt()方法查找索引為3的字符的ASCII值console.log(str.charCodeAt(3)); //輸出結(jié)果為：1005.7.3 根據(jù)索引返回字符掌握統(tǒng)計(jì)字符串中出現(xiàn)最多的字符和相應(yīng)的次數(shù)的案例，