JavaScript程序設(shè)計20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實施項目4-1初始對象5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)作用域的分類？作用域鏈?zhǔn)鞘裁矗块]包函數(shù)的作用？提問知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)任務(wù)重難點封裝自己的數(shù)學(xué)對象重點：創(chuàng)建數(shù)組訪問對象的屬性和方法遍歷對象的屬性和方法內(nèi)置對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.1

什么是對象1.初識對象在JavaScript中，對象是一種數(shù)據(jù)類型，它是由屬性和方法組成的一個集合。屬性是指事物的特征，使用“對象.屬性名”訪問；方法是指事物的行為，使用“對象.方法名()”進(jìn)行訪問。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象varp1={color:'黑色',weight:'188g',screenSize:'6.5',call:function(num){console.log('打電話給'+num);},sendMessage:function(num,message){},playVideo:function(){console.log('播放視頻');},playMusic:function(){console.log('播放音樂');}}手機對象p1知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象console.log(p1.color);console.log(p1.weight);console.log(p1.screenSize);p1.call('123'); p1.sendMessage('123','hello');p1.playVideo();p1.playMusic(); 訪問p1的屬性和方法知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象對象的字面量就是用花括號“{}”來包裹對象中的成員，每個成員使用“key:value”的形式來保存，key表示屬性名或方法名，value表示對應(yīng)的值。多個對象成員之間用“,”隔開。

1.2

利用字面量創(chuàng)建對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象varobj={};創(chuàng)建一個空對象varstu1={name:'小明', //name屬性age:18, //age屬性sex:'男', //sex屬性//sayHello方法sayHello:function(){console.log('Hello');}};創(chuàng)建一個學(xué)生對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.3

用newObject創(chuàng)建對象varobj=newObject(); //創(chuàng)建了一個空對象='小明'; //創(chuàng)建對象后，為對象添加成員obj.age=18;obj.sex='男';obj.sayHello=function(){console.log('Hello');};示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.4

利用構(gòu)造函數(shù)創(chuàng)建對象什么是構(gòu)造函數(shù)：是JavaScript創(chuàng)建對象的另外一種方式。與字面量方式創(chuàng)建對象對比：構(gòu)造函數(shù)可以創(chuàng)建出一些具有相同特征的對象。舉例：通過水果構(gòu)造函數(shù)創(chuàng)建蘋果、香蕉、橘子對象。其特點在于這些對象都基于同一個模板創(chuàng)建，同時每個對象又有自己的特征。思考：如何自定義構(gòu)造函數(shù)？構(gòu)造函數(shù)的命名推薦采用帕斯卡命名規(guī)則，即所有的單詞首字母大寫。在構(gòu)造函數(shù)內(nèi)部，使用this來表示剛剛創(chuàng)建的對象。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.4

利用構(gòu)造函數(shù)創(chuàng)建對象使用構(gòu)造函數(shù)創(chuàng)建對象的語法為“new構(gòu)造函數(shù)名()”，在小括號中可以傳遞參數(shù)給構(gòu)造函數(shù)，如果沒有參數(shù)，小括號可以省略。//編寫構(gòu)造函數(shù)function構(gòu)造函數(shù)名(){this.屬性=屬性;this.方法=function(){//方法體}}//使用構(gòu)造函數(shù)創(chuàng)建對象varobj=new構(gòu)造函數(shù)名();語法結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.5

訪問對象的屬性和方法創(chuàng)建好學(xué)生對象之后，接下來訪問該對象的屬性和方法：//方式1，輸出結(jié)果為：小明stu1['age']//方式2，輸出結(jié)果為：18語法結(jié)構(gòu)訪問學(xué)生對象的屬性：訪問學(xué)生對象的方法：stu1.sayHello()//方式1，輸出結(jié)果為：Hellostu1.['sayHello']()//方式2，輸出結(jié)果為：Hello語法結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象當(dāng)對象成員中包含特殊字符時，可以用字符串來表示：varobj={'name-age':'小明-18'};console.log(obj['name-age']); //輸出結(jié)果：“小明-18”語法結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象手動賦值屬性或方法來添加成員：varstu2={}; //創(chuàng)建一個空對象='Jack'; //為對象增加name屬性roduce=function(){//為對象增加introduce方法alert('Mynameis'+); //this代表當(dāng)前對象};alert(); //訪問name屬性，輸出結(jié)果：Jack示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象

1.6

遍歷對象的屬性和方法使用for…in語法可以遍歷對象中的所有屬性和方法，示例代碼如下：//obj為待遍歷的對象varobj={name:'小明',age:18,sex:'男'};//遍歷obj對象for(varkinobj){//通過k可以獲取遍歷過程中的屬性名或方法名console.log(k); //依次輸出：name、age、sexconsole.log(obj[k]); //依次輸出：小明、18、男}示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)初始對象多學(xué)一招使用in運算符判斷一個對象中的某個成員是否存在。varobj={name:'Tom',age:16};console.log('age'inobj); //輸出：true，表示對象成員存在console.log('gender'inobj);//輸出：false，表示對象成員不存在知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)內(nèi)置對象

2.1

通過查閱文檔熟悉內(nèi)置對象2.內(nèi)置對象JavaScript提供了很多常用的內(nèi)置對象，包括數(shù)學(xué)對象Math、日期對象Date、數(shù)組對象Array以及字符串對象String等。我們以Mozilla開發(fā)者網(wǎng)絡(luò)（MDN）為例，演示如何查閱JavaScript中的內(nèi)置對象的使用。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)內(nèi)置對象打開MDN網(wǎng)站，在網(wǎng)站的導(dǎo)航欄中找到“技術(shù)”-“JavaScript”，效果如下。MDN文檔知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)內(nèi)置對象將頁面向下滾動，在左側(cè)邊欄中找到“內(nèi)置對象”，將該項展開后，可以看到所有內(nèi)置對象的目錄鏈接，如下圖所示。內(nèi)置對象目錄知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)內(nèi)置對象如果不知道對象的名稱，也可以在頁面的搜索框中輸入關(guān)鍵字進(jìn)行搜索、查找。以Math為例，效果圖如下所示。使用說明知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)內(nèi)置對象通過文檔學(xué)習(xí)某個方法的使用時，基本上可以分為4個步驟：查閱方法的功能查看參數(shù)的意義和類型查看返回值的意義和類型通過示例代碼進(jìn)行測試內(nèi)置對象

【案例】封裝自己的數(shù)學(xué)對象案例要求：封裝一個數(shù)學(xué)對象myMath，實現(xiàn)求出數(shù)組中的最大值。varmyMath={PI:3.141592653589793,max:function(){varmax=arguments[0];for(vari=1;i<arguments.length;i++){if(arguments[i]>max){max=arguments[i];}}returnmax;}};示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)總結(jié)：本章主要講解了對象的基本概念，然后講解了如何自定義對象、如何使用內(nèi)置對象。

作業(yè)：封裝自己的數(shù)學(xué)對象。1課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實施項目4-2Math對象和日期對象5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)創(chuàng)建對象有幾種方法？如何訪問對象的屬性和方法？用什么語法遍歷對象的屬性和方法？提問知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)任務(wù)重難點使用日期對象實現(xiàn)倒計時功能重點：Math對象的屬性和方法Math對象應(yīng)用案例日期對象的屬性和方法日期對象應(yīng)用案例知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)Math對象

1.1

Math對象的使用1.Math對象Math對象用來對數(shù)字進(jìn)行與數(shù)學(xué)相關(guān)的運算，不需要實例化對象，可以直接使用其靜態(tài)屬性和靜態(tài)方法，Math對象的常用屬性和方法如下表。成員功能PI獲取圓周率，結(jié)果為3.141592653589793abs(x)獲取x的絕對值，可傳入普通數(shù)值或是用字符串表示的數(shù)值max()獲取所有參數(shù)中的最大值min()獲取所有參數(shù)中的最小值pow(base,exponent)獲取基數(shù)（base）的指數(shù)（exponent）次冪，即baseexponentsqrt(x)獲取x的平方根ceil(x)獲取大于或等于x的最小整數(shù)，即向上取整floor(x)獲取小于或等于x的最大整數(shù)，即向下取整round(x)獲取x的四舍五入后的整數(shù)值random()獲取大于或等于0.0且小于1.0的隨機值知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)

1.2

生成指定范圍的隨機數(shù)Math.random()用來獲取隨機數(shù)，每次調(diào)用該方法返回的結(jié)果都不同。該方法返回的結(jié)果是一個很長的浮點數(shù)，其范圍是0~1（不包括1）。//表示生成大于或等于min且小于max的隨機值Math.random()*(max-min)+min;//表示生成0到任意數(shù)之間的隨機整數(shù)Math.floor(Math.random()*(max+1));//表示生成1到任意數(shù)之間的隨機整數(shù)Math.floor(Math.random()*(max+1)+1);示例代碼Math對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)Math對象

【案例】猜數(shù)字游戲案例需求：使程序隨機生成一個1~10之間的數(shù)字，并讓用戶輸入一個數(shù)字，判斷這兩個數(shù)的大小，如果用戶輸入的數(shù)字大于隨機數(shù)，那么提示“你猜大了”，如果用戶輸入的數(shù)字小于隨機數(shù)，則提示“你猜小了”，如果兩個數(shù)字相等，就提示“恭喜你，猜對了”，結(jié)束程序。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)Math對象

【案例】猜數(shù)字游戲functiongetRandom(min,max){returnMath.floor(Math.random()*(max-min+1)+min);}varrandom=getRandom(1,10);while(true){

var

num=prompt('猜數(shù)字，范圍在1~10之間。');if(num>random){alert('你猜大了');}elseif(num<random){alert('你猜小了')}else{alert('恭喜你，猜對了');break;}}示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)日期對象

2.1

日期對象的使用JavaScript中的日期對象需要使用newDate()實例化對象才能使用，Date()是日期對象的構(gòu)造函數(shù)。Date()構(gòu)造函數(shù)可以傳入一些參數(shù)，示例代碼如下。2.日期對象//方式1：沒有參數(shù)vardate1=newDate();//輸出：WedOct16201910:57:56GMT+0800(中國標(biāo)準(zhǔn)時間)//方式2：傳入年、月、日、時、分、秒（月的范圍是0~11）vardate2=newDate(2019,10,16,10,57,56);//輸出：SatNov16201910:57:56GMT+0800(中國標(biāo)準(zhǔn)時間//方式3：用字符串表示日期和時間vardate3=newDate('2019-10-1610:57:56');//輸出：WedOct16201910:57:56GMT+0800(中國標(biāo)準(zhǔn)時間)示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)日期對象日期對象的常用get方法方法作用getFullYear()獲取表示年份的4位數(shù)字，如2020getMonth()獲取月份，范圍0~11（0表示一月，1表示二月，依次類推）getDate()獲取月份中的某一天，范圍1~31getDay()獲取星期，范圍0~6（0表示星期日，1表示星期一，依次類推）getHours()獲取小時數(shù)，返回0~23getMinutes()獲取分鐘數(shù)，范圍0~59getSeconds()獲取秒數(shù)，范圍0~59getMilliseconds()獲取毫秒數(shù)，范圍0~999getTime()獲取從1970-01-0100:00:00距離Date對象所代表時間的毫秒數(shù)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)日期對象日期對象的常用set方法方法作用setFullYear(value)設(shè)置年份setMonth(value)設(shè)置月份setDate(value)設(shè)置月份中的某一天setHours(value)設(shè)置小時數(shù)setMinutes(value)設(shè)置分鐘數(shù)setSeconds(value)設(shè)置秒數(shù)setMilliseconds(value)設(shè)置毫秒數(shù)setTime(value)通過從1970-01-0100:00:00計時的毫秒數(shù)來設(shè)置時間知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)日期對象

【案例】統(tǒng)計代碼執(zhí)行時間時間戳是獲取從1970年1月1日0時0分0秒開始一直到當(dāng)前UTC時間所經(jīng)過的毫秒數(shù)。獲取時間戳的常見方式如下：

//方式1：通過日期對象的valueof()或getTime()方法vardate1=newDate();console.log(date1.valueOf());//示例結(jié)果：1571196996188console.log(date1.getTime());//示例結(jié)果：1571196996188//方式2：使用“+”運算符轉(zhuǎn)換為數(shù)值型vardate2=+newDate();console.log(date2); //示例結(jié)果：1571196996190//方式3：使用HTML5新增的Date.now()方法console.log(Date.now()); //示例結(jié)果：1571196996190知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)日期對象

【案例】倒計時案例需求：在一些電商網(wǎng)站的活動頁上會經(jīng)常出現(xiàn)折扣商品的倒計時標(biāo)記，顯示離活動結(jié)束還剩X天X小時X分X秒。倒計時的核心算法是輸入的時間減去現(xiàn)在的時間，得出的剩余時間就是要顯示的倒計時時間，這需要把時間都轉(zhuǎn)化成時間戳（毫秒數(shù)）來進(jìn)行計算，把得到的毫秒數(shù)轉(zhuǎn)換為天數(shù)、小時、分?jǐn)?shù)、秒數(shù)。內(nèi)置對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)

【案例】倒計時functioncountDown(time){

var

nowTime=+newDate();

var

inputTime=+newDate(time);

vartimes=(inputTime-nowTime)/1000;

vard=parseInt(times/60/60/24);d=d<10?'0'+d:d;

varh=parseInt(times/60/60%24);h=h<10?'0'+h:h;

varm=parseInt(times/60%60);m=m<10?'0'+m:m;

vars=parseInt(times%60);s=s<10?'0'+s:s;returnd+'天'+h+'時'+m+'分'+s+'秒';}//示例結(jié)果：05天23時06分10秒console.log(countDown('2019-10-2210:56:57'));示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)總結(jié)：本章主要講解了Math對象和日期對象的屬性、方法及使用，通過使用日期對象實現(xiàn)倒計時功能。

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

1.1

數(shù)組類型檢測1.數(shù)組對象數(shù)組類型檢測有兩種常用的方式，分別是使用instanceof運算符和使用Array.isArray()方法。var

arr=[];var

obj={};//第1種方式console.log(arr

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

instanceofArray); //輸出結(jié)果：false//第2種方式console.log(Array.isArray(arr)); //輸出結(jié)果：trueconsole.log(Array.isArray(obj)); //輸出結(jié)果：false示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)組對象

1.2

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

【案例】篩選數(shù)組案例需求：要求在包含工資的數(shù)組中，剔除工資達(dá)到2000或以上的數(shù)據(jù)，把小于2000的數(shù)重新放到新的數(shù)組里面。var

arr=[1500,1200,2000,2100,1800];var

newArr=[];for(var

i=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]示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)組對象

1.3

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

1.4

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

1.5

數(shù)組轉(zhuǎn)換為字符串在開發(fā)中，可以利用數(shù)組對象的join()和toString()方法，將數(shù)組轉(zhuǎn)換為字符串。方法如下：方法功能描述toString()把數(shù)組轉(zhuǎn)換為字符串，逗號分隔每一項join('分隔符')將數(shù)組的所有元素連接到一個字符串中//使用toString()var

arr=['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示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)組對象

1.6

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

2.1

字符串對象的使用字符串對象使用newString()來創(chuàng)建，在String構(gòu)造函數(shù)中傳入字符串，這樣就會在返回的字符串對象中保存這個字符串。var

str=newString('apple'); //創(chuàng)建字符串對象console.log(str); //輸出結(jié)果：String

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

2.2

根據(jù)字符返回位置字符串對象提供了用于檢索元素的屬性和方法，字符串對象的常用屬性和方法如下：方法功能描述indexOf(searchValue)獲取searchValue在字符串中首次出現(xiàn)的位置lastIndexOf(searchValue)獲取searchValue在字符串中最后出現(xiàn)的位置var

str='HelloWorld';str.indexOf('o'); //獲取“o”在字符串中首次出現(xiàn)的位置，返回結(jié)果：4str.lastIndexOf('o');//獲取“o”在字符串中最后出現(xiàn)的位置，返回結(jié)果：6示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象【案例】要求在一組字符串中，找到所有指定元素出現(xiàn)的位置以及次數(shù)。字符串為'HelloWorld,HelloJavaScript'。var

str='HelloWorld,HelloJavaScript';varindex=str.indexOf('o');var

num=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示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象

2.3

根據(jù)位置返回字符字符串對象提供了用于獲取字符串中的某一個字符的方法。方法如下：成員作用charAt(index)獲取index位置的字符，位置從0開始計算charCodeAt(index)獲取index位置的字符的ASCII碼str[index]獲取指定位置處的字符（HTML5新增）var

str='HelloWorld';var

str='Apple';console.log(str.charAt(3)); //輸出結(jié)果：1console.log(str.charCodeAt(0));//輸出結(jié)果：65（字符A的ASCII碼為65）console.log(str[0]); //輸出結(jié)果：A示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象

【案例】統(tǒng)計出現(xiàn)最多的字符和次數(shù)案例需求：使用charAt()方法通過程序來統(tǒng)計字符串中出現(xiàn)最多的字符和次數(shù)。var

str='Apple';//第1步，統(tǒng)計每個字符的出現(xiàn)次數(shù)varo={};for(var

i=0;i<str.length;i++){

varchars=str.charAt(i); //利用chars保存字符串中的每一個字符if(o[chars]){ //利用對象的屬性來方便查找元素o[chars]++;}else{o[chars]=1;}}console.log(o); //輸出結(jié)果：{A:1,p:2,l:1,e:1}示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象//第2步，統(tǒng)計出現(xiàn)最多的字符varmax=0; //保存出現(xiàn)次數(shù)最大值var

ch=''; //保存出現(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+'次');示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象

2.4

字符串操作方法方法作用concat(str1,str2,str3…)連接多個字符串slice(start,[end])截取從start位置到end位置之間的一個子字符串substring(start[,end])截取從start位置到end位置之間的一個子字符串，基本和slice相同，但是不接收負(fù)值substr(start[,length])截取從start位置開始到length長度的子字符串toLowerCase()獲取字符串的小寫形式toUpperCase()獲取字符串的大寫形式split([separator[,limit])使用separator分隔符將字符串分隔成數(shù)組，limit用于限制數(shù)量replace(str1,str2)使用str2替換字符串中的str1，返回替換結(jié)果，只會替換第一個字符字符串對象提供了一些用于截取字符串、連接字符串、替換字符串的屬性和方法。字符串對象的常用屬性和方法如下：知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)字符串對象var

str='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!"示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)

【案例】數(shù)組去除重復(fù)元素functionunique(arr){

var

newArr=[];for(var

i=0;i<arr.length;i++){if(newArr.indexOf(arr[i])===-1){newArr.push(arr[i]);}}returnnewArr;}vardemo=unique(['blue','green','blue']);console.log(demo); //輸出結(jié)果：(4)

["blue","green"]示例代碼

【案例】判斷用戶名是否合法案例需求：用戶名長度在3~10范圍內(nèi)，不能出現(xiàn)敏感詞admin的任何大小寫形式。varname=prompt('請輸入用戶名');if(name.length<3||name.length>10){alert('用戶名長度必須在3~10之間。');}elseif(name.toLowerCase().indexOf('admin')!==-1){alert('用戶名中不能包含敏感詞：admin。');}else{alert('恭喜您，該用戶名可以使用');}示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)總結(jié)：本章主要講解了數(shù)組對象實現(xiàn)數(shù)組排序、根據(jù)索引檢索元素，以及去除數(shù)組中的重復(fù)元素，使用字符串對象提供的方法實現(xiàn)字符串截取、替換等。

作業(yè)：完成任務(wù)實施內(nèi)容。1課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實施項目4-4正則表達(dá)式5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)提問數(shù)組對象怎么實例化？字符串對象怎么實例化？知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)任務(wù)重難點用戶名驗證身份證號碼驗證重點：認(rèn)識正則表達(dá)式正則表達(dá)式中的特殊字符量詞符與括號字符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)認(rèn)識正則表達(dá)式正則表達(dá)式：是一種描述字符串結(jié)構(gòu)的語法規(guī)則，是用于匹配字符串中字符組合的模式，同時正則表達(dá)式也是對象。

1.1什么是正則表達(dá)式

特點：正則表達(dá)式的靈活性。邏輯性和功能性非常強?？梢匝杆俚赜脴O簡單的方式達(dá)到字符串的復(fù)雜控制。

1.2正則表達(dá)式的特點

知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)認(rèn)識正則表達(dá)式創(chuàng)建正則對象：

1.3

正則表達(dá)式的使用

//字面量方式var

變量名=/表達(dá)式/;//RegExp構(gòu)造函數(shù)方式//或者var

變量名=RegExp(/表達(dá)式/);var

變量名=newRegExp(/表達(dá)式/);創(chuàng)建正則對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)認(rèn)識正則表達(dá)式案例演示：test()方法來檢測字符串是否符合正則規(guī)則var

str='123'varreg1=newRegExp(/123/);varreg2=/abc/;console.log(reg1.test(str));//匹配結(jié)果為：trueconsole.log(reg2.test(str));//匹配結(jié)果為：falsetest()方法知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符模式修飾符：基本語法/表達(dá)式/[switch]switch：表示模式修飾符，是可選的，用于進(jìn)一步對正則表達(dá)式進(jìn)行設(shè)置。

2.1模式修飾符

模式符說明g用于在目標(biāo)字符串中實現(xiàn)全局匹配i忽略大小寫m實現(xiàn)多行匹配u以Unicode編碼執(zhí)行正則表達(dá)式y(tǒng)粘性匹配，僅匹配目標(biāo)字符串中此正則表達(dá)式的lastIndex屬性指示的索引知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符邊界符：正則表達(dá)式中的邊界符（位置符）用來提示字符所處的位置

2.2邊界符

邊界符說明^表示匹配行首的文本$表示匹配行尾的文本知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符案例演示：var

reg

=

/^abc$/;console.log(reg.test('abc’));//結(jié)果為：trueconsole.log(reg.test('abcd’));//結(jié)果為：falseconsole.log(reg.test('aabcd’));//結(jié)果為：falseconsole.log(reg.test('abcabc’));//結(jié)果為：false邊界符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符預(yù)定義符：

2.3預(yù)定義類

字符說明.匹配除“\n”外的任何單個字符\d匹配所有0~9之間的任意一個數(shù)字，相當(dāng)于[0-9]\D匹配所有0~9以外的字符，相當(dāng)于[^0-9]\w匹配任意的字母、數(shù)字和下劃線，相當(dāng)于[a-zA-Z0-9]\W除所有字母、數(shù)字和下劃線以外的字符，相當(dāng)于[^a-zA-Z0-9]\s匹配空格（包括換行符、制表符、空格符等），相當(dāng)于[\t\r\n\v\f]\S匹配非空格的字符，相當(dāng)于[^\t\r\n\v\f]\f匹配一個換頁符（form-feed）\b匹配單詞分界符。如“\bg”可以匹配“bestgrade”，結(jié)果為“g”\B非單詞分界符。如“\Bade”可以匹配“bestgrade”，結(jié)果為“ade”知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符字符說明\t匹配一個水平制表符（tab）\n匹配一個換行符（linefeed）\xhh匹配ISO-8859-1值為hh（2個16進(jìn)制數(shù)字）的字符，如“\x61”表示“a”\r匹配一個回車符（carriagereturn）\v匹配一個垂直制表符（verticaltab）\uhhhh匹配Unicode值為hhhh（4個16進(jìn)制數(shù)字）的字符，如“\u597d”表示“好”知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符案例演示：var

str='goodidea';var

reg=/\s../gi; //正則對象str.match(reg); //匹配結(jié)果：["id"].和\s知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符轉(zhuǎn)義特殊字符：在正則表達(dá)式中可以使用“\”轉(zhuǎn)義特殊字符

多學(xué)一招

var

str='^abc\\1.23*edf$';var

reg=/\.|\$|\*|\^|\\/gi;str.match(reg); //匹配結(jié)果：(5)

["^","\",".","*","$"]\轉(zhuǎn)義字符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符字符類：是一個字符集，匹配相應(yīng)字符，它就會找到該匹配項。

2.4字符類

pattern(模式)說明[cat]匹配字符集合中的任意一個字符c、a、t[^cat]匹配除c、a、t以外的字符[A-Z]匹配字母A~Z范圍內(nèi)的字符[^a-z]匹配字母a~z范圍外的字符[a-zA-Z0-9]匹配大小寫字母和0~9范圍內(nèi)的字符[\u4e00-\u9fa5]匹配任意一個中文字符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符案例演示：var

reg

=

/[abc]/;console.log(reg.test('andy’));

//

結(jié)果為：trueconsole.log(reg.test('baby’));

//

結(jié)果為：trueconsole.log(reg.test('color’));

//結(jié)果為：trueconsole.log(reg.test('red’));

//

結(jié)果為：flasevar

rg

=

/^[abc]$/;console.log(rg.test('a’));//

結(jié)果為：trueconsole.log(rg.test('aa’));

//結(jié)果為：falseconsole.log(rg.test('b’));

//

結(jié)果為：trueconsole.log(rg.test('c’));

//結(jié)果為：trueconsole.log(rg.test('abc’));

//

結(jié)果為：flase[]符號知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符字符組合：如果允許用戶輸入英文字母（不區(qū)分大小寫）、數(shù)字、短橫線-、下劃線_的正則情況。

多學(xué)一招

var

rg

=

/^[a-zA-Z0-9_-]$/;字符組合知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)正則表達(dá)式的特殊字符字符組合：當(dāng)中括號“[]”與元字符“^”一起使用時，稱為取反符。

2.5取反符

var

rg

=

/^[^a-z]$/;console.log(rg.test('a’));

//

結(jié)果為：falseconsole.log(rg.test('z’));

//

結(jié)果為：falseconsole.log(rg.test('1’));//

結(jié)果為：trueconsole.log(rg.test('A’));

//

結(jié)果為：true^[]知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)量詞符與括號字符量詞符：用來設(shè)定某個模式出現(xiàn)的次數(shù)。

3.1量詞符

字符說明示例結(jié)果?匹配?前面的字符零次或一次hi?t可匹配ht和hit+匹配+前面的字符一次或多次bre+ad可匹配范圍從bread到bre…ad*匹配*前面的字符零次或多次ro*se可匹配范圍從rse到ro…se{n}匹配{}前面的字符n次hit{2}er只能匹配hitter{n,}匹配{}前面的字符最少n次hit{2,}er可匹配范圍從hitter到hitt…er{n,m}匹配{}前面的字符最少n次，最多m次hit{2,5}er可匹配范圍從hitter到hittttter知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)量詞符與括號字符案例演示：var

reg

=

/^a*$/;

//

*

相當(dāng)于>=0，可以出現(xiàn)0次或很多次var

reg

=

/^a+$/;

//

+

相當(dāng)于>=1，可以出現(xiàn)1次或很多次var

reg

=

/^a?$/;

//

?

相當(dāng)于1||0，可以出現(xiàn)0次或1次var

reg

=

/^a{3}$/;//

{3}就是重復(fù)a字符3次var

reg

=

/^a{3,}$/;

//

{3,}就是重復(fù)a字符大于等于3次var

reg

=

/^a{3,16}$/;

//

{3,16}就是重復(fù)a字符大于等于3次

小于等于16次量詞符