第2章 JavaScript語(yǔ)法基礎(chǔ)

第2章JavaScript語(yǔ)法基礎(chǔ)

夏敏捷

《微信小程序開(kāi)發(fā)教程》目錄2.1在HTML中使用JavaScript語(yǔ)言2.2基本語(yǔ)法2.3常用控制語(yǔ)句2.3.1選擇結(jié)構(gòu)語(yǔ)句2.3.2循環(huán)結(jié)構(gòu)語(yǔ)句2.4函數(shù)2.5JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)2.6JavaScript內(nèi)置對(duì)象2.7ES6簡(jiǎn)介第2章JavaScript語(yǔ)法基礎(chǔ)教學(xué)目標(biāo)：本章將會(huì)介紹JavaScript的核心語(yǔ)法。掌握J(rèn)avaScript的面向?qū)ο缶幊趟枷胍约坝嘘P(guān)對(duì)象的基本概念初步掌握創(chuàng)建和使用自定義的類(lèi)和對(duì)象。了解ES6的語(yǔ)法。2.1JavaScript語(yǔ)言概述JavaScript主要用于以下三個(gè)領(lǐng)域：瀏覽器：得到所有瀏覽器的支持，只要有網(wǎng)頁(yè)的地方就有JavaScript。服務(wù)器：借助node.js運(yùn)行環(huán)境，JavaScript已經(jīng)成為很多開(kāi)發(fā)者進(jìn)行后端開(kāi)發(fā)的選擇之一。微信小程序：小程序邏輯開(kāi)發(fā)的語(yǔ)言。標(biāo)準(zhǔn)ECMAScript通?？s寫(xiě)為ES。在微信小程序中通常使用ES5和ES6版本。

微信小程序2.1.2運(yùn)行JavaScript語(yǔ)言1．在瀏覽器中運(yùn)行在HTML文件中使用JavaScript腳本時(shí)，JavaScript代碼需要出現(xiàn)在<ScriptLanguage="JavaScript">和</Script>之間?！纠?-1】一個(gè)簡(jiǎn)單的在HTML文件中使用JavaScript腳本實(shí)例。另外一種插入JavaScript程序的方法是把JavaScript代碼寫(xiě)到一個(gè).js文件當(dāng)中，然后在HTML文件中引用該js文件，方法如下：<scriptsrc="***.js文件"></script>2.1.2運(yùn)行JavaScript語(yǔ)言JavaScript是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶(hù)端執(zhí)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶(hù)端由瀏覽器解釋執(zhí)行。注意與Java的區(qū)別，Java的源代碼在傳遞到客戶(hù)端執(zhí)行之前，必須經(jīng)過(guò)編譯，因而客戶(hù)端上必須具有相應(yīng)平臺(tái)上的解釋器，它可以通過(guò)解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺(tái)編譯代碼的束縛。2.1.2運(yùn)行JavaScript語(yǔ)言2．在服務(wù)器中運(yùn)行搭建node運(yùn)行環(huán)境后，通過(guò)命令行執(zhí)行JS文件。例如：nodeoutput.js3．在微信小程序中運(yùn)行在微信小程序中，JavaScript需要單獨(dú)保存在JS文件中，即外聯(lián)式。小程序框架對(duì)此進(jìn)行了優(yōu)化，只要按目錄規(guī)范保證JS文件與WXML文件同名，則無(wú)須使用<scriptsrc="***.js文件"></script>引入即可使用。在微信開(kāi)發(fā)工具中，單擊console選項(xiàng)卡可以查看JS代碼文件中console.log()輸出的調(diào)試信息。例如：variNum=10;iNum*=2;console.log(iNum);console選項(xiàng)卡例如：variNum=10;iNum*=2;console.log(iNum);2.2基本語(yǔ)法2.2.1數(shù)據(jù)類(lèi)型JavaScript包含下面5種原始數(shù)據(jù)類(lèi)型。1．Undefined：即為未定義類(lèi)型，用于不存在或者沒(méi)有被賦初始值的變量或?qū)ο蟮膶傩?．Null：

作用是表明數(shù)據(jù)空缺的值。一般將Undefined型和Null型等同對(duì)待。3．Boolean：取值為ture或false，分別表示邏輯真和假4．String：字符型數(shù)據(jù)。JavaScript不區(qū)分單個(gè)字符和字符串。用雙引號(hào)或單引號(hào)引起來(lái)。varnameA="Tom";varnameB='Tom';5．Number：即為數(shù)值型數(shù)據(jù)，包括整數(shù)型和浮點(diǎn)型。varmyDataA=8;varmyDataB=6.3;JavaScript腳本語(yǔ)言除了支持上述基本數(shù)據(jù)類(lèi)型外，也支持組合類(lèi)型，如數(shù)組Array和對(duì)象Object等。2.2基本語(yǔ)法2.2.2常量和變量1．常量常量是內(nèi)存中用于保存固定值的單元，在程序中常量的值不能發(fā)生改變。2．變量變量是內(nèi)存中命名的存儲(chǔ)位置，可以在程序中設(shè)置和修改變量的值。在JavaScript中，可以使用var關(guān)鍵字聲明變量。2.2.3注釋JavaScript支持2種類(lèi)型的注釋字符。1．//2．/*...*/2.2基本語(yǔ)法2.2.4運(yùn)算符和表達(dá)式1．算術(shù)運(yùn)算符算術(shù)運(yùn)算符可以實(shí)現(xiàn)數(shù)學(xué)運(yùn)行，包括加（+）、減（-）、乘（*）、除（/）和求余（%）。2．賦值運(yùn)算符JavaScript腳本語(yǔ)言的賦值運(yùn)算符包含“=”、“+=”、“—=”、“*=”、“/=”、“%=”、“&=”、“^=”等，如表2-1所示。3．關(guān)系運(yùn)算符JavaScript腳本語(yǔ)言中用于比較兩個(gè)數(shù)據(jù)的運(yùn)算符稱(chēng)為比較運(yùn)算符，包括“==”、“!=”、“>”、“<”、“<=”、“>=”等，其具體作用見(jiàn)表2-2所示。4．邏輯運(yùn)算符JavaScript腳本語(yǔ)言的邏輯運(yùn)算符包括“&&”、“||”和“!”等，用于兩個(gè)邏輯型數(shù)據(jù)之間的操作，返回值的數(shù)據(jù)類(lèi)型為布爾型。邏輯運(yùn)算符的功能如表2-3所示。2.2基本語(yǔ)法2.2.4運(yùn)算符和表達(dá)式5．位運(yùn)算符位移運(yùn)算符用于將目標(biāo)數(shù)據(jù)（二進(jìn)制形式）往指定方向移動(dòng)指定的位數(shù)。JavaScript腳本語(yǔ)言支持“<<”、“>>”和“>>>”等位移運(yùn)算符，其具體作用如見(jiàn)表2-4：6．條件運(yùn)算符在JavaScript腳本語(yǔ)言中，“?：”運(yùn)算符用于創(chuàng)建條件分支。a>b？a:b7．逗號(hào)運(yùn)算符使用逗號(hào)運(yùn)算符可以在一條語(yǔ)句中執(zhí)行多個(gè)運(yùn)算，例如：variNum1=1,iNum=2,iNum3=3;8．typeof運(yùn)算符typeof運(yùn)算符用于表明操作數(shù)的數(shù)據(jù)類(lèi)型，返回?cái)?shù)值類(lèi)型為一個(gè)字符串。2.3常用控制語(yǔ)句2.3.1選擇結(jié)構(gòu)語(yǔ)句1．if語(yǔ)句2．if...else...語(yǔ)句2.3常用控制語(yǔ)句3．if...elseif…else語(yǔ)句【例2-3】下面是一個(gè)顯示當(dāng)前系統(tǒng)日期的JavaScript代碼，其中使用到if...elseif…else語(yǔ)句。下面是一個(gè)顯示當(dāng)前系統(tǒng)日期的JavaScript代碼//顯示當(dāng)前系統(tǒng)日期

d=newDate();console.log("今天是");if(d.getDay()==1){console.log("星期一");}elseif(d.getDay()==2){console.log("星期二");}elseif(d.getDay()==3){console.log("星期三");}elseif(d.getDay()==4){console.log("星期四");}

elseif(d.getDay()==5){console.log("星期五");}elseif(d.getDay()==6){console.log("星期六");}else{console.log("星期日");}2.3常用控制語(yǔ)句4．switch語(yǔ)句switch(表達(dá)式){case值1:

語(yǔ)句塊1break;case值2:

語(yǔ)句塊2break;

……case值n:

語(yǔ)句塊nbreak;default:

語(yǔ)句塊n+1}【例2-5】將例2-4的按分?jǐn)?shù)輸出其等級(jí)使用switch語(yǔ)句實(shí)現(xiàn)。按分?jǐn)?shù)輸出其等級(jí)//使用switch語(yǔ)句實(shí)現(xiàn)按分?jǐn)?shù)輸出其等級(jí)varMyScore=89;

//請(qǐng)輸入成績(jī)score=parseInt(MyScore/10)//parseInt取整

switch(score/10){case10:case9:console.log("優(yōu)");break;case8:console.log("良");break;case7:console.log("中");break;case6:console.log("及格");break;default:console.log("不及格");}if...elseif…else語(yǔ)句實(shí)現(xiàn)按分?jǐn)?shù)輸出其等級(jí)varscore=89;//請(qǐng)輸入成績(jī)if(score>=90)console.log("優(yōu)");elseif(score>=80&&score<90)console.log("良");elseif(score>=70)console.log("中");elseif(score>=60)console.log("及格");elseconsole.log("不及格");2.3常用控制語(yǔ)句2.3.2循環(huán)結(jié)構(gòu)語(yǔ)句1while語(yǔ)句while語(yǔ)句的語(yǔ)法格式為：while(表達(dá)式){

循環(huán)體語(yǔ)句}【例2-6】用while循環(huán)來(lái)計(jì)算1+2+3...+98+99+100的值。//計(jì)算1+2+3...+98+99+100的值vartotal=0;vari=1;while(i<=100){total+=i;i++;}console.log(total);2.3常用控制語(yǔ)句2.3.2循環(huán)結(jié)構(gòu)語(yǔ)句2．do…while語(yǔ)句do-while語(yǔ)句的語(yǔ)法格式如下：do{

循環(huán)體語(yǔ)句}while(表達(dá)式)；【例2-7】用do…while循環(huán)來(lái)計(jì)算1+2+3...+98+99+100的值。//計(jì)算1+2+3...+98+99+100的值vartotal=0;vari=1;do{total+=i;i++;}while(i<=100);console.log(total);2.3常用控制語(yǔ)句3．for語(yǔ)句for循環(huán)語(yǔ)句是循環(huán)結(jié)構(gòu)語(yǔ)句，按照指定的循環(huán)次數(shù)，循環(huán)執(zhí)行循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊），其基本結(jié)構(gòu)如下：for(表達(dá)式1;表達(dá)式2;表達(dá)式3){循環(huán)體語(yǔ)句}【例2-8】用for循環(huán)來(lái)計(jì)算1+2+3...+98+99+100的值。//計(jì)算1+2+3...+98+99+100的值vartotal=0;for(vari=1;i<=100;i++){total+=i;}console.log(total);2.3常用控制語(yǔ)句4．continue語(yǔ)句continue語(yǔ)句的一般格式為：continue;該語(yǔ)句只能用在循環(huán)結(jié)構(gòu)中。當(dāng)在循環(huán)結(jié)構(gòu)中遇到continue語(yǔ)句時(shí)，則跳過(guò)continue語(yǔ)句后的其他語(yǔ)句，結(jié)束本次循環(huán)，并轉(zhuǎn)去判斷循環(huán)控制條件，以決定是否進(jìn)行下一次循環(huán)。5．break語(yǔ)句break語(yǔ)句的一般格式為：break;該語(yǔ)句只能用于兩種情況：（1）用在switch結(jié)構(gòu)中，當(dāng)某個(gè)case分支執(zhí)行完后，使用break語(yǔ)句跳出switch結(jié)構(gòu)。（2）用在循環(huán)結(jié)構(gòu)中，用break語(yǔ)句來(lái)結(jié)束循環(huán)。如果放在嵌套循環(huán)中，則break語(yǔ)句只能結(jié)束其所在的那層循環(huán)。2.4函數(shù)函數(shù)（function）由若干條語(yǔ)句組成，用于實(shí)現(xiàn)特定的功能。函數(shù)包含函數(shù)名、若干參數(shù)和返回值。2.4.1創(chuàng)建自定義函數(shù)function函數(shù)名(參數(shù)列表){

函數(shù)體}functionPrintWelcome(){document.write("歡迎使用JavaScript");}2.4函數(shù)2.4.2調(diào)用函數(shù)1．在JavaScript中使用函數(shù)名來(lái)調(diào)用函數(shù)在JavaScript中，可以直接使用函數(shù)名來(lái)調(diào)用函數(shù)。無(wú)論是內(nèi)置函數(shù)還是自定義函數(shù)，調(diào)用函數(shù)的方法都是一致的。2．在HTML中使用"javascript:"方式調(diào)用JavaScript函數(shù)在HTML中的a鏈接中可以使用"javascript:"方式調(diào)用JavaScript函數(shù)，方法如下：<ahref="javascript:函數(shù)名(參數(shù)列表)">…</a>3．與事件結(jié)合調(diào)用JavaScript函數(shù)可以將JavaScript函數(shù)指定為JavaScript事件的處理函數(shù)。當(dāng)觸發(fā)事件時(shí)會(huì)自動(dòng)調(diào)用指定的JavaScript函數(shù)。<buttonbindtap="Hello1">設(shè)置</button>

Hello1:function(){console.log('單擊我了')}2.4函數(shù)//計(jì)算并打印num1和num2之和functionsum(num1,num2){console.log(num1+num2);}sum(1,2);//結(jié)果是3與事件結(jié)合調(diào)用JavaScript函數(shù)<buttonbindtap="Hello1">設(shè)置</button>Hello1:function(){console.log('單擊我了')}2.4函數(shù)2.4.3變量的作用域vara=100;

//全局變量functionsetNumber(){vara=10; //局部變量console.log(a); //打印局部變量a}setNumber();console.log("<BR>");console.log(a); //打印全局變量a程序運(yùn)行結(jié)果：10<BR>1002.4函數(shù)2.4.3變量的作用域在函數(shù)中定義的變量被稱(chēng)為局部變量。局部變量只在定義它的函數(shù)內(nèi)部有效，在函數(shù)體之外，即使使用同名的變量，也會(huì)被看作是另一個(gè)變量。相應(yīng)地，在函數(shù)體之外定義的變量是全局變量。全局變量在定義后的代碼中都有效，包括它后面定義的函數(shù)體內(nèi)。如果局部變量和全局變量同名，則在定義局部變量的函數(shù)中，只有局部變量是有效的。2.4函數(shù)2.4.4函數(shù)的返回值使用return語(yǔ)句可以返回函數(shù)值并退出函數(shù)function函數(shù)名(){return返回值;}2.4.5定義函數(shù)庫(kù)JavaScript函數(shù)庫(kù)是一個(gè).js文件，其中包含函數(shù)的定義。在HTML文件中引用函數(shù)庫(kù)js文件的方法如下：<scriptsrc="函數(shù)庫(kù)js文件"></script><script>//引用js文件中的函數(shù)</script>求(m,n)兩個(gè)數(shù)字之間的和，代碼如下：functiongetTotal(m,n){vartotal=0;if(m>=n){returnfalse;//n必需大于m否則無(wú)意義}for(vari=m;i<=n;i++){total+=i;}returntotal;}console.log(getTotal(1,10));2.4函數(shù)2.4.6JavaScript內(nèi)置函數(shù)1．a(chǎn)lert()函數(shù)alert()函數(shù)用于彈出一個(gè)消息對(duì)話(huà)框，該對(duì)話(huà)框包括一個(gè)“確定”按鈕。2．confirm()函數(shù)confirm()函數(shù)用于顯示一個(gè)請(qǐng)求確認(rèn)對(duì)話(huà)框，包含一個(gè)“確定”按鈕和一個(gè)“取消”按鈕。在程序中，可以根據(jù)用戶(hù)的選擇決定執(zhí)行的操作2.4函數(shù)3．parseFloat()函數(shù)parseFloat()函數(shù)用于將字符串轉(zhuǎn)換成浮點(diǎn)數(shù)字形式。語(yǔ)法如下：parseFloat(str)參數(shù)str是待解析的字符串。函數(shù)返回解析后的數(shù)字。4．parseInt()函數(shù)parseInt()函數(shù)用于將字符串轉(zhuǎn)換成整型數(shù)字形式。語(yǔ)法如下：parseInt(str,radix)參數(shù)str是待解析的字符串；參數(shù)radix可選。表示要解析的數(shù)字的進(jìn)制。該值介于2~36之間。parseInt("10"); //10進(jìn)制，結(jié)果是10parseInt("f",16); //16進(jìn)制，結(jié)果是15parseInt("010",2); //2進(jìn)制，結(jié)果是22.4函數(shù)3．isNaN()函數(shù)isNaN()用于檢驗(yàn)?zāi)硞€(gè)值是否為NaN（notanumber不是數(shù)字），返回false為數(shù)字，返回true為非數(shù)字。varnum="123.456789abc";isNaN(num) //結(jié)果是trueisNaN("123") //結(jié)果是false4．強(qiáng)制類(lèi)型轉(zhuǎn)換函數(shù)用戶(hù)可以使用強(qiáng)制類(lèi)型轉(zhuǎn)換函數(shù)來(lái)轉(zhuǎn)換值的類(lèi)型。在ECMAScript中可以使用以下3種強(qiáng)制類(lèi)型轉(zhuǎn)換函數(shù)。String(value)：把給定的值轉(zhuǎn)換成字符串。類(lèi)似于toString()方法，但是和它又不同，對(duì)null或undefined值toString()會(huì)報(bào)錯(cuò)。Boolean(value)：把給定的值轉(zhuǎn)換成Boolean型。給定的值為空字符串、數(shù)字0、undefined或null返回false，其余返回true。Number(value)：把給定的值轉(zhuǎn)換成數(shù)字（可以是整數(shù)或浮點(diǎn)數(shù)）。2.4函數(shù)vara=String(123);//返回"123"vara=Boolean(0);/返回falsevara=Boolean(undefined);//返回falsevara=Boolean(null);//返回falsevara=Boolean(50);//返回truevara=Number("11.11");//返回11.115．保留幾位小數(shù)NumberObject.toFixed(位數(shù))；toFixed()位數(shù)功能是保留幾位小數(shù)（四舍五入），參數(shù)為保留的小數(shù)點(diǎn)后位數(shù)，返回的值為String類(lèi)型。vara=13.37.toFixed(4);//返回"13.3700"vara=13.378888.toFixed(2);//返回"13.38"2.5JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)JavaScript腳本是面向?qū)ο螅∣bject-based）的編程語(yǔ)言，它可以將屬性和代碼集成在一起，定義為類(lèi)，從而使程序設(shè)計(jì)更加簡(jiǎn)單、規(guī)范、有條理。通過(guò)對(duì)象的來(lái)訪問(wèn)可大大簡(jiǎn)化JavaScript程序的設(shè)計(jì)，并提供直觀、模塊化的方式進(jìn)行腳本程序開(kāi)發(fā)。2.5.1

面向?qū)ο蟪绦蛟O(shè)計(jì)思想對(duì)象是客觀世界存在的人、事和物體等實(shí)體?，F(xiàn)實(shí)生活中存在很多的對(duì)象，比如貓、自行車(chē)等。不難發(fā)現(xiàn)它們有兩個(gè)共同特征：都有狀態(tài)和行為。圖2-8以自然人構(gòu)造的對(duì)象2.5.1面向?qū)ο蟪绦蛟O(shè)計(jì)思想凡是能夠提取一定度量數(shù)據(jù)并能通過(guò)某種途徑對(duì)度量數(shù)據(jù)實(shí)施操作的客觀存在都可以構(gòu)成一個(gè)對(duì)象，且用屬性來(lái)描述對(duì)象的狀態(tài)，使用方法和事件來(lái)處理對(duì)象的各種行為。下面介紹一些概念。對(duì)象（Object）：面向?qū)ο蟪绦蛟O(shè)計(jì)思想可以將一組數(shù)據(jù)和與這組數(shù)據(jù)有關(guān)操作組裝在一起，形成一個(gè)實(shí)體，這個(gè)實(shí)體就是對(duì)象。屬性：用來(lái)描述對(duì)象的狀態(tài)。通過(guò)定義屬性值，可以改變對(duì)象的狀態(tài)。如圖2-8中，可以定義height表示該自然人身高，字符串HungryOrNot來(lái)表示該自然人肚子的狀態(tài)，HungryOrNot成為自然人的某個(gè)屬性；方法：也稱(chēng)為成員函數(shù)，是指對(duì)象上的操作。如圖2-8中，可以定義方法Eat()來(lái)處理自然人肚子很餓的情況，Eat()成為自然人的某個(gè)方法；事件：由于對(duì)象行為的復(fù)雜性，對(duì)象的某些行為需要用戶(hù)根據(jù)實(shí)際情況來(lái)編寫(xiě)處理該行為的代碼，該代碼稱(chēng)為事件。在圖2-8中，可以定義事件DrinkBeforeEat()來(lái)處理自然人肚子很餓同時(shí)嘴巴很渴需要先喝水后進(jìn)食。2.5.2面向?qū)ο缶幊堂嫦驅(qū)ο缶幊蹋∣PP）是一種計(jì)算機(jī)編程架構(gòu)，具有三個(gè)最基本的特點(diǎn)：封裝、重用性（繼承）、多態(tài)。（1）類(lèi)（class）：具有相同或相似性質(zhì)的對(duì)象的抽象就是類(lèi)。

（2）封裝：將數(shù)據(jù)和操作捆綁在一起，定義一個(gè)新類(lèi)的過(guò)程就是封裝。（3）繼承：類(lèi)之間的關(guān)系，在這種關(guān)系中，一個(gè)類(lèi)共享了一個(gè)或多個(gè)其他類(lèi)定義的屬性和行為。

（4）多態(tài)：從同一個(gè)類(lèi)中繼承得到的子類(lèi)也具有多態(tài)性，即相同的函數(shù)名在不同子類(lèi)中有不同的實(shí)現(xiàn)。就如同子女會(huì)從父母那里繼承到人類(lèi)共有的特性，而子女也具有自己的特性。實(shí)際上，JavaScript語(yǔ)言是通過(guò)一種叫做原型（prototype）的方式來(lái)實(shí)現(xiàn)面向?qū)ο缶幊痰摹?.5.3JavaScript類(lèi)的定義和實(shí)例化嚴(yán)格的說(shuō)，JavaScript是基于對(duì)象的編程語(yǔ)言，而不是面向?qū)ο蟮木幊陶Z(yǔ)言。在面向?qū)ο蟮木幊陶Z(yǔ)言中（如Java、C++、C#、PHP等），聲明一個(gè)類(lèi)使用class關(guān)鍵字。但是在JavaScript中，沒(méi)有聲明類(lèi)的關(guān)鍵字，也沒(méi)有辦法對(duì)類(lèi)的訪問(wèn)權(quán)限進(jìn)行控制。JavaScript使用函數(shù)來(lái)定義類(lèi)。1.類(lèi)的定義定義一個(gè)Person類(lèi)：functionPerson(){="張三"; //定義一個(gè)屬性namethis.sex="男"; //定義一個(gè)屬性sex

this.say=function(){ //定義一個(gè)方法

say()

console.log("我的名字是"++"，性別是"+this.sex+"。");}}2.5.3JavaScript類(lèi)的定義和實(shí)例化2.創(chuàng)建對(duì)象（類(lèi)的實(shí)例化）創(chuàng)建對(duì)象的過(guò)程也是類(lèi)實(shí)例化的過(guò)程。在JavaScript中，創(chuàng)建對(duì)象（即類(lèi)的實(shí)例化）使用new關(guān)鍵字。創(chuàng)建對(duì)象語(yǔ)法：newclassName()將上面的Person類(lèi)實(shí)例化：varzhangsan=newPerson();zhangsan.say();運(yùn)行代碼，輸出如下內(nèi)容：大家好，我的名字是張三，性別是男。2.5.3JavaScript類(lèi)的定義和實(shí)例化3.通過(guò)對(duì)象直接初始化創(chuàng)建對(duì)象通過(guò)直接初始化對(duì)象來(lái)創(chuàng)建對(duì)象，與定義對(duì)象的構(gòu)造函數(shù)方法不同的是，該方法不需要new生成此對(duì)象的實(shí)例，改寫(xiě)zhangsan對(duì)象：<script>//直接初始化對(duì)象varzhangsan={name:"張三",sex:"男",say:function(){//定義對(duì)象的方法document.write("大家好，我的名字是"++"，性別是"+this.sex);}}zhangsan.say();</script>對(duì)象直接初始化是一個(gè)“名字/值”對(duì)列表，最后用一個(gè)大括號(hào)括起來(lái)。“名字/值”對(duì)表示對(duì)象的一個(gè)屬性或方法，名和值之間用冒號(hào)分隔。2.5.3JavaScript類(lèi)的定義和實(shí)例化3.通過(guò)對(duì)象直接初始化創(chuàng)建對(duì)象上面的zhangsan對(duì)象，也可以這樣來(lái)創(chuàng)建：varzhangsan={}="張三";zhangsan.sex="男";zhangsan.say=function(){return"嗨！大家好，我來(lái)了。";}該方法在只需生成一個(gè)對(duì)象實(shí)例并進(jìn)行相關(guān)操作的情況下使用時(shí)，代碼緊湊，編程效率高，但致命的是，若要生成若干個(gè)對(duì)象實(shí)例，就必須為生成每個(gè)對(duì)象實(shí)例重復(fù)相同的代碼結(jié)構(gòu)，代碼的重用性比較差，不符合面向?qū)ο蟮木幊趟悸罚瑧?yīng)盡量避免使用該方法創(chuàng)建自定義對(duì)象。2.5.4JavaScript訪問(wèn)對(duì)象的屬性和方法屬性是一個(gè)變量，用來(lái)表示一個(gè)對(duì)象的特征，如顏色、大小、重量等；方法是一個(gè)函數(shù)，用來(lái)表示對(duì)象的操作，如奔跑、呼吸、跳躍等。對(duì)象的屬性和方法統(tǒng)稱(chēng)為對(duì)象的成員。在JavaScript中，可以使用“.”和“[]”來(lái)訪問(wèn)對(duì)象的屬性。1.使用“.”來(lái)訪問(wèn)對(duì)象屬性語(yǔ)法：objectNpertyName其中，objectName為對(duì)象名稱(chēng)，propertyName為屬性名稱(chēng)。2.使用“[]”來(lái)訪問(wèn)對(duì)象屬性語(yǔ)法：

objectName[propertyName]3.訪問(wèn)對(duì)象的方法在JavaScript中，只能使用“.”來(lái)訪問(wèn)對(duì)象的方法。語(yǔ)法：objectName.methodName()2.5.4JavaScript訪問(wèn)對(duì)象的屬性和方法【例2-15】創(chuàng)建一個(gè)Person對(duì)象并訪問(wèn)其成員。functionPerson(){="張三";//定義一個(gè)屬性namethis.sex="男";//定義一個(gè)屬性sexthis.age=22;//定義一個(gè)屬性agethis.say=function(){//定義一個(gè)方法say()return"我的名字是"++"，性別是"+this.sex+"，今年"+this.age+"歲!";}}varzhangsan=newPerson();console.log("姓名："+);//使用“.”來(lái)訪問(wèn)對(duì)象屬性console.log("性別："+zhangsan.sex);console.log("年齡："+zhangsan["age"]);//使用“[]”來(lái)訪問(wèn)對(duì)象屬性console.log(zhangsan.say());//使用“.”來(lái)訪問(wèn)對(duì)象方法動(dòng)態(tài)添加對(duì)象的屬性和方法【例2-16】用Person類(lèi)創(chuàng)建一個(gè)對(duì)象，向其添加屬性和方法。functionPerson(name,sex){//定義類(lèi)=name;//定義一個(gè)屬性namethis.sex=sex;//定義一個(gè)屬性sexthis.say=function(){//定義一個(gè)方法say()return"大家好，我的名字是"++"，性別是"+this.sex+"。";}}varzhangsan=newPerson("張三","男");//創(chuàng)建對(duì)象zhangsan.say();//動(dòng)態(tài)添加屬性和方法zhangsan.tel=;//動(dòng)態(tài)添加屬性telzhangsan.run=function(){//動(dòng)態(tài)添加方法runreturn"我跑得很快！";}//彈出警告框alert("姓名："+);alert("姓別："+zhangsan.sex);alert(zhangsan.say());alert("電話(huà)："+zhangsan.tel);alert(zhangsan.run());2.6JavaScript內(nèi)置對(duì)象JavaScript腳本提供豐富的內(nèi)置對(duì)象（內(nèi)置類(lèi)），包括同基本數(shù)據(jù)類(lèi)型相關(guān)的對(duì)象（如String、Boolean、Number）、允許創(chuàng)建用戶(hù)自定義和組合類(lèi)型的對(duì)象（如Object、Array）和其他能簡(jiǎn)化JavaScript操作的對(duì)象（如Math、Date、RegExp、Function）。了解這些內(nèi)置對(duì)象是JavaScript編程和游戲開(kāi)發(fā)的基礎(chǔ)和前提。2.6JavaScript內(nèi)置對(duì)象JavaScript的內(nèi)置對(duì)象（內(nèi)置類(lèi)）框架如圖所示。2.6.2基類(lèi)Object所有的JavaScript對(duì)象都繼承自O(shè)bject類(lèi)，后者為前者提供基本的屬性（如prototype屬性等）和方法（如toString()方法等）。而前者也在這些屬性和方法基礎(chǔ)上進(jìn)行擴(kuò)展，以支持特定的某些操作?；?lèi)Object的屬性和方法見(jiàn)表2-2所示。2.6.3Date類(lèi)Date類(lèi)主要提供獲取和設(shè)置日期和時(shí)間的方法，如getYear()、getMonth()、getDate()等。Date類(lèi)的常用方法見(jiàn)表2-3所示。2.6.4String類(lèi)String是JavaScript的字符串類(lèi)，用于管理和操作字符串?dāng)?shù)據(jù)。可以使用下面2種方法創(chuàng)建String對(duì)象：MyStr=newString("這是一個(gè)測(cè)試字符串");//把參數(shù)作為MyStr對(duì)象的初始值。MyStr="這是一個(gè)測(cè)試字符串";//直接對(duì)String對(duì)象賦值字符串String類(lèi)只有一個(gè)屬性length，用來(lái)返回字符串的長(zhǎng)度。【例2-18】計(jì)算String對(duì)象的長(zhǎng)度。

varMyStr;MyStr=newString("這是一個(gè)測(cè)試字符串");console.log("“"+MyStr+"”的長(zhǎng)度為:"+MyStr.length);

//演示使用String對(duì)象的length屬性運(yùn)行結(jié)果如下：

“這是一個(gè)測(cè)試字符串”的長(zhǎng)度為:9String類(lèi)的常用方法見(jiàn)表2-4所示。2.6.4String類(lèi)【例2-19】演示slice()方法的例子。varstr="Helloworld!"console.log(str.slice(6,11))2.6.5Array類(lèi)Array數(shù)組是在內(nèi)存中保存一組數(shù)據(jù)。Array類(lèi)的常用方法見(jiàn)表2-5所示。1．Array數(shù)組創(chuàng)建與使用方法一：可以使用new關(guān)鍵字創(chuàng)建Array對(duì)象，方法如下：Array對(duì)象=newArray(數(shù)組大小)例如下面的語(yǔ)句可以創(chuàng)建一個(gè)由3個(gè)元素組成的數(shù)組cars：varcars=newArray(3);通過(guò)下面的方法訪問(wèn)數(shù)組元素。數(shù)組元素值=數(shù)組名[索引]varcars=newArray(3);cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";方法二：在創(chuàng)建數(shù)組對(duì)象的時(shí)候給元素賦值。varcars=newArray("Audi","BMW","Volvo");方法三：直接賦值。varcars=["Audi","BMW","Volvo"];2.6.5Array類(lèi)2．?dāng)?shù)組遍歷可以使用for語(yǔ)句遍歷數(shù)組的所有索引，然后使用數(shù)組名[索引]方法訪問(wèn)每個(gè)數(shù)組元素?！纠?-20】使用for語(yǔ)句遍歷數(shù)組。varMyStr;MyArr=newArray(3);MyArr[0]="中國(guó)";MyArr[1]="美國(guó)";MyArr[2]="日本";for(vari=0;i<MyArr.length;i++)console.log(MyArr[i]);2.6.5Array類(lèi)3．?dāng)?shù)組排序使用Array類(lèi)的sort()方法可以對(duì)數(shù)組元素進(jìn)行排序，sort()方法返回排序后的數(shù)組。語(yǔ)法如下：arrayObject.sort(sortby)參數(shù)sortby可選，用于規(guī)定排序順序，sortby必須是函數(shù)。如果調(diào)用該方法時(shí)沒(méi)有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進(jìn)行排序，說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序。【例2-22】對(duì)數(shù)組排序的例子。vararr=newArray(6);arr[0]="George";arr[1]="Johney";arr[2]="Thomas";arr[3]="James";arr[4]="Adrew";arr[5]="Martin";console.log("排序前"+arr);console.log("排序后"+arr.sort());2.6.5Array類(lèi)4．?dāng)?shù)組的操作(1)push()方法往數(shù)組后面添加數(shù)組，并返回?cái)?shù)組新長(zhǎng)度。vara=["aa","bb","cc"];console.log(a.push("dd"));//輸出4console.log(a);//輸出aa,bb,cc,dd而unshift()方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。(2)pop()方法和shift()方法pop()方法刪除數(shù)組最后一個(gè)元素，并返回該元素。而shift()方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。vara=["aa","bb","cc"];console.log(a.pop()); //輸出ccconsole.log(a.shift()); //輸出aa2.6.5Array類(lèi)(3)slice()方法可從已有的數(shù)組中返回選定的元素的一個(gè)新數(shù)組。語(yǔ)法如下：arrayObject.slice(start,end)(4)join()方法用于把數(shù)組中的所有元素連接起來(lái)放入一個(gè)字符串。

vararr=newArray(3);arr[0]="George";arr[1]="John";arr[2]="Thomas";console.log(arr.join(".")); //輸出George.John.Thomas2.6.5Array類(lèi)5．二維數(shù)組數(shù)組中的元素又是數(shù)組就成為二維數(shù)組。創(chuàng)建二維數(shù)組方法如下：方法一：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素再創(chuàng)建一維數(shù)組。varpersons=newArray(3); //創(chuàng)建一個(gè)一維數(shù)組persons[0]=newArray(2); //每個(gè)元素persons[0]又是一維數(shù)組persons[1]=newArray(2); //每個(gè)元素persons[1]又是一維數(shù)組persons[2]=newArray(2); //每個(gè)元素persons[2]又是一維數(shù)組persons[0][0]="zhangsan";persons[0][1]=25;persons[1][0]="lisi";persons[1][1]=22;persons[2][0]="wangwu";persons[2][1]=32;方法二：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素直接賦值。varpersons=newArray(3);persons[0]=["zhangsan",25];persons[1]=["lisi",21];persons[2]=["wangwu",32];方法三：直接賦值。varpersons=[["zhangsan",25],["lisi",21],["wangwu",32]];2.6.5Array類(lèi)5．二維數(shù)組數(shù)組中的元素又是數(shù)組就成為二維數(shù)組。創(chuàng)建二維數(shù)組方法如下：方法一：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素再創(chuàng)建一維數(shù)組。varpersons=newArray(3); //創(chuàng)建一個(gè)一維數(shù)組persons[0]=newArray(2); //每個(gè)元素persons[0]又是一維數(shù)組persons[1]=newArray(2); //每個(gè)元素persons[1]又是一維數(shù)組persons[2]=newArray(2); //每個(gè)元素persons[2]又是一維數(shù)組persons[0][0]="zhangsan";persons[0][1]=25;persons[1][0]="lisi";persons[1][1]=22;persons[2][0]="wangwu";persons[2][1]=32;方法二：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素直接賦值。varpersons=newArray(3);persons[0]=["zhangsan",25];persons[1]=["lisi",21];persons[2]=["wangwu",32];方法三：直接賦值。varpersons=[["zhangsan",25],["lisi",21],["wangwu",32]];2.6.6Math對(duì)象Math對(duì)象是對(duì)一個(gè)已創(chuàng)建好的Math類(lèi)的實(shí)例，因此不能使用new運(yùn)算符。其提供一些屬性是數(shù)學(xué)中常用的常量，E（自然對(duì)數(shù)的底，約為2.718）、LN2（2的自然對(duì)數(shù)）、LN10（10的自然對(duì)數(shù)）、LOG2E（以2為底的e的對(duì)數(shù)）、LOG10E（以10為底的e的對(duì)數(shù)）、PI（圓周率）等。Math對(duì)象提供的一些方法是數(shù)學(xué)中常用的函數(shù)，如sin()、random()、log()等。Math對(duì)象的常用方法見(jiàn)表2-6所示。2.7ES6簡(jiǎn)介微信小程序已經(jīng)支持絕大部分的ES6API，用戶(hù)可以放心的使用。2.7.1變量相關(guān)ES2015(ES6)新增加了兩個(gè)重要的JavaScript關(guān)鍵字：let和const。let聲明的變量只在let所在的代碼塊（一對(duì)花括號(hào)內(nèi)部的代碼）內(nèi)有效，也成為塊作用域。let只能聲明同一個(gè)變量一次而var可以聲明多次。for循環(huán)計(jì)數(shù)器很適合用let聲明。varj=5;for(letj=0;j<10;j++){console.log(j);}console.log(j);//5,不受影響2.7ES6簡(jiǎn)介

2．constconst聲明一個(gè)只讀的常量，一旦聲明，常量的值就不能改變。constPI=3.1415926;2.7.2數(shù)據(jù)類(lèi)型ES6數(shù)據(jù)類(lèi)型除了Number、String、Boolean、Object、null和undefined，ES6引入了一種新的數(shù)據(jù)類(lèi)型Symbol，表示獨(dú)一無(wú)二的值，最大的用法是用來(lái)定義對(duì)象的唯一屬性名。由于每一個(gè)Symbol的值都是不相等的，所以Symbol作為對(duì)象的屬性名，可以保證屬性不重名。2.7.3對(duì)象varage=12;varname="Amy";varperson={age,name};//{age:12,name:"Amy"}以上寫(xiě)法等同于：varperson={age:age,name:name};方法名也可以簡(jiǎn)寫(xiě)。varperson={sayHi(){console.log("Hi");}}person.sayHi();//"Hi"ES6允許對(duì)象的屬性直接寫(xiě)變量，這時(shí)候?qū)傩悦亲兞棵?，屬性值是變量值。以上?xiě)法等同于：varperson={sayHi:function(){console.log("Hi");}}person.sayHi();//"Hi"2.7.4class類(lèi)例如，ES5中定義一個(gè)Person類(lèi)：functionPerson(name,age){//構(gòu)造函數(shù)=name;//定義一個(gè)屬性namethis.age=age;//定義一個(gè)屬性agethis.say=function(){//定義一個(gè)方法say()console.log("我的名字是"++"，+"今年"+this.age+"歲了");}}ES6中改用class定義Person類(lèi)如下：classPerson{//定義了一個(gè)名字為Person的類(lèi)

constructor(name,age){//constructor是一個(gè)構(gòu)造方法，用來(lái)接收參數(shù)=name;//this代表的是實(shí)例對(duì)象this.age=age;}say(){//這是一個(gè)類(lèi)的方法，注意不要加上functionreturn"我的名字叫"++"今年"+this.age+"歲了";}}varobj=newPerson("xmj",48);console.log(obj.say());//我的名字叫xmj今年48歲了ES6引入了class（類(lèi)）這個(gè)概念，通過(guò)class關(guān)鍵字可以定義類(lèi)。該關(guān)鍵字的出現(xiàn)使得其在對(duì)象寫(xiě)法上更加清晰，更像是一種面向?qū)ο蟮恼Z(yǔ)言。實(shí)際上class的本質(zhì)仍是function，它讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法。2.7.5模塊功能1．export命令下面是一個(gè)JS文件，里面使用export命令來(lái)暴露出變量、函數(shù)或類(lèi)（class）這些接口。//a.jsexportvarstr="export的內(nèi)容";exportvaryear=2019;exportfunctionmessage(sth){returnsth;}推薦使用下面方法在腳本尾部暴露出變量、函數(shù)或類(lèi)（class）這些接口。//a.jsvarstr="export的內(nèi)容";varyear=2019;functionmes