《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目4-3 數(shù)組對(duì)象和字符串對(duì)象

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目4-3數(shù)組對(duì)象和字符串對(duì)象5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)Math.random()是求解什么的？日期對(duì)象怎么實(shí)例化？提問知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)實(shí)現(xiàn)數(shù)組去除重復(fù)元素判斷用戶名是否合法重點(diǎn)：數(shù)組對(duì)象的屬性和方法數(shù)組對(duì)象應(yīng)用案例字符串對(duì)象的屬性和方法字符串對(duì)象應(yīng)用案例知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.1

數(shù)組類型檢測(cè)1.數(shù)組對(duì)象數(shù)組類型檢測(cè)有兩種常用的方式，分別是使用instanceof運(yùn)算符和使用Array.isArray()方法。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í)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.2

添加或刪除數(shù)組元素JavaScript數(shù)組對(duì)象提供了添加或刪除元素的方法，可以實(shí)現(xiàn)在數(shù)組的末尾或開頭添加新的數(shù)組元素，或在數(shù)組的末尾或開頭移出數(shù)組元素。方法如下：方法名功能描述返回值push(參數(shù)1…)數(shù)組末尾添加一個(gè)或多個(gè)元素，會(huì)修改原數(shù)組 返回?cái)?shù)組的新長度unshift(參數(shù)1…)數(shù)組開頭添加一個(gè)或多個(gè)元素，會(huì)修改原數(shù)組返回?cái)?shù)組的新長度pop()刪除數(shù)組的最后一個(gè)元素，若是空數(shù)組則返回undefined，會(huì)修改原數(shù)組返回刪除的元素的值shift()刪除數(shù)組的第一個(gè)元素，若是空數(shù)組則返回undefined，會(huì)修改原數(shù)組返回第一個(gè)元素的值知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象注意push()和unshift()方法的返回值是新數(shù)組的長度，而pop()和shift()方法返回的是移出的數(shù)組元素。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

【案例】篩選數(shù)組案例需求：要求在包含工資的數(shù)組中，剔除工資達(dá)到2000或以上的數(shù)據(jù)，把小于2000的數(shù)重新放到新的數(shù)組里面。vararr=[1500,1200,2000,2100,1800];varnewArr=[];for(vari=0;i<arr.length;i++){if(arr[i]<2000){newArr.push(arr[i]);//相當(dāng)于：newArr[newArr.length]=arr[i];}}console.log(newArr);//輸出結(jié)果：(3)

[1500,1200,1800]示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.3

數(shù)組排序JavaScript數(shù)組對(duì)象提供了數(shù)組排序的方法，可以實(shí)現(xiàn)數(shù)組元素排序或者顛倒數(shù)組元素的順序等。排序方法如下：方法功能描述reverse()顛倒數(shù)組中元素的位置，該方法會(huì)改變?cè)瓟?shù)組，返回新數(shù)組sort()對(duì)數(shù)組的元素進(jìn)行排序，該方法會(huì)改變?cè)瓟?shù)組，返回新數(shù)組注意需要注意的是：reverse()和sort()方法的返回值是新數(shù)組的長度。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.4

數(shù)組索引在開發(fā)中，若要查找指定的元素在數(shù)組中的位置，可以利用Array對(duì)象提供的檢索方法。檢索方法如下：方法功能描述indexOf()返回在數(shù)組中可以找到給定值的第一個(gè)索引，如果不存在，則返回-1lastIndexOf()返回指定元素在數(shù)組中的最后一個(gè)的索引，如果不存在則返回-1注意默認(rèn)都是從指定數(shù)組索引的位置開始檢索，并且檢索方式與運(yùn)算符“===”相同，即只有全等時(shí)才會(huì)返回比較成功的結(jié)果。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.5

數(shù)組轉(zhuǎn)換為字符串在開發(fā)中，可以利用數(shù)組對(duì)象的join()和toString()方法，將數(shù)組轉(zhuǎn)換為字符串。方法如下：方法功能描述toString()把數(shù)組轉(zhuǎn)換為字符串，逗號(hào)分隔每一項(xiàng)join('分隔符')將數(shù)組的所有元素連接到一個(gè)字符串中//使用toString()vararr=['a','b','c'];console.log(arr.toString()); //輸出結(jié)果：a,b,c//使用join()console.log(arr.join()); //輸出結(jié)果：a,b,cconsole.log(arr.join('')); //輸出結(jié)果：abcconsole.log(arr.join('-')); //輸出結(jié)果：a-b-c示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象

1.6

其他方法JavaScript還提供了很多其他常用的數(shù)組方法。例如，填充數(shù)組、連接數(shù)組、截取數(shù)組元素等。方法如下：方法功能描述fill()用一個(gè)固定值填充數(shù)組中指定下標(biāo)范圍內(nèi)的全部元素splice()數(shù)組刪除，參數(shù)為splice(第幾個(gè)開始,要?jiǎng)h除個(gè)數(shù))，返回被刪除項(xiàng)目的新數(shù)組slice()數(shù)組截取，參數(shù)為slice(begin,end)，返回被截取項(xiàng)目的新數(shù)組concat()連接兩個(gè)或多個(gè)數(shù)組，不影響原數(shù)組，返回一個(gè)新數(shù)組注意slice()和concat()方法在執(zhí)行后返回一個(gè)新的數(shù)組，不會(huì)對(duì)原數(shù)組產(chǎn)生影響，剩余的方法在執(zhí)行后皆會(huì)對(duì)原數(shù)組產(chǎn)生影響。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象2.字符串對(duì)象

2.1

字符串對(duì)象的使用字符串對(duì)象使用newString()來創(chuàng)建，在String構(gòu)造函數(shù)中傳入字符串，這樣就會(huì)在返回的字符串對(duì)象中保存這個(gè)字符串。varstr=newString('apple'); //創(chuàng)建字符串對(duì)象console.log(str); //輸出結(jié)果：String

{"apple"}console.log(str.length); //獲取字符串長度，輸出結(jié)果：5示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象

2.2

根據(jù)字符返回位置字符串對(duì)象提供了用于檢索元素的屬性和方法，字符串對(duì)象的常用屬性和方法如下：方法功能描述indexOf(searchValue)獲取searchValue在字符串中首次出現(xiàn)的位置lastIndexOf(searchValue)獲取searchValue在字符串中最后出現(xiàn)的位置varstr='HelloWorld';str.indexOf('o'); //獲取“o”在字符串中首次出現(xiàn)的位置，返回結(jié)果：4str.lastIndexOf('o');//獲取“o”在字符串中最后出現(xiàn)的位置，返回結(jié)果：6示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象【案例】要求在一組字符串中，找到所有指定元素出現(xiàn)的位置以及次數(shù)。字符串為'HelloWorld,HelloJavaScript'。varstr='HelloWorld,HelloJavaScript';varindex=str.indexOf('o');varnum=0;while(index!=-1){console.log(index); //依次輸出：4、7、17index=str.indexOf('o',index+1);num++;}console.log('o出現(xiàn)的次數(shù)是：'+num);//o出現(xiàn)的次數(shù)是：3示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象

2.3

根據(jù)位置返回字符字符串對(duì)象提供了用于獲取字符串中的某一個(gè)字符的方法。方法如下：成員作用charAt(index)獲取index位置的字符，位置從0開始計(jì)算charCodeAt(index)獲取index位置的字符的ASCII碼str[index]獲取指定位置處的字符（HTML5新增）varstr='HelloWorld';varstr='Apple';console.log(str.charAt(3)); //輸出結(jié)果：1console.log(str.charCodeAt(0));//輸出結(jié)果：65（字符A的ASCII碼為65）console.log(str[0]); //輸出結(jié)果：A示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象

【案例】統(tǒng)計(jì)出現(xiàn)最多的字符和次數(shù)案例需求：使用charAt()方法通過程序來統(tǒng)計(jì)字符串中出現(xiàn)最多的字符和次數(shù)。varstr='Apple';//第1步，統(tǒng)計(jì)每個(gè)字符的出現(xiàn)次數(shù)varo={};for(vari=0;i<str.length;i++){varchars=str.charAt(i); //利用chars保存字符串中的每一個(gè)字符if(o[chars]){ //利用對(duì)象的屬性來方便查找元素o[chars]++;}else{o[chars]=1;}}console.log(o); //輸出結(jié)果：{A:1,p:2,l:1,e:1}示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象//第2步，統(tǒng)計(jì)出現(xiàn)最多的字符varmax=0; //保存出現(xiàn)次數(shù)最大值varch=''; //保存出現(xiàn)次數(shù)最多的字符for(varkino){if(o[k]>max){max=o[k];ch=k;}}//輸出結(jié)果：“出現(xiàn)最多的字符是：p，共出現(xiàn)了2次”console.log('出現(xiàn)最多的字符是：'+ch+'，共出現(xiàn)了'+max+'次');示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象

2.4

字符串操作方法方法作用concat(str1,str2,str3…)連接多個(gè)字符串slice(start,[end])截取從start位置到end位置之間的一個(gè)子字符串substring(start[,end])截取從start位置到end位置之間的一個(gè)子字符串，基本和slice相同，但是不接收負(fù)值substr(start[,length])截取從start位置開始到length長度的子字符串toLowerCase()獲取字符串的小寫形式toUpperCase()獲取字符串的大寫形式split([separator[,limit])使用separator分隔符將字符串分隔成數(shù)組，limit用于限制數(shù)量replace(str1,str2)使用str2替換字符串中的str1，返回替換結(jié)果，只會(huì)替換第一個(gè)字符字符串對(duì)象提供了一些用于截取字符串、連接字符串、替換字符串的屬性和方法。字符串對(duì)象的常用屬性和方法如下：知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)字符串對(duì)象varstr='HelloWorld';str.concat('!');//在字符串末尾拼接字符，結(jié)果：HelloWorld!str.slice(1,3);//截取從位置1開始包括到位置3的范圍內(nèi)的內(nèi)容，結(jié)果：elstr.substring(5);//截取從位置5開始到最后的內(nèi)容，結(jié)果：Worldstr.substring(5,7);//截取從位置5開始到位置7范圍內(nèi)的內(nèi)容，結(jié)果：Wostr.substr(5);//截取從位置5開始到字符串結(jié)尾的內(nèi)容，結(jié)果：Worldstr.substring(5,7);//截取從位置5開始到位置7范圍內(nèi)的內(nèi)容，結(jié)果：Wostr.toLowerCase();//將字符串轉(zhuǎn)換為小寫，結(jié)果：helloworldstr.toUpperCase();//將字符串轉(zhuǎn)換為大寫，結(jié)果：HELLOWORLDstr.split('l'); //使用“l(fā)”切割字符串，結(jié)果：["He","","oWor","d"]str.split('l',3); //限制最多切割3次，結(jié)果：["He","","oWor"]str.replace('World','!');//替換字符串，結(jié)果："Hello!"示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)

【案例】數(shù)組去除重復(fù)元素functionunique(arr){varnewArr=[];for(vari=0;i<arr.len