項目10省市級聯動任務1先導知識：下拉列表控件和數組對象任務2省市級聯動效果

任務1先導知識：下拉列表控件和數組對象

10.1.1下拉列表控件在網頁中，選擇列表可以使用相對較小的空間來提供大量的信息。網頁上的選擇列表包括彈出式和滾動式兩種形式。

與其他JavaScript對象相比，由于列表項數據的復雜性，在腳本中使用select元素對象比較復雜。select元素由select元素對象和option元素對象組成，option元素對象包含用戶選擇的真正選項，一些對腳本設計者非常有價值的屬性屬于select對象，而其余的屬性屬于嵌套的option對象。例如，用戶可以提取列表中當前選項的編號(索引)，編號是整個select對象的一個屬性，但為得到選中選項的顯示文本，則必須得到為對象定義的所有選項中單個選項的text屬性。

在表單中定義一個select對象時，<select>…</select>標記對的構造很容易產生混淆。首先，定義整個對象的大多數特性(如name屬性、size屬性和事件處理程序)都是開始<select>標記的特性。在開始標記的結束處和結尾</select>標記之間，包含顯示在列表中的每個選項的額外標記。

在默認情況下，select元素作為彈出式列表顯示，為把它顯示為滾動式列表，需要賦給size屬性一個大于1的整數值，用這個值指定列表中不需要滾動就能顯示的選項個數，也就是列表框的高度，以行數計量。

1.?value屬性

select元素的value屬性用于獲得選中項的值，如果該選中項未設定value屬性，則返回的是空字符串。

2.?length屬性

select元素的length屬性用于獲得下拉框選擇項的數量，返回一個整型值。

3.?selectedIndex屬性

當用戶在選擇列表中做出一個選擇時，selectedIndex屬性改變為列表中相應選項的編號，第一項的值為0。對于需要提取這個值或選中選項的文本以便做進一步處理的腳本來說，這一信息非常有用。

這一信息可以作為獲得選中項屬性的捷徑。要檢查一個select對象的selected屬性，不必循環遍歷每個選項，可以使用對象的selectedIndex屬性作為選中項的引用填入索引值。在這種情況下，語句可能比較長，但從執行的角度來看，這個方法是最有效的。然而，select對象如果是多項選擇類型，那么selectedIndex屬性的值就表示列表中所有選中項的第一項的索引。

4.?options屬性

options屬性是一個對象數組，保存了下拉框中所有下拉選項對象的集合。所有的下拉選項都以對象的形式保存在此數組中，所以通過下標可以獲得某個下拉選項對象。

10.1.2數組對象

數組是值的有序集合。數組里面的值叫作元素，而且每個元素在數組中都有一個位置，用數字表示，稱為索引。

JavaScript數組是無類型的，數組中的元素可以是任意類型，并且同一個數組中的不同元素也可以是不同的類型。數組的元素甚至也可以是對象或者其他數組，也允許創建復雜的數據結構，如對象的數組和數組的數組。

JavaScript數組是動態的，根據需要數組會增長或縮減，并且在創建數組時無須聲明一個固定的大小或者在數組大小變化時無須重新分配空間。JavaScript數組可能是稀疏的，數組元素的索引不一定是連續的，它們之間可以有空缺。每個JavaScript數組都有一個length屬性。針對非稀疏數組，該屬性就是數組元素的個數。針對稀疏數組，length比所有元素的索引要大。

JavaScript數組是JavaScript對象的特殊格式，數組索引實際上和碰巧是整數的屬性名差不多。

1.創建數組

使用數組直接量是創建數組最簡單的方法，在方括號中將數組元素用逗號隔開即可。

數組中的值不一定要是常量，它們可以是任意的表達式，也可以包含對象或者其他的數組。

調用構造函數Array()是創建數組的另一種方法?？梢杂萌N方式調用構造函數。

(1)調用時沒有參數。

(2)調用時有一個數值參數，它指定長度。

(3)顯式指定兩個或多個數組元素或者數組的一個非數值元素。

2.數組的讀和寫

使用[]操作符來訪問數組中的一個元素，數組的引用位于方括號的左邊。方括號中是一個返回非負數的任意表達式。

事實上，數組索引僅僅是對象屬性名的一種特殊類型，這就意味著JavaScript數組沒有“越界”錯誤的概念。當查詢任何對象中不存在的屬性時，程序不會報錯，只會返回undefined值，類似于對象，同樣存在這種情況。

3.數組的長度

每個數組有一個length屬性，就是這個屬性使其區別于常規的JavaScript對象。針對數組，length屬性值代表數組中元素的個數。

根據數組的長度(length值)和數組中元素的個數，一般將數組分為稠密數組(非稀疏數組)和稀疏數組。

稠密數組：在Java和C語言中，數組是一片連續的存儲空間，有著固定的長度。加入數組其實位置是address，長度為n，那么占用的存儲空間是address[0]，address[1]，address[2]，…，address[n-1]，即數組元素之間是緊密相連的，不存在空隙。

稀疏數組：稀疏數組與稠密數組相反，JavaScript并不強制要求數組元素是緊密相連的，即允許間隙的存在。換一種說法，當數組是稀疏數組時，length屬性值大于元素的個數，而且關于此我們可以說的一切也就是數組長度保證大于它每個元素的索引值。

為了維護數組的穩定性，數組有兩個特殊的行為。第一個是如果為一個數組元素賦值，它的索引i大于或等于現有數組的長度時，length屬性的值將設置為i?+?1；第二個是設置length屬性為一個小于當前長度的非負整數n時，當前數組中那些索引值大于或等于n的元素將從中刪除。

4.數組元素的添加和刪除

1)添加

前面我們已經接觸了最簡單的數組添加元素的方法，為新索引賦值。

也可以使用push()方法在數組末尾增加一個或多個元素。

使用push()方法在數組的尾部壓入一個元素與給數組test[test.length]賦值是一樣的。可以使用unshift()方法在數組的首部插入一個元素，并且將其他元素依次移到更高的索引處。

2)刪除

可以使用delete運算符來刪除數組元素。

對于數組而言，使用delete不會修改數組的length屬性，也不會將元素從高索引處移下來填充已刪除屬性留下的空白。除了使用delete方法刪除元素外，還可以使用length屬性重新設置數組的長度來刪除數組尾部的元素。數組還有pop()方法(它和push()一起使用)，push()一次使長度減少1并返回被刪除元素的值。還有一個shift()方法(它和unshift()一起使用)，從數組頭部刪除一個元素。和delete方法不同的是shift()方法將所有元素下移到比當前索引低1的地方。

5.數組遍歷

使用for循環是遍歷數組元素最常見的方法。

1)普通遍歷方式

2)使用for…in遍歷方式

3)?forEach遍歷方式

4)?for…of遍歷方式

6.多維數組

JavaScript不支持真正的多維數組，但可以用數組的數組來近似。訪問數組的數組中的元素，只要簡單地使用兩次[]操作符即可。例如，假設變量mar是一個數組的數組，它的基本元素是數值，那么mar[i]的每個元素包含一個數值數組，訪問數組中特定的代碼為mar[i][j]。

7.數組方法

下面開始介紹數組的方法，數組的方法有數組原型方法，也有從object對象繼承來的方法，這里我們只介紹數組的原型方法，數組原型方法主要有以下幾種。

1)?join()

Array.join()方法將數組中所有元素都轉化為字符串并連接在一起，返回最后生成的字符串。此方法可以指定一個可選的字符串來分隔數組的各個元素。如果不指定分隔符，默認使用逗號。

2)?reverse()

Array.reverse()方法將數組中的元素顛倒順序，返回逆序的數組。它采取了替換，換句話說，它不通過重新排列的元素創建新的數組，而是在原先的數組中重新排列元素。

3)?sort()

Array.sort()方法將數組中的元素排序并返回排序后的數組。當不帶參數調用sort()時，數組元素以字母順序排序，按升序排列數組項—最小的值位于最前面，最大的值排在最后面。在排序時，sort()方法會調用每個數組項的toString()轉型方法，然后比較得到的字符串，以確定如何排序。

4)?concat()

Array.concat()方法創建并返回一個新數組。它的元素包括調用concat()的原始數組的元素和concat()的每個參數。如果這些參數中的任何一個自身是數組，則連接的是數組的元素，而非數組本身。但要注意，concat()不會遞歸扁平化數組，也不會修改調用數組。

5)?slice()

Array.slice()方法返回指定數組的一個片段或者子數組。它的兩個參數分別指定了片段的開始和結束的位置。返回數組包含第一個參數指定的位置和所有到但不含有第二個參數指定的位置之間的所有數組元素。如果只指定一個參數，返回的數組將包含從開始位置到數組結尾的所有元素。如參數出現負數，它表示相對于數組中最后一個元素的位置。

6)?splice()

Array.splice()方法是數組中插入或者刪除元素通用方法。不同于slice()和concat()，splice()會修改調用的數組。注意splice()和slice()擁有非常相似的名字，但是它們的功能卻有本質的區別。

splice()能夠從數組中刪除、插入元素到數組中或者同時完成這兩種操作。在插入或刪除點之后的數組元素會根據需要增加或減小它們的索引值，因此數組的其他部分還是保持連續的。splice()的第一個參數指定了插入或者刪除的起始位置，第二個參數指定了應該從數組中刪除的元素的個數。如果省略第二個參數，則表示從起始點開始到數組結尾的所有元素都將被刪除。splice()返回一個有刪除元素組成的數組，或者如果沒有刪除元素就返回一個空數組。

7)?push()和pop()

push()可以接收任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。

pop()將數組末尾移除最后一項，減少數組的length值，然后返回移除的項。

8)?shift()和unshift()

shift()用于刪除原數組第一項，并返回刪除元素的值。如果數組為空則返回undefined。

unshift()用于將參數添加到原數組開頭，并返回數組的長度。

這組方法和上面的push()和pop()方法正好對應，shift()和unshift()是操作數組的開頭，push()和pop()是操作數組的末尾。

9)?toString()

數組和其他的JavaScript對象一樣擁有toString()方法。針對數組，該方法將其每個元素轉化為字符串，并且輸出用逗號分隔的字符串列表。

10)?indexOf()和lastIndexOf()

indexOf()用于接收兩個參數：要查找的項和(可選的)表示查找起點位置的索引。其中，從數組的開頭(位置0)開始向后查找。

lastIndexOf()用于接收兩個參數：要查找的項和(可選的)表示查找起點位置的索引。其中，從數組的末尾開始向前查找。

這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回1。在比較第一個參數與數組中的每一項時，會使用全等操作符。

11)?forEach()

forEach()用于對數組進行遍歷循環，為每個元素調用指定的函數。這個方法沒有返回值。參數都是function類型，默認有傳參，參數分別為遍歷的數組內容、對應的數組索引、數組本身。

12)?map()

map()用于對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

13)?filter()

filter()用于對數組中的每一項運行給定函數，返回滿足過濾條件組成的數組。

14)?some()

some()用于判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

15)?reduce()和reduceRight()

這兩個方法都會實現迭代數組的所有項，然后構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最后；而reduceRight()則從數組的最后一項開始，向前遍歷到第一項。

這兩個方法都接收兩個參數：一個在每一項上調用的函數和(可選的)作為歸并基礎的初始值。

傳給reduce()和reduceRight()的函數接收4個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

任務2