JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程（第2版）（微課版）第2章

JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第2章JavaScript核心語(yǔ)法基礎(chǔ)本章主要內(nèi)容：數(shù)據(jù)類(lèi)型變量運(yùn)算符和表達(dá)式流程控制語(yǔ)句2.1數(shù)據(jù)類(lèi)型和變量程序中最基礎(chǔ)的元素是數(shù)據(jù)和變量。數(shù)據(jù)類(lèi)型決定了程序如何存儲(chǔ)和處理數(shù)據(jù)，變量則是數(shù)據(jù)的“存儲(chǔ)倉(cāng)庫(kù)”。2.1.1數(shù)據(jù)類(lèi)型JavaScript數(shù)據(jù)類(lèi)型可分為兩類(lèi)：基本類(lèi)型和引用類(lèi)型。基本類(lèi)型也稱(chēng)原始數(shù)據(jù)類(lèi)型，包括：number（數(shù)值）string（字符串）boolean（布爾值）null（空值）undefined（未定義）symbol（符號(hào)）引用類(lèi)型也稱(chēng)復(fù)雜數(shù)據(jù)類(lèi)型，包括object(對(duì)象）和function（函數(shù)）。函數(shù)實(shí)質(zhì)上是對(duì)象的子類(lèi)型。1．?dāng)?shù)值常量在程序中直接使用的值稱(chēng)為字面量或常量。數(shù)值常量支持十進(jìn)制數(shù)、二進(jìn)制數(shù)、八進(jìn)制數(shù)和十六進(jìn)制等記數(shù)形式。十進(jìn)制：人們常用的記數(shù)進(jìn)制，使用0～9的數(shù)碼表示數(shù)值。二進(jìn)制：以0b開(kāi)頭，使用0、1表示數(shù)值，例如：0b110、0b1001。八進(jìn)制：以數(shù)字0或0o開(kāi)頭，使用0～7等數(shù)碼表示數(shù)值，例如05、0o10、017。十六進(jìn)制：以0x或0X開(kāi)頭，使用0～9、a～f、A～F等數(shù)碼表示數(shù)值，例如0x5、0x1F。在Edge瀏覽器控制臺(tái)中輸入各種進(jìn)制數(shù)據(jù)，輸出為對(duì)應(yīng)的十進(jìn)制數(shù)ES2020（即ECMAScript2020）為JavaScript定義了一種新的數(shù)值類(lèi)型bigint，用于表示64位整數(shù)。數(shù)值末尾的小寫(xiě)字母n表示這是一個(gè)bigint值。例如：10n、0b110n、0x1Fn。數(shù)值常量包含小數(shù)，例如2.25、1.7。如果整數(shù)部分為0，JavaScript允許省略小數(shù)點(diǎn)前面的0，如0.25可表示為.25。數(shù)值常量可用科學(xué)記數(shù)法表示，如1.25e-3、2.5E2。JavaScript的特殊數(shù)值Infinity：Infinity表示正無(wú)窮大，-Infinity表示負(fù)無(wú)窮大。在非零數(shù)值除以0時(shí)就會(huì)出現(xiàn)無(wú)窮大。當(dāng)一個(gè)正值超出JavaScript的表示范圍時(shí)，其結(jié)果就是正無(wú)窮大。NaN：意思為“非數(shù)字”——NotaNumber，表示數(shù)值運(yùn)算時(shí)出現(xiàn)了錯(cuò)誤或者未知結(jié)果。例如，0除以0的結(jié)果為NaN。Number.MAX_VALUE：最大數(shù)值。Number.MIN_VALUE：最小數(shù)值。Number.NaN：NaN。Number.POSITIVE_INFINITY：Infinity。Number.NEGATIVE_INFINITY：-Infinity。2．字符串常量JavaScript使用Unicode字符集。字符串常量指用英文的雙引號(hào)（"）或單引號(hào)（'）括起來(lái)的一串Unicode字符，如"Java"或'15246'。只能成對(duì)使用單引號(hào)或雙引號(hào)作為字符串定界符，不能使用一個(gè)單引號(hào)和一個(gè)雙引號(hào)。如果需要在字符串中包含單引號(hào)或雙引號(hào)，則應(yīng)用另一個(gè)作為字符串定界符或者使用轉(zhuǎn)義字符。例如，"Ilike'JavaScript'"。字符串中可以使用轉(zhuǎn)義字符，轉(zhuǎn)義字符以“\”開(kāi)始。例如，“\n”表示換行符，“\r”表示回車(chē)符。表2-1列出了JavaScript的轉(zhuǎn)義字符。3．布爾型常量布爾型常量只有兩個(gè)：true和false（注意必須小寫(xiě)）。4．nullnull在JavaScript中表示空值。5．undefined用var聲明一個(gè)變量后，其默認(rèn)值為undefined。var

adocument.write(a)

//輸出結(jié)果為undefined6．類(lèi)型測(cè)試typeof運(yùn)算符可測(cè)試數(shù)據(jù)的類(lèi)型。typeof(123)

//結(jié)果為number需要特別說(shuō)明的是：typeof(null)結(jié)果為object，正確的結(jié)果應(yīng)該是null。這是JavaScript由來(lái)已久的一個(gè)bug，修復(fù)這個(gè)bug可能會(huì)產(chǎn)生更多的bug，導(dǎo)致現(xiàn)有的很多Web系統(tǒng)無(wú)法使用。所以，JavaScript一直未修復(fù)這個(gè)bug。2.1.2數(shù)據(jù)類(lèi)型轉(zhuǎn)換JavaScript中的數(shù)據(jù)類(lèi)型轉(zhuǎn)換包括隱式類(lèi)型轉(zhuǎn)換和顯式類(lèi)型轉(zhuǎn)換。1．隱式類(lèi)型轉(zhuǎn)換當(dāng)JavaScript執(zhí)行代碼需要特定類(lèi)型的數(shù)據(jù)，而提供的不是該類(lèi)型的數(shù)據(jù)時(shí)，JavaScript就會(huì)根據(jù)需要轉(zhuǎn)換數(shù)據(jù)的類(lèi)型，這就是隱式類(lèi)型轉(zhuǎn)換。5

+

'x'

//結(jié)果為'5x'：數(shù)值5轉(zhuǎn)換為字符串5

-

'3'

//結(jié)果為2：字符串'3'轉(zhuǎn)換為數(shù)值true

+

'Abc'

//結(jié)果為'trueAbc'，布爾值true轉(zhuǎn)換為字符串2．顯式類(lèi)型轉(zhuǎn)換顯式類(lèi)型轉(zhuǎn)換指使用Number()、String()和Boolean()等函數(shù)轉(zhuǎn)換類(lèi)型。Number('2.5')

//轉(zhuǎn)化為數(shù)值，結(jié)果為2.5String(-5)

//轉(zhuǎn)換為字符串，結(jié)果為'-5'Boolean(-5)

//轉(zhuǎn)換為布爾值，結(jié)果為true2.1.3變量

1．變量聲明JavaScript要求變量在使用之前必須進(jìn)行聲明，可使用var、let和const聲明變量。var

a,blet

xconst

PI=3.14const聲明的變量可稱(chēng)為自定義常量，必須賦初始值，不能更改const所聲明變量的值。var聲明的全局變量是Window對(duì)象的一個(gè)屬性，let和const聲明的變量不是。變量和變量值之間為引用關(guān)系，變量引用變量值。const聲明的變量和變量值之間為常量引用，即不能改變這種引用關(guān)系；如果引用的是對(duì)象，對(duì)象本身是允許改變的。const

PI=3.14

//聲明PI引用常量3.14PI=3.14156

//錯(cuò)誤，試圖令PI引用另一個(gè)常量const

a=[1,2,3]

//聲明a引用數(shù)組[1,2,3]a[0]='abc'

//正確，修改數(shù)組的第一個(gè)元素值，數(shù)組變?yōu)閇'abc',

2,

3]，引用關(guān)系不變a=[2,3]

//錯(cuò)誤，試圖令a引用另一個(gè)數(shù)組可以在聲明的同時(shí)給變量賦值。var

a=100,b=200“=”表示賦值。一種特殊情況是直接給一個(gè)未聲明的變量賦值。ab

=

100此時(shí)，JavaScript會(huì)隱式地對(duì)變量ab進(jìn)行聲明。JavaScript允許重復(fù)聲明變量。var

a

=

100var

a

=

"abc"重復(fù)聲明時(shí)，如果沒(méi)有為變量賦值，則變量的值不變。var

a

=

100var

a

//a的值還是1002．變量的數(shù)據(jù)類(lèi)型JavaScript是一種弱類(lèi)型語(yǔ)言，即不強(qiáng)制規(guī)定變量的數(shù)據(jù)類(lèi)型。存入變量的數(shù)據(jù)決定其數(shù)據(jù)類(lèi)型?？梢越o一個(gè)變量賦不同類(lèi)型的值。3．變量的作用范圍作用范圍（也稱(chēng)作用域）是變量可使用的代碼區(qū)域，可分為全局作用域和局部作用域。根據(jù)作用范圍可將變量分為兩種：全局變量和局部變量。在JavaScript中，類(lèi)、函數(shù)體、if語(yǔ)句體、switch語(yǔ)句體、for和while循環(huán)的循環(huán)體等可稱(chēng)為代碼塊。粗略地講，代碼塊就是一對(duì)花括號(hào)“{}”內(nèi)的代碼。在代碼塊內(nèi)部使用let和const聲明的變量為局部變量，其作用范圍是當(dāng)前代碼塊——當(dāng)前代碼塊即為局部作用域。在所有代碼塊外部使用let和const聲明的變量為全局變量，其作用范圍是當(dāng)前文檔的所有代碼——當(dāng)前文檔為全局作用域。在函數(shù)體內(nèi)用var聲明的變量為局部變量，其作用范圍為當(dāng)前函數(shù)，可稱(chēng)其為函數(shù)作用域；在函數(shù)體外部（即使在一對(duì)花括號(hào)內(nèi)）用var聲明的變量為全局變量。如果一個(gè)局部變量和全局變量同名，則局部變量將屏蔽全局變量。給未聲明的變量賦值時(shí)，JavaScript默認(rèn)將其聲明為全局變量。即使變量在函數(shù)內(nèi)部使用，只要沒(méi)有聲明，JavaScript就會(huì)將其聲明為全局變量。2.2運(yùn)算符與表達(dá)式運(yùn)算符用于完成運(yùn)算，參與運(yùn)算的數(shù)據(jù)稱(chēng)為操作數(shù)。由操作數(shù)和運(yùn)算符組成的式子稱(chēng)為表達(dá)式。JavaScript中的運(yùn)算可分為算術(shù)運(yùn)算、字符串運(yùn)算、關(guān)系運(yùn)算、邏輯運(yùn)算、位運(yùn)算和賦值運(yùn)算等。2.2.1算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于執(zhí)行加法、減法、乘法、除法和求余等算術(shù)運(yùn)算。表2-3列出了JavaScript的算術(shù)運(yùn)算符。2.2.2字符串運(yùn)算符在JavaScript中，可使用加號(hào)（+）將兩個(gè)字符串連接成一個(gè)字符串。x="I

like

"

+

"JavaScript"

//x的值為"I

like

JavaScript"加號(hào)既可表示加法，也可表示字符串連接，所以在使用時(shí)應(yīng)注意。x=2+3+"abc"在上述語(yǔ)句中，按照從左到右的順序，先計(jì)算2+3（結(jié)果為5），再計(jì)算5+"abc"，結(jié)果為"5abc"。x="abc"+2+3在上述語(yǔ)句中，按照從左到右的順序，先計(jì)算"abc"+2（結(jié)果為"abc2"），再計(jì)算"abc2"+3，結(jié)果為"abc23"。所以，當(dāng)加號(hào)兩側(cè)都是數(shù)值時(shí)執(zhí)行算術(shù)加法運(yùn)算；如果有一個(gè)操作數(shù)為字符串，加號(hào)執(zhí)行字符串連接。2.2.3關(guān)系運(yùn)算符關(guān)系運(yùn)算符用于比較操作數(shù)的大小關(guān)系，運(yùn)算結(jié)果為布爾值true或false。由算術(shù)運(yùn)算符和關(guān)系運(yùn)算符（至少包含關(guān)系運(yùn)算符）構(gòu)成的表達(dá)式稱(chēng)為關(guān)系表達(dá)式。相等運(yùn)算符用于判斷兩個(gè)表達(dá)式的值是否相等。例如，3==5結(jié)果為false。一種特殊情況是，數(shù)字字符串和對(duì)應(yīng)數(shù)值會(huì)被認(rèn)為相等。例如，"5"==5結(jié)果為true。如果使用絕對(duì)相等運(yùn)算符，只有在兩個(gè)數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值都相同時(shí)結(jié)果才為true。例如，"5"=

=

=5結(jié)果為false。關(guān)系運(yùn)算符也可用于字符串比較。當(dāng)兩個(gè)字符串進(jìn)行比較時(shí)，JavaScript首先比較兩個(gè)字符串的第1個(gè)字符的Unicode編碼。若Unicode編碼相同，則繼續(xù)比較下一個(gè)字符，否則根據(jù)Unicode編碼大小得出兩個(gè)字符串的大小關(guān)系。若兩個(gè)字符串的字符完全相同，則兩個(gè)字符串相等。若一個(gè)字符串中的字符已經(jīng)比較完，則另一個(gè)還有未比較字符的字符串更大。2.2.4邏輯運(yùn)算符邏輯運(yùn)算符用于對(duì)布爾型值執(zhí)行邏輯運(yùn)算。2.2.5位運(yùn)算符位運(yùn)算符用于對(duì)操作數(shù)按二進(jìn)制執(zhí)行位運(yùn)算。2.2.6賦值運(yùn)算符“=”是JavaScript的賦值運(yùn)算符，用于將其右側(cè)表達(dá)式的值賦給左側(cè)的變量。x=5;y=x*x+2;賦值運(yùn)算符可以和其他的各種運(yùn)算符組成復(fù)合賦值運(yùn)算符，例如*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、|=和^=等。復(fù)合賦值運(yùn)算符首先計(jì)算變量和右側(cè)表達(dá)式，然后將結(jié)果賦給變量。x+=5;

//等價(jià)于x=x+5賦值運(yùn)算表達(dá)式可出現(xiàn)在表達(dá)式的任何位置。x=(y=5)+3;

//等價(jià)于y=5;x=y+3;2.2.7特殊運(yùn)算符JavaScript還提供了一些特殊的運(yùn)算符，包括:條件運(yùn)算符逗號(hào)運(yùn)算符數(shù)據(jù)類(lèi)型運(yùn)算符new運(yùn)算符1．條件運(yùn)算符條件運(yùn)算符基本格式如下。表達(dá)式1

?

表達(dá)式2

:

表達(dá)式3若表達(dá)式1的值為true，則條件運(yùn)算結(jié)果為表達(dá)式2的值，否則為表達(dá)式3的值。例如，下面的代碼輸出兩個(gè)數(shù)中較大的值。var

a

=2,

b

=

3,

cc

=

a

>

b

?

a

:

bdocument.write(c)

//輸出32．逗號(hào)運(yùn)算符利用逗號(hào)可以將多個(gè)表達(dá)式放到一起，其中最后一個(gè)表達(dá)式的值為整個(gè)表達(dá)式的值。c

=

(a

=

5,

b

=

6,

a

+

b)document.write(c)

//輸出113．?dāng)?shù)據(jù)類(lèi)型運(yùn)算符typeof運(yùn)算符可返回操作數(shù)的數(shù)據(jù)類(lèi)型，其基本格式如下。typeof

操作數(shù)typeof(操作數(shù))例如，返回變量a的數(shù)據(jù)類(lèi)型。a

=

100document.write(typeof

a)

//輸出number4．new運(yùn)算符new用于創(chuàng)建對(duì)象實(shí)例。a

=

new

Array()

//創(chuàng)建一個(gè)數(shù)組對(duì)象2.2.8運(yùn)算符的優(yōu)先級(jí)例如，表達(dá)式x%4==0&&x%100!=0||x%400==0（當(dāng)x值為700時(shí)）按從左到右的順序進(jìn)行計(jì)算，過(guò)程如下。（1）%優(yōu)先級(jí)高于==，所以先計(jì)算x%4，結(jié)果為0。表達(dá)式變?yōu)?==0&&x%100!=0||x%400==0。（2）==優(yōu)先級(jí)高于&&，所以先計(jì)算0==0，結(jié)果為true。表達(dá)式變?yōu)閠rue&&x%100!=0||x%400==0。（3）&&、%和!=中，%優(yōu)先級(jí)最高，所以先計(jì)算x%100，結(jié)果為0。表達(dá)式變?yōu)閠rue&&0!=0||x%400==0。（4）&&、!=和||中，!=優(yōu)先級(jí)最高，所以先計(jì)算0!=0，結(jié)果為false。表達(dá)式變?yōu)閠rue&&false||x%400==0。（5）&&比||優(yōu)先級(jí)高，所以先計(jì)算true&&false，結(jié)果為false。表達(dá)式變?yōu)閒alse||x%400==0。（6）||、%和==中，%優(yōu)先級(jí)最高，所以先計(jì)算x%400，結(jié)果為300。表達(dá)式變?yōu)閒alse||300==0。（7）||比==優(yōu)先級(jí)低，所以先計(jì)算300==0，結(jié)果為false。表達(dá)式變?yōu)閒alse||false。（8）計(jì)算false||false，結(jié)果為false。2.2.9表達(dá)式中的數(shù)據(jù)類(lèi)型轉(zhuǎn)換運(yùn)算符要求操作數(shù)具有相應(yīng)的數(shù)據(jù)類(lèi)型。算術(shù)運(yùn)算符要求操作數(shù)都是數(shù)值類(lèi)型字符串運(yùn)算符要求操作數(shù)都是字符串邏輯運(yùn)算符要求操作數(shù)都是邏輯值。JavaScript在計(jì)算表達(dá)式時(shí)，會(huì)根據(jù)運(yùn)算符自動(dòng)轉(zhuǎn)換不匹配的數(shù)據(jù)類(lèi)型。JavaScript的常見(jiàn)類(lèi)型轉(zhuǎn)換如表2-2所示。2.3流程控制語(yǔ)句JavaScript流程控制語(yǔ)句包括:if語(yǔ)句switch語(yǔ)句for循環(huán)while循環(huán)do/while循環(huán)continue語(yǔ)句和break語(yǔ)句2.3.1if語(yǔ)句if語(yǔ)句用于實(shí)現(xiàn)分支結(jié)構(gòu)，根據(jù)條件成立與否，執(zhí)行不同的代碼塊。if語(yǔ)句有3種格式。1．if語(yǔ)句格式一1．格式一if(條件表達(dá)式){

代碼塊}如果條件表達(dá)式計(jì)算結(jié)果為true，則執(zhí)行花括號(hào)中的代碼塊，否則跳過(guò)if語(yǔ)句，執(zhí)行后續(xù)代碼。如果代碼塊中只有一條語(yǔ)句，可省略花括號(hào)。if

(x%2==0)

document.write(x+"是偶數(shù)");2．if語(yǔ)句格式二if(條件表達(dá)式){

代碼塊1}else{

代碼塊2}如果條件表達(dá)式計(jì)算結(jié)果為true，則執(zhí)行代碼塊1中的語(yǔ)句，否則執(zhí)行代碼塊2中的語(yǔ)句。if(x%2==0)

document.write(x+"是偶數(shù)");else

document.write(x+"是奇數(shù)");3．if語(yǔ)句格式三if(條件1){

代碼塊1}else

if(條件2)

{

代碼塊2}…else

if(條件n)

{

代碼塊n}

else

{

代碼塊n+1}JavaScript依次判斷各個(gè)條件，只有在前一個(gè)條件表達(dá)式計(jì)算結(jié)果為false時(shí)，才計(jì)算下一個(gè)條件。當(dāng)某個(gè)條件表達(dá)式計(jì)算結(jié)果為true時(shí)，執(zhí)行對(duì)應(yīng)的代碼塊。對(duì)應(yīng)代碼塊中的語(yǔ)句執(zhí)行完后，if語(yǔ)句結(jié)束。只有在所有條件表達(dá)式的計(jì)算結(jié)果均為false時(shí)，才會(huì)執(zhí)行else部分的代碼塊。else部分可以省略。if(x<60)

document.write(x+"分，不及格！");else

if(x<70)

document.write(x+"分，及格！");else

if(x<90)

document.write(x+"分，中等！");else

document.write(x+"分，優(yōu)秀！");2.3.2switch語(yǔ)句

switch語(yǔ)句用于實(shí)現(xiàn)多分支結(jié)構(gòu)，其基本格式如下。switch(n){

case

標(biāo)號(hào)1:

代碼塊1

break;...

case

標(biāo)號(hào)n:

代碼塊n

break;default:

代碼塊n+1}每個(gè)case關(guān)鍵字定義一個(gè)標(biāo)號(hào)，標(biāo)號(hào)不區(qū)分大小。default部分可以省略。switch語(yǔ)句執(zhí)行時(shí)，首先計(jì)算n的值，然后依次測(cè)試case標(biāo)號(hào)是否與n值匹配，如果匹配則執(zhí)行對(duì)應(yīng)的代碼塊中的語(yǔ)句，否則測(cè)試下一個(gè)case標(biāo)號(hào)是否匹配。如果所有標(biāo)號(hào)均不匹配，則執(zhí)行default部分的代碼塊（如果有的話）。每個(gè)case塊末尾的break用于跳出switch語(yǔ)句。break不是必需的。如果沒(méi)有break，JavaScript會(huì)在該case塊中的語(yǔ)句執(zhí)行結(jié)束后，繼續(xù)執(zhí)行后面的case塊，直到遇到break或switch語(yǔ)句結(jié)束。switch語(yǔ)句的case標(biāo)號(hào)除了可以用數(shù)值外，也可使用字符串。2.3.3for循環(huán)for循環(huán)基本語(yǔ)法格式如下。for(初始化;條件;增量){

循環(huán)體}for循環(huán)執(zhí)行步驟如下。（1）執(zhí)行初始化。（2）計(jì)算條件，若結(jié)果為true，則執(zhí)行第（3）步，否則結(jié)束循環(huán)。（3）執(zhí)行循環(huán)體。（4）執(zhí)行增量操作，轉(zhuǎn)到第（2）步。初始化操作可以放在for循環(huán)前面完成，增量部分可放在循環(huán)體內(nèi)完成。條件表達(dá)式應(yīng)有計(jì)算結(jié)果為false的機(jī)會(huì)，否則會(huì)構(gòu)成“死循環(huán)”?！纠?-16】使用for循環(huán)計(jì)算1+2+3+…+1002.3.4while循