JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程（第2版）（微課版）課件 劉凡馨 第3章 數(shù)組和函數(shù)；第4章 異常和事件處理

JavaScript+jQuery前端開(kāi)發(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)來(lái)表示，例如，假設(shè)a數(shù)組中有3個(gè)數(shù)組元素，這3個(gè)元素可表示為a[0]、a[1]和a[2]。JavaScript是弱類型的，所以數(shù)組中的各個(gè)數(shù)組元素可存放不同類型的數(shù)據(jù)，甚至可以是對(duì)象或數(shù)組。JavaScript不支持多維數(shù)組，但可通過(guò)在數(shù)組元素中保存數(shù)組來(lái)模擬多維數(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)括起來(lái)的一組數(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ù)，可用它來(lái)創(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)度來(lái)創(chuàng)建指定長(zhǎng)度的數(shù)組。var

a=new

Array(5)

//創(chuàng)建有5個(gè)元素的數(shù)組，元素初始值為undefined參數(shù)為多個(gè)值時(shí)，Array()函數(shù)將這些值作為數(shù)組元素來(lái)創(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ù)組元素來(lái)創(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ì)象來(lái)創(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ù)組元素通過(guò)數(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沒(méi)有多維數(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沒(méi)有數(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刪除，或者通過(guò)賦值語(yǔ)句給一個(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)度是可變的，通過(guò)為不存在的數(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開(kāi)始，所以數(shù)組下標(biāo)范圍為0到數(shù)組長(zhǎng)度減1。JavaScript允許修改length屬性。a.length=5上面的語(yǔ)句將數(shù)組a的長(zhǎng)度修改為5。如果修改后的長(zhǎng)度小于原來(lái)長(zhǎng)度，超出新長(zhǎng)度的數(shù)組元素將丟失。如果新長(zhǎng)度超出原長(zhǎng)度，增加的數(shù)組元素初始值為undefined。2．prototype屬性對(duì)象的prototype屬性用于為對(duì)象添加自定義的屬性或方法。為數(shù)組添加自定義屬性或方法的基本語(yǔ)法格式如下。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(yǔ)法格式為如下。a.join()

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

//將數(shù)組a中的數(shù)據(jù)連接成變量x中的字符串分隔的字符串2．逆轉(zhuǎn)元素順序reverse()方法將數(shù)組元素以相反的順序存放。基本語(yǔ)法格式如下。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ù)的位置無(wú)關(guān)緊要，排序函數(shù)返回0。使用排序函數(shù)時(shí)，sort方法將兩個(gè)數(shù)組元素作為排序函數(shù)的參數(shù)，根據(jù)排序函數(shù)的返回值決定數(shù)組元素的先后順序。4．取子數(shù)組

slice()方法用于從數(shù)組中取子數(shù)組，其基本語(yǔ)法格式如下。數(shù)組名.slice(x,y)從數(shù)組中返回下標(biāo)范圍為x～y-1的子數(shù)組。如果省略y，則返回從x開(kāi)始到最后的全部數(shù)組元素。如果x或y為負(fù)數(shù)，則作為最后一個(gè)元素的相對(duì)位置，如-1為倒數(shù)第1個(gè)元素位置。5．splice()方法splice()方法用于添加或刪除數(shù)組元素，其基本語(yǔ)法格式如下。數(shù)組名.splice(m,n,x1,x2,...)其中，m為開(kāi)始元素下標(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ù)組開(kāi)頭，并返回新的數(shù)組長(zhǎng)度。shift()方法返回?cái)?shù)組中的第一個(gè)元素，所有數(shù)組元素依次前移一位，數(shù)組長(zhǎng)度減1。8．concat()方法concat()方法用于將提供的數(shù)據(jù)合并成一個(gè)新的數(shù)組，其基本語(yǔ)法格式如下。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ù)來(lái)完成。3.2.1定義函數(shù)1．使用function關(guān)鍵字定義函數(shù)用function關(guān)鍵字定義函數(shù)的基本語(yǔ)法格式如下。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語(yǔ)句指定函數(shù)返回值。返回值可以是任意的常量、變量或者表達(dá)式。沒(méi)有return語(yǔ)句時(shí)，函數(shù)沒(méi)有返回值。例如，下面的函數(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。通過(guò)sum2可調(diào)用對(duì)應(yīng)的匿名函數(shù)。3．使用Function()構(gòu)造函數(shù)在JavaScript中，函數(shù)也是一種對(duì)象。函數(shù)對(duì)象的構(gòu)造函數(shù)為Function()，可用它來(lái)定義函數(shù)，其基本語(yǔ)法格式如下。var

變量

=

new

Function(

"參數(shù)1"

,

"參數(shù)2"

,……,

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

sum3

=

new

Function("a"

,

"b"

,

"return

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

sum

=

(x,

y)

=>

{

return

x

+

y

}

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

5)

//函數(shù)返回值為7箭頭函數(shù)的函數(shù)體通常為一個(gè)return語(yǔ)句。如果要返回對(duì)象常量，可將對(duì)象常量放在return語(yǔ)句或者一對(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ù)沒(méi)有prototype屬性，所以箭頭函數(shù)不能作為類的構(gòu)造函數(shù)使用。3.2.2調(diào)用函數(shù)函數(shù)調(diào)用的基本語(yǔ)法格式如下。函數(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í)，只能在定義之后通過(guò)變量名來(lái)調(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ù)組。這種情況下，通過(guò)形參改變數(shù)組元素的值后，在函數(shù)外通過(guò)實(shí)參獲得的也是改變后的數(shù)組元素值。3．使用對(duì)象作為參數(shù)對(duì)象也可作為函數(shù)參數(shù)。與數(shù)組類似，形參和實(shí)參引用的是同一個(gè)對(duì)象。如果在函數(shù)中通過(guò)形參修改了對(duì)象屬性值，通過(guò)實(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)用無(wú)法停止，則會(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ù)返回值為null。4．escape()函數(shù)和unescape()函數(shù)escape()函數(shù)將字符串中的特殊字符轉(zhuǎn)換成“%××”格式的字符串，××為特殊字符ASCII的兩位十六進(jìn)制編碼。unescape()函數(shù)用于解碼由escape()函數(shù)編碼的字符。5．eval()函數(shù)eval()函數(shù)用于計(jì)算表達(dá)式的結(jié)果。6．isNaN()函數(shù)isNaN()函數(shù)在參數(shù)是NaN值時(shí)，返回true，否則返回false。7．parseFloat()函數(shù)parseFloat()函數(shù)將字符串轉(zhuǎn)換成小數(shù)形式。8．parseInt()函數(shù)parseInt()函數(shù)將字符串轉(zhuǎn)換成指定進(jìn)制的整數(shù)。編程實(shí)踐：模擬漢諾塔移動(dòng)本節(jié)綜合應(yīng)用本章所學(xué)知識(shí)，在網(wǎng)頁(yè)中顯示模擬的漢諾塔移動(dòng)過(guò)程，圖3-29顯示了3層漢諾塔的移動(dòng)過(guò)程。漢諾塔問(wèn)題描述如下：有3根木柱，在第1根柱子套了n個(gè)盤(pán)子，上面的盤(pán)子總是比下面的盤(pán)子小。借助第2根柱子，將所有盤(pán)子移動(dòng)到第3根柱子上。在移動(dòng)的過(guò)程中，必須保持上面的盤(pán)子總是比下面的盤(pán)子小。漢諾塔問(wèn)題用遞歸模型可描述為如下過(guò)程。第1步：將第1根柱子上的上面n-1個(gè)盤(pán)子借助第3根柱子移動(dòng)到第2根柱子上。第2步：將第1根柱子上的剩下的1個(gè)盤(pán)子移動(dòng)到第3根柱子上。第3步：將第2根柱子上的n-1個(gè)盤(pán)子借助第1根柱子移動(dòng)到第3根柱子上。用長(zhǎng)度為n的數(shù)組data表示要移動(dòng)的盤(pán)子，3根柱子分別用變量from、by、to表示，漢諾塔問(wèn)題用遞歸函數(shù)表示如下。在JavaScript中，可用遞歸函數(shù)來(lái)實(shí)現(xiàn)上面的漢諾塔問(wèn)題求解?？捎米址?dāng)?shù)組表示當(dāng)前要移動(dòng)的盤(pán)子和3根柱子的狀態(tài)，例如：對(duì)于4層漢諾塔，['D','C','B','A']表示盤(pán)子，二維數(shù)組[['D','C','B','A'],[],[]]則可表示柱子的初始狀態(tài)。移動(dòng)盤(pán)子時(shí)用pop()函數(shù)刪除對(duì)應(yīng)一維數(shù)組末尾的數(shù)組元素，然后用push()函數(shù)將移出的數(shù)組元素添加到對(duì)應(yīng)的一維數(shù)組末尾。JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第4章異常和事件處理本章主要內(nèi)容：異常處理事件處理4.1異常處理當(dāng)腳本運(yùn)行發(fā)生錯(cuò)誤時(shí)，瀏覽器通常會(huì)停止腳本的運(yùn)行，嚴(yán)重的錯(cuò)誤甚至有可能會(huì)導(dǎo)致瀏覽器崩潰。JavaScript利用異常處理來(lái)捕獲腳本中發(fā)生的錯(cuò)誤，以便給用戶及時(shí)、友好的提示。4.1.1捕獲和處理異常JavaScript使用try/catch/finally語(yǔ)句來(lái)捕獲和處理異常，其基本語(yǔ)法格式如下。try

{

...//可能發(fā)生異常的代碼塊}

catch

(err)

{

...//發(fā)生異常后，執(zhí)行此處的處理代碼塊}

finally

{

...//不管是否發(fā)生異常，均會(huì)執(zhí)行的代碼塊}

try部分的花括號(hào)中為可能發(fā)生異常的代碼塊。如果發(fā)生了異常，catch語(yǔ)句捕捉到該異常，局部變量err包含了異常信息。finally部分的花括號(hào)中為不管是否發(fā)生異常始終都會(huì)執(zhí)行的代碼。catch和finally均可省略，但必須有其中的一個(gè)才能和try構(gòu)成一個(gè)完整的語(yǔ)句finally子句一般很少使用，但其特殊性在于，只要執(zhí)行了try子句，不管完成了多少，finally子句總會(huì)執(zhí)行。如果try子句中有break、continue或者return語(yǔ)句，會(huì)導(dǎo)致程序流程轉(zhuǎn)移，但會(huì)在轉(zhuǎn)移前執(zhí)行finally子句。如果try子句發(fā)生了異常，而且同時(shí)有捕捉該異常的catch子句，則程序流程轉(zhuǎn)移到catch子句，catch子句執(zhí)行完后再執(zhí)行finally子句。如果finally子句中有break、continue、return或者throw語(yǔ)句，這些語(yǔ)句會(huì)導(dǎo)致程序流程轉(zhuǎn)移。4.1.2拋出異常除了腳本自身發(fā)生的異常外，還可使用throw語(yǔ)句來(lái)拋出異常，其語(yǔ)法格式如下。throw

表達(dá)式表達(dá)式的值可以是任意類型，也可以是Error對(duì)象或Error子類對(duì)象。throw

new

Error('出錯(cuò)了！')Error()構(gòu)造函數(shù)的參數(shù)將作為拋出的Error對(duì)象的message屬性值。4.2事件處理事件驅(qū)動(dòng)是JavaScript的重要特點(diǎn)。當(dāng)用戶在瀏覽器中執(zhí)行操作時(shí)，產(chǎn)生事件，執(zhí)行相應(yīng)的事件處理程序來(lái)完成交互——這就是事件驅(qū)動(dòng)。4.2.1理解事件JavaScript腳本在瀏覽器中的執(zhí)行分兩個(gè)階段：文檔載入階段和事件驅(qū)動(dòng)階段。文檔載入階段指瀏覽器打開(kāi)一個(gè)Web文檔的過(guò)程。在這一過(guò)程中，非事件處理程序代碼被執(zhí)行。文檔載入完成后，JavaScript腳本進(jìn)入事件驅(qū)動(dòng)階段。例如，瀏覽器加載完成時(shí)，會(huì)產(chǎn)生load事件，此時(shí)load事件處理程序就會(huì)執(zhí)行。當(dāng)用戶單擊了某個(gè)按鈕，產(chǎn)生click事件，按鈕的click事件處理程序就會(huì)被執(zhí)行。JavaScript事件處理的主要概念包括：事件類型、事件目標(biāo)、事件處理程序、事件對(duì)象和事件傳播。1．事件類型事件類型也稱事件名稱，是JavaScript對(duì)各類事件的命名，不同事件有其內(nèi)在的處理機(jī)制。例如，click表示鼠標(biāo)單擊，mousemove表示移動(dòng)鼠標(biāo)。2．事件目標(biāo)事件目標(biāo)指發(fā)生事件的對(duì)象。例如，單擊<button>標(biāo)記產(chǎn)生click事件，則<button>標(biāo)記為click事件的目標(biāo)。3．事件處理程序事件處理程序也稱事件監(jiān)聽(tīng)程序或者事件回調(diào)函數(shù)，它是腳本中用于處理事件的函數(shù)。為了響應(yīng)特定目標(biāo)的事件，首先需要定義事件處理程序，然后進(jìn)行注冊(cè)。特定目標(biāo)發(fā)生事件時(shí)，瀏覽器調(diào)用事件處理程序。當(dāng)對(duì)象上注冊(cè)的事件處理程序被調(diào)用時(shí)，我們稱瀏覽器“觸發(fā)”或者“分派”了事件。4．事件對(duì)象事件對(duì)象是與特定事件相關(guān)的對(duì)象，它包含了事件的詳細(xì)信息。事件被觸發(fā)時(shí)，事件對(duì)象作為參數(shù)傳遞給事件處理程序。全局對(duì)象event用于引用事件對(duì)象。5．事件傳播事件傳播是瀏覽器決定由哪個(gè)對(duì)象來(lái)響應(yīng)事件的過(guò)程。如果是專屬于某個(gè)特定對(duì)象的事件，則不需要傳播。例如，load事件專屬于Window對(duì)象，所以不需要傳播；而click事件適用于多數(shù)標(biāo)記，則會(huì)在HTML文檔的DOM樹(shù)中傳播。事件傳播可分為事件捕獲和事件冒泡兩個(gè)過(guò)程事件捕獲事件冒泡clickclickclickclickclickclickclickclickclickclick4.2.2注冊(cè)事件處理程序事件處理程序的注冊(cè)就是建立函數(shù)和對(duì)象事件的關(guān)聯(lián)關(guān)系。JavaScript允許通過(guò)下列方法來(lái)注冊(cè)事件處理程序。設(shè)置HTML標(biāo)記屬性。設(shè)置JavaScript對(duì)象屬性。調(diào)用addEventListener()方法。1．設(shè)置HTML標(biāo)記屬性注冊(cè)事件處理程序早期的Web設(shè)計(jì)都通過(guò)設(shè)置HTML標(biāo)記屬性來(lái)注冊(cè)事件處理程序。例4-4中的HTML文檔中的相關(guān)代碼如下。<div><button

onclick="test()">按鈕</button></div>在<button>標(biāo)記的onclick屬性中設(shè)置的函數(shù)，就是為<button>標(biāo)記注冊(cè)click事件處理程序。2．設(shè)置JavaScript對(duì)象屬性注冊(cè)事件處理程序?qū)⒑瘮?shù)設(shè)置為事件目標(biāo)對(duì)象的事件屬性值，也可完成事件處理程序的注冊(cè)。3．使用addEventListener()方法注冊(cè)事件處理程序事件目標(biāo)對(duì)象的addEventListener()方法用于注冊(cè)事件處理程序。該方法可為事件目標(biāo)對(duì)象的同一個(gè)事件注冊(cè)多個(gè)事件處理程序。當(dāng)事件發(fā)生時(shí)，為事件注冊(cè)的所有處理程序均可執(zhí)行。既然是同一個(gè)事件的處理程序，為何要注冊(cè)多個(gè)事件處理程序，不合并為一個(gè)呢？這主要是基于模塊化的程序設(shè)計(jì)思想的考慮。當(dāng)發(fā)生事件后，需要處理兩種或多種不太相關(guān)的邏輯時(shí)，將其分別用不同的函數(shù)來(lái)實(shí)現(xiàn)，也利于模塊的獨(dú)立性和程序的可維護(hù)性。addEventListener()方法基本語(yǔ)法格式如下。事件目標(biāo)對(duì)象.addEventListener('事件名稱',

函數(shù)名稱,

true|false)方法的第1個(gè)參數(shù)為事件名稱。第2個(gè)參數(shù)為函數(shù)名稱，函數(shù)名稱直接使用，不需要放在字符串中。第3個(gè)參數(shù)如果為true，事件處理程序的調(diào)用發(fā)生在事件的捕獲階段，即事件目標(biāo)對(duì)象接收到事件時(shí)調(diào)用事件處理程序。第3個(gè)參數(shù)如果為false，事件直接發(fā)生在事件目標(biāo)對(duì)象上，或者發(fā)生在其子對(duì)象上，事件冒泡到該對(duì)象時(shí)，調(diào)用事件處理程序。4.2.3事件處理程序的調(diào)用1．事件處理程序的調(diào)用方式事件處理程序的調(diào)用和函數(shù)的調(diào)用方式一致，只是時(shí)機(jī)不同。事件處理程序通常在目標(biāo)對(duì)象發(fā)生事件時(shí)被調(diào)用，調(diào)用時(shí)間是不確定的。也可直接調(diào)用事件處理程序。例如，在例4-5中，完成事件處理程序注冊(cè)后，可用下面的語(yǔ)句直接調(diào)用事件處理程序。btTest.onclick()

//直接調(diào)用事件處理程序直接調(diào)用事件處理程序僅等同于調(diào)用函數(shù)，不能和通過(guò)事件觸發(fā)事件處理程序等同。2．事件處理程序的參數(shù)事件處理程序被觸發(fā)時(shí)，事件對(duì)象作為第1個(gè)參數(shù)傳遞給事件處理程序。event變量用于在事件處理程序中引用事件對(duì)象。直接調(diào)用事件處理程序時(shí)，沒(méi)有發(fā)生事件，所以沒(méi)有事件對(duì)象作為參數(shù)。事件對(duì)象的主要屬性和方法type屬性：事件類型的名稱，如click、submit等。target屬性：發(fā)生事件的HTML標(biāo)記對(duì)象。可能與currentTarget不同。currentTarget屬性：正在執(zhí)行事件處理程序的HTML標(biāo)記對(duì)象。如果在事件傳播（捕獲或冒泡）過(guò)程中事件被觸發(fā)，currentTarget屬性與target屬性不同。timeStamp屬性：時(shí)間戳，表示發(fā)生事件的時(shí)間。bubbles屬性：邏輯值，表示事件是否冒泡。cancelable屬性：邏輯值，表示是否能用preventDefault()方法取消對(duì)象的默認(rèn)動(dòng)作。preventDefault()方法：阻止對(duì)象的默認(rèn)動(dòng)作。例如，單擊表單的提交按鈕時(shí)，首先會(huì)執(zhí)行表單的submit事件處理程序，然后執(zhí)行默認(rèn)動(dòng)作——將表單提交給服務(wù)器。如果在submit事件處理程序中調(diào)用了事件對(duì)象的preventDefault()方法，則會(huì)阻止表單提交給服務(wù)器，這與submit事件處理程序返回false的效果一樣。stopPropagation()方法：調(diào)用該方法可阻止事件傳播過(guò)程，事件傳播路徑中的后繼節(jié)點(diǎn)不會(huì)再接收到該事件。3．事件處理程序的返回值事件處理程序的返回值具有特殊意義。通常，事件處理程序返回false時(shí)，會(huì)阻止瀏覽器執(zhí)行這個(gè)事件的默認(rèn)動(dòng)作。例如，表單的submit事件處理程序返回false時(shí)，會(huì)阻止提交表單；單擊鏈接<a>時(shí)，會(huì)跳轉(zhuǎn)到鏈接的URL，若在其click事件處理程序中返回false，則會(huì)阻止跳轉(zhuǎn)。通過(guò)HTML標(biāo)記的屬性注冊(cè)事件處理程序時(shí)，如果要利用事件處理程序返回false以阻止默認(rèn)動(dòng)作，首先應(yīng)在事件處理程序中使用“returnfalse”