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ù)項(xiàng)被稱為數(shù)組元素。數(shù)組元素在數(shù)組中的位置稱為索引或者下標(biāo)，索引最小值為0。數(shù)組元素用數(shù)組名和下標(biāo)來表示，例如，假設(shè)a數(shù)組中有3個(gè)數(shù)組元素，這3個(gè)元素可表示為a[0]、a[1]和a[2]。JavaScript是弱類型的，所以數(shù)組中的各個(gè)數(shù)組元素可存放不同類型的數(shù)據(jù)，甚至可以是對(duì)象或數(shù)組。JavaScript不支持多維數(shù)組，但可通過在數(shù)組元素中保存數(shù)組來模擬多維數(shù)組。JavaScript的數(shù)組本質(zhì)上也是一種對(duì)象，數(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ù)組常量是用“[”和“]”符號(hào)括起來的一組數(shù)據(jù)，用逗號(hào)分隔?？蓪?shù)組常量賦給變量。var

a

=

[]

//創(chuàng)建一個(gè)空數(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ò)展操作符將可迭代對(duì)象解析為數(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ù)組對(duì)象的構(gòu)造函數(shù)，可用它來創(chuàng)建數(shù)組。不提供參數(shù)時(shí)，Array()函數(shù)創(chuàng)建一個(gè)空數(shù)組（空數(shù)組長(zhǎng)度為0）。var

a=new

Array()

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

a=new

Array(5)

//創(chuàng)建有5個(gè)元素的數(shù)組，元素初始值為undefined參數(shù)為多個(gè)值時(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)建一個(gè)空數(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()方法使用可迭代對(duì)象或者類數(shù)組對(duì)象來創(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ù)組元素?cái)?shù)組元素通過數(shù)組名和下標(biāo)進(jìn)行引用。一個(gè)數(shù)組元素等同于一個(gè)變量，可以為數(shù)組元素賦值，或?qū)⑵溆糜诟鞣N運(yùn)算。var

a

=

new

Array(3)

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

=

1

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

=

2a[2]

=

a[1]

+

a[0]

//將數(shù)組元素用于計(jì)算在將數(shù)組用于字符串操作時(shí)，JavaScript會(huì)調(diào)用數(shù)組對(duì)象的toString()方法將其轉(zhuǎn)為字符串。JavaScript的大多數(shù)內(nèi)置對(duì)象均有toString()方法，用于將對(duì)象轉(zhuǎn)換為字符串。2．使用多維數(shù)組JavaScript沒有多維數(shù)組的概念，但可在數(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ù)組長(zhǎng)度減1。JavaScript沒有數(shù)組下標(biāo)超出范圍的概念。當(dāng)使用了超出范圍的下標(biāo)時(shí)，JavaScript不會(huì)報(bào)錯(cuò)，引用的數(shù)組元素相當(dāng)于未聲明的變量，其值為undefined。對(duì)超出范圍的下標(biāo)引用的數(shù)組元素賦值時(shí)，會(huì)為數(shù)組添加數(shù)組元素。4．使用數(shù)組賦值JavaScript允許將數(shù)組賦給變量。將引用數(shù)組的變量賦給另一個(gè)變量時(shí)，使得兩個(gè)變量引用同一個(gè)數(shù)組。將另一個(gè)數(shù)組賦給變量意味著改變了變量的引用，使其引用新的數(shù)組。5．添加、刪除數(shù)組元素JavaScript中的數(shù)組長(zhǎng)度是不固定的，對(duì)不存在的數(shù)組元素賦值時(shí)，會(huì)將其添加到數(shù)組中。var

a

=

new

Array()

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

=

1

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

=

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

a[1]

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

a

=

new

Array(1,

2,

3)

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

=

10

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

=

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

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

//將數(shù)組a中的數(shù)據(jù)連接成變量x中的字符串分隔的字符串2．逆轉(zhuǎn)元素順序reverse()方法將數(shù)組元素以相反的順序存放?；菊Z法格式如下。a.reverse()3．?dāng)?shù)組排序sort()方法用于對(duì)數(shù)組排序。默認(rèn)情況下，數(shù)組元素按字母順序排列，數(shù)值會(huì)轉(zhuǎn)換為字符串進(jìn)行排序。如果要對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序，可以為sort()方法提供一個(gè)排序函數(shù)作為參數(shù)，排序函數(shù)定義數(shù)組中兩個(gè)相鄰元素的相對(duì)順序。排序函數(shù)有兩個(gè)參數(shù)，假設(shè)為x和y。若需x排在y之前，則排序函數(shù)應(yīng)返回一個(gè)小于0的值。若需x排在y之后，則排序函數(shù)應(yīng)返回一個(gè)大于0的值。若兩個(gè)參數(shù)的位置無關(guān)緊要，排序函數(shù)返回0。使用排序函數(shù)時(shí)，sort方法將兩個(gè)數(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ù)，則作為最后一個(gè)元素的相對(duì)位置，如-1為倒數(shù)第1個(gè)元素位置。5．splice()方法splice()方法用于添加或刪除數(shù)組元素，其基本語法格式如下。數(shù)組名.splice(m,n,x1,x2,...)其中，m為開始元素下標(biāo)，n為從數(shù)組中刪除的元素個(gè)數(shù)。x1、x2等是要添加到數(shù)組中的數(shù)據(jù)，可以省略。splice()方法同時(shí)會(huì)返回刪除的數(shù)組元素。6．push()和pop()方法push()和pop()方法用于實(shí)現(xiàn)數(shù)組的堆棧操作（先進(jìn)后出）。push()方法將數(shù)據(jù)添加到數(shù)組末尾，返回?cái)?shù)組長(zhǎng)度。pop()方法返回?cái)?shù)組中的最后一個(gè)元素，數(shù)組長(zhǎng)度減1。7．unshift()和shift()方法unshift()和shift()方法用于實(shí)現(xiàn)數(shù)組的隊(duì)列操作（先進(jìn)先出）。unshift()方法將數(shù)據(jù)添加到數(shù)組開頭，并返回新的數(shù)組長(zhǎng)度。shift()方法返回?cái)?shù)組中的第一個(gè)元素，所有數(shù)組元素依次前移一位，數(shù)組長(zhǎng)度減1。8．concat()方法concat()方法用于將提供的數(shù)據(jù)合并成一個(gè)新的數(shù)組，其基本語法格式如下。b

=

a.concat(x1,x2,x3,…)其中，x1、x2、x3等是單個(gè)的數(shù)據(jù)或者數(shù)組變量。如果是數(shù)組變量，則將其中的數(shù)據(jù)合并到新數(shù)組中。變量b保存合并后的新數(shù)組。3.2函數(shù)當(dāng)某一段代碼需要重復(fù)使用，或者需要對(duì)批量數(shù)據(jù)執(zhí)行相同操作時(shí)，就可使用函數(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ù)是可選的，多個(gè)參數(shù)之間用逗號(hào)分隔?；ɡㄌ?hào)中的代碼塊稱為函數(shù)體。在函數(shù)體中或在函數(shù)末尾，可使用return語句指定函數(shù)返回值。返回值可以是任意的常量、變量或者表達(dá)式。沒有return語句時(shí)，函數(shù)沒有返回值。例如，下面的函數(shù)用于計(jì)算兩個(gè)數(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)鍵字定義了一個(gè)匿名函數(shù)（也可稱未命名函數(shù)），JavaScript將其賦值給變量sum2。通過sum2可調(diào)用對(duì)應(yīng)的匿名函數(shù)。3．使用Function()構(gòu)造函數(shù)在JavaScript中，函數(shù)也是一種對(duì)象。函數(shù)對(duì)象的構(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ù)體通常為一個(gè)return語句。如果要返回對(duì)象常量，可將對(duì)象常量放在return語句或者一對(duì)圓括號(hào)中。var

fruit

=

(x,

y)

=>

{

return

{

type:

x,

price:

y

}

}

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

fruit2

=

(x,

y)

=>

({

type:

x,

price:

y

})

//返回對(duì)象常量，簡(jiǎn)略定義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ù)對(duì)象的變量名稱。使用function關(guān)鍵字定義函數(shù)時(shí)，函數(shù)定義可以放在當(dāng)前HTML文檔中的任意位置，即允許函數(shù)的調(diào)用出現(xiàn)在函數(shù)定義之前。使用Function()構(gòu)造函數(shù)定義函數(shù)時(shí)，只能在定義之后通過變量名來調(diào)用函數(shù)。函數(shù)可以在腳本中調(diào)用，也可以作為HTML的事件處理程序或URL。3.2.3帶參數(shù)的函數(shù)定義函數(shù)時(shí)指定的參數(shù)稱為形式參數(shù)，簡(jiǎn)稱形參。調(diào)用函數(shù)時(shí)指定的參數(shù)稱為實(shí)際參數(shù)，簡(jiǎn)稱實(shí)參。在調(diào)用函數(shù)時(shí)，實(shí)參按先后順序一一對(duì)應(yīng)地傳遞給形參。JavaScript是弱類型的，形參不需要指定數(shù)據(jù)類型。JavaScript不會(huì)檢查形參和實(shí)參的數(shù)據(jù)類型，也不會(huì)檢查形參和實(shí)參的個(gè)數(shù)。1．函數(shù)參數(shù)的個(gè)數(shù)函數(shù)的length屬性返回形參的個(gè)數(shù)。在函數(shù)內(nèi)部，arguments數(shù)組保存調(diào)用函數(shù)時(shí)傳遞的實(shí)參。

function

getMax(a,

b)

{

var

max

=

Number.MIN_VALUE

var

len

=

arguments.length

//獲得實(shí)際參數(shù)個(gè)數(shù)2．使用數(shù)組作為參數(shù)在使用表達(dá)式作為實(shí)參時(shí)，形參接收實(shí)參的值，所以形參值的改變不會(huì)影響到實(shí)參。在使用數(shù)組作為實(shí)參時(shí)，形參接收的是數(shù)組的引用，即形參和實(shí)參引用了同一個(gè)數(shù)組。這種情況下，通過形參改變數(shù)組元素的值后，在函數(shù)外通過實(shí)參獲得的也是改變后的數(shù)組元素值。3．使用對(duì)象作為參數(shù)對(duì)象也可作為函數(shù)參數(shù)。與數(shù)組類似，形參和實(shí)參引用的是同一個(gè)對(duì)象。如果在函數(shù)中通過形參修改了對(duì)象屬性值，通過實(shí)參獲得的也是修改后的對(duì)象屬性值。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

}

//返回長(zhǎng)度較大的數(shù)組的序號(hào)

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)用無法停止，則會(huì)導(dǎo)致運(yùn)行腳本的瀏覽器崩潰。function

fact(n)

{

//計(jì)算階乘

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ù)用于顯示警告對(duì)話框，對(duì)話框包括一個(gè)“確定”按鈕。2．confirm()函數(shù)confirm()函數(shù)用于顯示確認(rèn)對(duì)話框，對(duì)話框包括“確定”和“取消”按鈕。單擊“確定”按鈕可關(guān)閉對(duì)話框，函數(shù)返回值為true。使用其他方式關(guān)閉對(duì)話框時(shí)，函數(shù)返回值為false。3．prompt()函數(shù)prompt()函數(shù)用于顯示輸入對(duì)話框。函數(shù)的第1個(gè)參數(shù)為提示字符串，第2個(gè)參數(shù)會(huì)顯示在輸入框中。輸入數(shù)據(jù)后，單擊“確定”按鈕，函數(shù)返回值為輸入的數(shù)據(jù)。使用其他方式關(guān)閉對(duì)話框時(shí)，函數(shù)返回值為nu