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

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第3章

數(shù)組和函數(shù)本章主要內(nèi)容：數(shù)組函數(shù)內(nèi)置函數(shù)3.1數(shù)組數(shù)組是一組相關(guān)數(shù)據(jù)的有序集合，其中的數(shù)據(jù)項被稱為數(shù)組元素。數(shù)組元素在數(shù)組中的位置稱為索引或者下標(biāo)，索引最小值為0。數(shù)組元素用數(shù)組名和下標(biāo)來表示，例如，假設(shè)a數(shù)組中有3個數(shù)組元素，這3個元素可表示為a[0]、a[1]和a[2]。JavaScript是弱類型的，所以數(shù)組中的各個數(shù)組元素可存放不同類型的數(shù)據(jù)，甚至可以是對象或數(shù)組。JavaScript不支持多維數(shù)組，但可通過在數(shù)組元素中保存數(shù)組來模擬多維數(shù)組。JavaScript的數(shù)組本質(zhì)上也是一種對象，數(shù)組的類型為object。3.1.1創(chuàng)建數(shù)組可用下面的幾種方式創(chuàng)建數(shù)組。使用數(shù)組常量。使用...擴(kuò)展操作符。使用Array()函數(shù)。使用Array.of()方法。使用Array.from()方法。1．使用數(shù)組常量創(chuàng)建數(shù)組數(shù)組常量是用“[”和“]”符號括起來的一組數(shù)據(jù)，用逗號分隔?？蓪?shù)組常量賦給變量。var

a

=

[]

//創(chuàng)建一個空數(shù)組var

b

=

[

1

,

2

,

3

]

//b[0]=1、b[1]=2、b[2]=3var

c

=

[

"abc"

,

true

,

100

]

//c[0]="abc"、c[1]=true、c[2]=100數(shù)組元素也可以是數(shù)組。var

a

=

[

[

1

,

2

]

,

[

3

,

4

,

5

]

]

//a[0][0]=1、a[0][1]=2、a[1][0]=3、a[1][1]=4、a[1][2]=52．使用...擴(kuò)展操作符創(chuàng)建數(shù)組...擴(kuò)展操作符將可迭代對象解析為數(shù)組元素。var

a

=

[

1

,

2

,

3

]

var

b

=

["a"

,

...a

,

"b"]

//b=["a"

,

1

,

2

,

3

,

"b"]var

b

=

[..."abc"]

//b=["a"

,

"b"

,

"c"]3．使用Array()函數(shù)創(chuàng)建數(shù)組Array()函數(shù)是數(shù)組對象的構(gòu)造函數(shù)，可用它來創(chuàng)建數(shù)組。不提供參數(shù)時，Array()函數(shù)創(chuàng)建一個空數(shù)組（空數(shù)組長度為0）。var

a=new

Array()

//創(chuàng)建一個空數(shù)組參數(shù)為一個數(shù)值時，Array()函數(shù)將其作為數(shù)組長度來創(chuàng)建指定長度的數(shù)組。var

a=new

Array(5)

//創(chuàng)建有5個元素的數(shù)組，元素初始值為undefined參數(shù)為多個值時，Array()函數(shù)將這些值作為數(shù)組元素來創(chuàng)建數(shù)組。var

b=new

Array(1,true,"abc")

//b[0]=1、b[1]=true、b[2]=

"abc"4．使用Array.of()方法創(chuàng)建數(shù)組Array.of()方法將參數(shù)作為數(shù)組元素來創(chuàng)建數(shù)組。var

a

=

Array.of(

)

//創(chuàng)建一個空數(shù)組var

b

=

Array.of(

5

)

//創(chuàng)建數(shù)組為[5]var

c

=

Array.of(

1

,

2

,

3

)

//c

=

[

1

,

2

,

3

]5．使用Array.from()方法創(chuàng)建數(shù)組Array.from()方法使用可迭代對象或者類數(shù)組對象來創(chuàng)建數(shù)組。var

a

=

Array.from(

[

1

,

2

,

3

]

)

//復(fù)制數(shù)組，a

=

[

1

,

2

,

3

]var

b

=

Array.from("abc")

//b=["a"

,

"b"

,

"c"]3.1.2使用數(shù)組1．使用數(shù)組元素數(shù)組元素通過數(shù)組名和下標(biāo)進(jìn)行引用。一個數(shù)組元素等同于一個變量，可以為數(shù)組元素賦值，或?qū)⑵溆糜诟鞣N運算。var

a

=

new

Array(3)

//創(chuàng)建數(shù)組a[0]

=

1

//為數(shù)組元素賦值a[1]

=

2a[2]

=

a[1]

+

a[0]

//將數(shù)組元素用于計算在將數(shù)組用于字符串操作時，JavaScript會調(diào)用數(shù)組對象的toString()方法將其轉(zhuǎn)為字符串。JavaScript的大多數(shù)內(nèi)置對象均有toString()方法，用于將對象轉(zhuǎn)換為字符串。2．使用多維數(shù)組JavaScript沒有多維數(shù)組的概念，但可在數(shù)組元素中保存數(shù)組，從而實現(xiàn)多維數(shù)組。var

a

=

new

Array(3)

a[0]

=

1

a[1]

=

new

Array(1,2)

//將數(shù)組存入數(shù)組元素a[2]

=

new

Array('ab',

'cd',

'ef')3．?dāng)?shù)組下標(biāo)范圍在JavaScript中，數(shù)組下標(biāo)最小值為0，最大值為數(shù)組長度減1。JavaScript沒有數(shù)組下標(biāo)超出范圍的概念。當(dāng)使用了超出范圍的下標(biāo)時，JavaScript不會報錯，引用的數(shù)組元素相當(dāng)于未聲明的變量，其值為undefined。對超出范圍的下標(biāo)引用的數(shù)組元素賦值時，會為數(shù)組添加數(shù)組元素。4．使用數(shù)組賦值JavaScript允許將數(shù)組賦給變量。將引用數(shù)組的變量賦給另一個變量時，使得兩個變量引用同一個數(shù)組。將另一個數(shù)組賦給變量意味著改變了變量的引用，使其引用新的數(shù)組。5．添加、刪除數(shù)組元素JavaScript中的數(shù)組長度是不固定的，對不存在的數(shù)組元素賦值時，會將其添加到數(shù)組中。var

a

=

new

Array()

//創(chuàng)建一個空數(shù)組a[0]

=

1

//添加數(shù)組元素a[1]

=

2delete關(guān)鍵字可用于刪除數(shù)組元素。delete

a[1]

//刪除a[1]需注意的是，delete的實質(zhì)是刪除變量所引用的內(nèi)存單元。使用delete刪除一個數(shù)組元素后，數(shù)組的大小不會改變。引用一個被刪除的數(shù)組元素，得到的值為undefined。6．?dāng)?shù)組迭代數(shù)組通常結(jié)合循環(huán)實現(xiàn)數(shù)組迭代（或者叫數(shù)組元素遍歷）。數(shù)組下標(biāo)最小值為0，最大值為數(shù)組長度減1對數(shù)組a用for循環(huán)“for(vari=0;i<a.length;i++)”即可實現(xiàn)數(shù)組迭代。如果數(shù)組元素已經(jīng)使用delete刪除，或者通過賦值語句給一個下標(biāo)較大的不存在的數(shù)組元素賦值，就會導(dǎo)致數(shù)組包含一些不存在的元素。使用for/in循環(huán)可忽略不存在的元素。3.1.3數(shù)組的屬性1．length屬性數(shù)組的length屬性用于獲得數(shù)組長度，例如，a.length獲得數(shù)組a的長度。JavaScript數(shù)組的長度是可變的，通過為不存在的數(shù)組元素賦值的方式添加數(shù)組元素時，數(shù)組的長度也隨之變化。var

a

=

new

Array(1,

2,

3)

//創(chuàng)建數(shù)組，數(shù)組長度為3a[5]

=

10

//添加一個數(shù)組元素，數(shù)組長度變?yōu)?數(shù)組長度為數(shù)組中元素的個數(shù)。因為數(shù)組元素下標(biāo)從0開始，所以數(shù)組下標(biāo)范圍為0到數(shù)組長度減1。JavaScript允許修改length屬性。a.length=5上面的語句將數(shù)組a的長度修改為5。如果修改后的長度小于原來長度，超出新長度的數(shù)組元素將丟失。如果新長度超出原長度，增加的數(shù)組元素初始值為undefined。2．prototype屬性對象的prototype屬性用于為對象添加自定義的屬性或方法。為數(shù)組添加自定義屬性或方法的基本語法格式如下。A

=

value其中，name為自定義的屬性或方法名稱，value為表達(dá)式或者函數(shù)。自定義屬性和方法對當(dāng)前HTML文檔中的所有數(shù)組有效。3.1.4操作數(shù)組的方法1．連接數(shù)組join()方法用于將數(shù)組中的所有元素連接成一個字符串，字符串中的各個數(shù)據(jù)默認(rèn)用逗號分隔。也可為join()方法指定一個字符串作為分隔符?；菊Z法格式為如下。a.join()

//將數(shù)組a中的數(shù)據(jù)連接成逗號分隔的字符串a(chǎn).join(x)

//將數(shù)組a中的數(shù)據(jù)連接成變量x中的字符串分隔的字符串2．逆轉(zhuǎn)元素順序reverse()方法將數(shù)組元素以相反的順序存放?；菊Z法格式如下。a.reverse()3．?dāng)?shù)組排序sort()方法用于對數(shù)組排序。默認(rèn)情況下，數(shù)組元素按字母順序排列，數(shù)值會轉(zhuǎn)換為字符串進(jìn)行排序。如果要對數(shù)字?jǐn)?shù)組進(jìn)行排序，可以為sort()方法提供一個排序函數(shù)作為參數(shù)，排序函數(shù)定義數(shù)組中兩個相鄰元素的相對順序。排序函數(shù)有兩個參數(shù)，假設(shè)為x和y。若需x排在y之前，則排序函數(shù)應(yīng)返回一個小于0的值。若需x排在y之后，則排序函數(shù)應(yīng)返回一個大于0的值。若兩個參數(shù)的位置無關(guān)緊要，排序函數(shù)返回0。使用排序函數(shù)時，sort方法將兩個數(shù)組元素作為排序函數(shù)的參數(shù)，根據(jù)排序函數(shù)的返回值決定數(shù)組元素的先后順序。4．取子數(shù)組

slice()方法用于從數(shù)組中取子數(shù)組，其基本語法格式如下。數(shù)組名.slice(x,y)從數(shù)組中返回下標(biāo)范圍為x～y-1的子數(shù)組。如果省略y，則返回從x開始到最后的全部數(shù)組元素。如果x或y為負(fù)數(shù)，則作為最后一個元素的相對位置，如-1為倒數(shù)第1個元素位置。5．splice()方法splice()方法用于添加或刪除數(shù)組元素，其基本語法格式如下。數(shù)組名.splice(m,n,x1,x2,...)其中，m為開始元素下標(biāo)，n為從數(shù)組中刪除的元素個數(shù)。x1、x2等是要添加到數(shù)組中的數(shù)據(jù)，可以省略。splice()方法同時會返回刪除的數(shù)組元素。6．push()和pop()方法push()和pop()方法用于實現(xiàn)數(shù)組的堆棧操作（先進(jìn)后出）。push()方法將數(shù)據(jù)添加到數(shù)組末尾，返回數(shù)組長度。pop()方法返回數(shù)組中的最后一個元素，數(shù)組長度減1。7．unshift()和shift()方法unshift()和shift()方法用于實現(xiàn)數(shù)組的隊列操作（先進(jìn)先出）。unshift()方法將數(shù)據(jù)添加到數(shù)組開頭，并返回新的數(shù)組長度。shift()方法返回數(shù)組中的第一個元素，所有數(shù)組元素依次前移一位，數(shù)組長度減1。8．concat()方法concat()方法用于將提供的數(shù)據(jù)合并成一個新的數(shù)組，其基本語法格式如下。b

=

a.concat(x1,x2,x3,…)其中，x1、x2、x3等是單個的數(shù)據(jù)或者數(shù)組變量。如果是數(shù)組變量，則將其中的數(shù)據(jù)合并到新數(shù)組中。變量b保存合并后的新數(shù)組。3.2函數(shù)當(dāng)某一段代碼需要重復(fù)使用，或者需要對批量數(shù)據(jù)執(zhí)行相同操作時，就可使用函數(shù)來完成。3.2.1定義函數(shù)1．使用function關(guān)鍵字定義函數(shù)用function關(guān)鍵字定義函數(shù)的基本語法格式如下。function

函數(shù)名([參數(shù)1

,

參數(shù)2

,

...]){

代碼塊

[return

返回值]}在當(dāng)前作用域內(nèi)，函數(shù)名應(yīng)該是唯一的。函數(shù)參數(shù)是可選的，多個參數(shù)之間用逗號分隔?；ɡㄌ栔械拇a塊稱為函數(shù)體。在函數(shù)體中或在函數(shù)末尾，可使用return語句指定函數(shù)返回值。返回值可以是任意的常量、變量或者表達(dá)式。沒有return語句時，函數(shù)沒有返回值。例如，下面的函數(shù)用于計算兩個數(shù)的和。function

sum(a,

b)

{

return

a

+

b}2．在表達(dá)式中定義函數(shù)JavaScript允許在表達(dá)式中定義函數(shù)。在表達(dá)式中定義求和函數(shù)如下。var

sum2

=

function

(a,

b)

{

return

a

+

b}這里的function關(guān)鍵字定義了一個匿名函數(shù)（也可稱未命名函數(shù)），JavaScript將其賦值給變量sum2。通過sum2可調(diào)用對應(yīng)的匿名函數(shù)。3．使用Function()構(gòu)造函數(shù)在JavaScript中，函數(shù)也是一種對象。函數(shù)對象的構(gòu)造函數(shù)為Function()，可用它來定義函數(shù)，其基本語法格式如下。var

變量

=

new

Function(

"參數(shù)1"

,

"參數(shù)2"

,……,

"函數(shù)體")例如，下面為用構(gòu)造函數(shù)定義求和函數(shù)。var

sum3

=

new

Function("a"

,

"b"

,

"return

a+b")4．箭頭函數(shù)JavaScript允許使用箭頭“=>”來定義函數(shù)表達(dá)式——箭頭函數(shù)。箭頭左側(cè)為參數(shù)，右側(cè)為函數(shù)體。var

sum

=

(x,

y)

=>

{

return

x

+

y

}

//定義函數(shù)sum(2,

5)

//函數(shù)返回值為7箭頭函數(shù)的函數(shù)體通常為一個return語句。如果要返回對象常量，可將對象常量放在return語句或者一對圓括號中。var

fruit

=

(x,

y)

=>

{

return

{

type:

x,

price:

y

}

}

//返回對象常量，標(biāo)準(zhǔn)定義var

fruit2

=

(x,

y)

=>

({

type:

x,

price:

y

})

//返回對象常量，簡略定義a

=

fruit('apple',

5)

//a={

type:

'apple',

price:

5

}b

=

fruit2('pear',

4)

//b={

type:

'pear',

price:

4

}在上述4種方法定義的函數(shù)中，箭頭函數(shù)沒有prototype屬性，所以箭頭函數(shù)不能作為類的構(gòu)造函數(shù)使用。3.2.2調(diào)用函數(shù)函數(shù)調(diào)用的基本語法格式如下。函數(shù)名(參數(shù))函數(shù)名是function關(guān)鍵字定義的函數(shù)名稱，或者是引用函數(shù)對象的變量名稱。使用function關(guān)鍵字定義函數(shù)時，函數(shù)定義可以放在當(dāng)前HTML文檔中的任意位置，即允許函數(shù)的調(diào)用出現(xiàn)在函數(shù)定義之前。使用Function()構(gòu)造函數(shù)定義函數(shù)時，只能在定義之后通過變量名來調(diào)用函數(shù)。函數(shù)可以在腳本中調(diào)用，也可以作為HTML的事件處理程序或URL。3.2.3帶參數(shù)的函數(shù)定義函數(shù)時指定的參數(shù)稱為形式參數(shù)，簡稱形參。調(diào)用函數(shù)時指定的參數(shù)稱為實際參數(shù)，簡稱實參。在調(diào)用函數(shù)時，實參按先后順序一一對應(yīng)地傳遞給形參。JavaScript是弱類型的，形參不需要指定數(shù)據(jù)類型。JavaScript不會檢查形參和實參的數(shù)據(jù)類型，也不會檢查形參和實參的個數(shù)。1．函數(shù)參數(shù)的個數(shù)函數(shù)的length屬性返回形參的個數(shù)。在函數(shù)內(nèi)部，arguments數(shù)組保存調(diào)用函數(shù)時傳遞的實參。

function

getMax(a,

b)

{

var

max

=

Number.MIN_VALUE

var

len

=

arguments.length

//獲得實際參數(shù)個數(shù)2．使用數(shù)組作為參數(shù)在使用表達(dá)式作為實參時，形參接收實參的值，所以形參值的改變不會影響到實參。在使用數(shù)組作為實參時，形參接收的是數(shù)組的引用，即形參和實參引用了同一個數(shù)組。這種情況下，通過形參改變數(shù)組元素的值后，在函數(shù)外通過實參獲得的也是改變后的數(shù)組元素值。3．使用對象作為參數(shù)對象也可作為函數(shù)參數(shù)。與數(shù)組類似，形參和實參引用的是同一個對象。如果在函數(shù)中通過形參修改了對象屬性值，通過實參獲得的也是修改后的對象屬性值。3.2.4嵌套函數(shù)在函數(shù)內(nèi)部定義的函數(shù)稱為嵌套函數(shù)，嵌套函數(shù)只能在當(dāng)前函數(shù)內(nèi)部使用。function

addArray(a,

b)

{

function

getMax(x,

y)

{

return

x

>

y

?

0

:

1

}

//返回長度較大的數(shù)組的序號

var

alen

=

a.length

var

blen

=

b.length……3.2.5遞歸函數(shù)遞歸函數(shù)是指在函數(shù)的內(nèi)部調(diào)用函數(shù)自身，形成遞歸調(diào)用。使用遞歸函數(shù)必須注意遞歸調(diào)用的結(jié)束條件，若遞歸調(diào)用無法停止，則會導(dǎo)致運行腳本的瀏覽器崩潰。function

fact(n)

{

//計算階乘

if

(n

<=

1)

return

1

//遞歸調(diào)用結(jié)束

return

n

*

fact(n

-

1)

}3.3內(nèi)置函數(shù)1．a(chǎn)lert()函數(shù)alert()函數(shù)用于顯示警告對話框，對話框包括一個“確定”按鈕。2．confirm()函數(shù)confirm()函數(shù)用于顯示確認(rèn)對話框，對話框包括“確定”和“取消”按鈕。單擊“確定”按鈕可關(guān)閉對話框，函數(shù)返回值為true。使用其他方式關(guān)閉對話框時，函數(shù)返回值為false。3．prompt()函數(shù)prompt()函數(shù)用于顯示輸入對話框。函數(shù)的第1個參數(shù)為提示字符串，第2個參數(shù)會顯示在輸入框中。輸入數(shù)據(jù)后，單擊“確定”按鈕，函數(shù)返回值為輸入的數(shù)據(jù)。使用其他方式關(guān)閉對話框時，函數(shù)返回值為nu