5.3 JavaScript中的數(shù)組

可以把數(shù)組看作一張單行表格，該表格的每一個單元格又都可以存儲一個數(shù)據(jù)，而且各單元格中存儲的數(shù)據(jù)類型可以不同。這些單元格被稱為數(shù)組元素，每個數(shù)組元素都有一個索引號，通過索引號可以方便地引用數(shù)組元素。數(shù)組是JavaScript中唯一用來存儲和操作有序數(shù)據(jù)集的數(shù)據(jù)結(jié)構(gòu)。

5.3.1 創(chuàng)建Array對象

可以用靜態(tài)的Array對象創(chuàng)建一個數(shù)組對象，以記錄不同類型的數(shù)據(jù)。

語法格式：

    arrayObj = new Array()
    arrayObj = new Array([size])
    arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

參數(shù)說明：

arrayObj：必選項，表示要賦值為Array對象的變量名。

size：可選項，用于設(shè)置數(shù)組的大小。數(shù)組的下標從0開始，創(chuàng)建元素的下標為0～size-1。

elementN：可選項，表示存入數(shù)組中的元素。使用該語法時，數(shù)組必須有一個以上的元素。

例如，創(chuàng)建一個可存入3個元素的Array對象，并向該對象中存入數(shù)據(jù)，代碼如下：

    arrayObj = new Array(3)
    arrayObj[0]= "a";
    arrayObj[0]= "b";
    arrayObj[0]= "c";

例如，創(chuàng)建Array對象的同時向該對象中存入數(shù)組元素，代碼如下：

    arrayObj = new Array(1,2,3,"a","b")

5.3.2 Array對象的輸入／輸出

1．Array對象的輸入

向Array對象中輸入數(shù)組元素有3種方法，分別介紹如下：

（1）在定義Array對象時直接輸入數(shù)組元素

該方法只能在數(shù)組元素確定的情況下才可以使用。

例如，在創(chuàng)建Array對象的同時存入字符串數(shù)組，代碼如下：

    arrayObj = new Array("a","b","c","d")

（2）利用Array對象的元素下標向其輸入數(shù)組元素

該方法可以隨意地為Array對象中的各元素賦值，或是修改數(shù)組中的任意元素值。

例如，在創(chuàng)建一個長度為7的Array對象后，向下標為3和4的元素賦值。

    arrayObj = new Array(7)
    arrayObj[3] = "a";
    arrayObj[4] = "b";

（3）利用for語句向Array對象輸入數(shù)組元素

該方法主要用于批量向Array對象輸入數(shù)組元素，一般用于為Array對象賦初值。

例如，可以通過改變變量n的值（必須是數(shù)值型），給數(shù)組對象arrayObj賦指定個數(shù)的數(shù)值元素，代碼如下：

    Var n=7
    arrayObj = new Array()
    for(var i=0;i<n;i++){
          arrayObj[i]=i
    }

例如，給指定元素個數(shù)的Array對象賦值，代碼如下：

    arrayObj = new Array(7)
    for(var i=0;i<arrayObj.length;i++){
          arrayObj[i]=i
    }

2．Array對象的輸出

將Array對象中的元素值進行輸出有3種方法，分別介紹如下：

（1）用下標獲取指定元素值

該方法通過Array對象的下標獲取指定的元素值。

例如，獲取Array對象中第3個元素的值，代碼如下：

    arrayObj = new Array("a","b","c","d")
    var s=arrayObj[2]

運行結(jié)果：

    c

（2）用for語句獲取數(shù)組中的元素值

該方法利用for語句獲取Array對象中所有元素的值。

例如，獲取Array對象中的所有元素值，代碼如下：

    arrayObj = new Array("a","b","c","d")
    for(var i=0;i<arrayObj.length;i++){
        str=str+arrayObj[i].toString();
    }
    document.write(str);

運行結(jié)果：

    abcd

（3）用數(shù)組對象名輸出所有元素值

該方法用創(chuàng)建的數(shù)組對象顯示數(shù)組中的所有元素值。

例如，顯示數(shù)組中的所有元素值，代碼如下：

    arrayObj = new Array("a","b","c","d")
    document.write(arrayObj);

運行結(jié)果：

    abcd

5.3.3 Array對象的屬性

在Array對象中有l(wèi)ength和prototype兩個屬性，下面分別進行介紹：

（1）length屬性

length屬性用于返回數(shù)組的長度。

語法格式：

    array.length

參數(shù)說明：

array：表示數(shù)組名稱。

例如，獲取已創(chuàng)建的數(shù)組對象的長度，代碼如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    document.write(arr.length);

運行結(jié)果：

    8

例如，增加已有數(shù)組的長度，代碼如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    arr[arr.length]=arr.length+1;
    document.write(arr.length);

運行結(jié)果：

    9

（2）prototype屬性

prototype屬性的語法與String對象的prototype屬性相同。下面以實例的形式對該屬性的應(yīng)用進行說明。

【例5.16】 利用自定義方法顯示數(shù)組中的全部數(shù)據(jù)。（實例位置：資源包\TM\sl\5\16）

本實例利用prototype屬性自定義一個方法，用于顯示數(shù)組中的全部數(shù)據(jù)。運行結(jié)果如圖5.17所示。

圖5.17 利用自定義方法顯示數(shù)組中的全部數(shù)據(jù)

代碼如下：

5.3.4 Array對象的方法

Array對象中的方法如表5.13所示。

表5.13 Array對象的方法

5.3.5 數(shù)組的添加和刪除

數(shù)組的添加和刪除可以使用concat()、shift()、pop()、push()和unshift()方法實現(xiàn)。

1．concat()方法

concat()方法用于將其他數(shù)組連接到當前數(shù)組的尾端。

語法格式：

    arrayObject.concat(arrayX,arrayX,...,arrayX)

參數(shù)說明：

arrayObject：必選項。表示數(shù)組名稱。

arrayX：必選項。該參數(shù)可以是具體的值，也可以是數(shù)組對象。

例如，在數(shù)組的尾部添加數(shù)組元素，代碼如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    document.write(arr.concat(9,10));

運行結(jié)果如圖5.18所示。

圖5.18 向數(shù)組中添加元素

例如，在數(shù)組的尾部添加其他數(shù)組，代碼如下：

    var arr1=new Array('a','b','c');
    var arr2=new Array('d','e','f');
    document.write(arr1.concat(arr2));

運行結(jié)果如圖5.19所示。

圖5.19 向數(shù)組中添加數(shù)組

2．shift()方法

shift()方法用于把數(shù)組中的第一個元素從數(shù)組中刪除，并返回刪除元素的值。

語法格式：

    arrayObject.shift()

參數(shù)說明：

arrayObject：必選項。表示數(shù)組名稱。

返回值：在數(shù)組中刪除的第一個元素的值。

例如，刪除數(shù)組中的第一個元素，代碼如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    var Del=arr. shift();
    document.write('刪除元素為:'+Del+';刪除后的數(shù)組為:'+arr);

運行結(jié)果如圖5.20所示。

圖5.20 刪除數(shù)組中的元素

3．pop()方法

pop()方法用于刪除并返回數(shù)組中的最后一個元素。

語法格式：

    arrayObject.pop()

參數(shù)說明：

返回值：Array對象的最后一個元素。

例如，刪除數(shù)組中的最后一個元素，代碼如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    var Del=arr.pop();
    document.write('刪除元素為:'+Del+';刪除后的數(shù)組為:'+arr);

運行結(jié)果如圖5.21所示。

圖5.21 刪除數(shù)組中的最后一個元素

4．push()方法

push()方法用于向數(shù)組的末尾添加一個或多個元素，并返回添加后的數(shù)組長度。

語法格式：

    arrayObject.push(newelement1,newelement2,...,newelementX)

push()方法中各參數(shù)的說明如表5.14所示。

表5.14 push()方法中的參數(shù)說明

參數(shù)說明：

返回值：把指定的值添加到數(shù)組后的新長度。

【例5.17】 向數(shù)組的末尾添加元素5、6和7。（實例位置：資源包\TM\sl\5\17）

    var arr=new Array(1,2,3,4);
    document.write('原數(shù)組:'+arr+'<br>');
    document.write('添加元素后的數(shù)組長度:'+arr.push(5,6,7)+'<br>');
    document.write('新數(shù)組:'+arr);

運行結(jié)果如圖5.22所示。

圖5.22 向數(shù)組的末尾添加元素

5．unshift()方法

unshift()方法向數(shù)組的開頭添加一個或多個元素。

語法格式：

    arrayObject.unshift(newelement1,newelement2,...,newelementX)

unshift()方法中各參數(shù)的說明如表5.15所示。

表5.15 unshift()方法中的參數(shù)說明

例如，向arr數(shù)組的開頭添加元素1、2和3，代碼如下：

    var arr=new Array(4,5,6,7);
    document.write('原數(shù)組:'+arr+'<br\>');
    arr.unshift(1,2,3);
    document.write('新數(shù)組:'+arr);

運行程序，會將原數(shù)組和新數(shù)組中的內(nèi)容顯示在頁面中，如圖5.23所示。

圖5.23 向數(shù)組的開頭添加元素

5.3.6 設(shè)置數(shù)組的排列順序

通過reverse()和sort()方法可以將數(shù)組中的元素按照指定的順序進行排列。

1．reverse()方法

reverse()方法用于顛倒數(shù)組中元素的順序。

語法格式：

    arrayObject.reverse()

參數(shù)說明：

arrayObject：必選項，表示數(shù)組名稱。

【例5.18】 將數(shù)組中的元素順序顛倒后顯示。（實例位置：資源包\TM\sl\5\18）

    var arr=new Array(1,2,3,4);
    document.write('原數(shù)組:'+arr+'<br\>');
    arr.reverse();
    document.write('顛倒后的數(shù)組:'+arr);

運行結(jié)果如圖5.24所示。

圖5.24 將數(shù)組顛倒輸出

2．sort()方法

sort()方法用于對數(shù)組的元素進行排序。

語法格式：

    arrayObject.sort(sortby)

參數(shù)說明：

arrayObject：必選項，表示數(shù)組名稱。

sortby：可選項，規(guī)定排序的順序，必須是函數(shù)。

例如，將數(shù)組中的元素按字符的編碼順序進行顯示，代碼如下：

    var arr=new Array(2,1,4,3);
    document.write('原數(shù)組:'+arr+'<br\>');
    arr.sort();
    document.write('排序后的數(shù)組:'+arr);

運行本實例，將原數(shù)組和排序后的數(shù)組輸出，結(jié)果如圖5.25所示。

圖5.25 輸出排序前與排序后的數(shù)組元素

5.3.7 獲取數(shù)組中的某段數(shù)組元素

獲取數(shù)組中的某段數(shù)組元素主要用slice()方法實現(xiàn)。

slice()方法可從已有的數(shù)組中返回選定的元素。

語法格式：

    arrayObject.slice(start,end)

參數(shù)說明：

start：必選項，規(guī)定從何處開始選取。如果是負數(shù)，說明從數(shù)組尾部開始選取。也就是說，-1指最后一個元素，-2指倒數(shù)第二個元素，以此類推。

end：可選項，規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片段結(jié)束處的數(shù)組下標。如果沒有指定該參數(shù)，那么截取的數(shù)組包含從start到數(shù)組結(jié)束的所有元素；如果這個參數(shù)是負數(shù)，那么將從數(shù)組尾部開始算起。

返回值：返回截取后的數(shù)組元素，該方法返回的數(shù)據(jù)中不包括end索引所對應(yīng)的數(shù)據(jù)。

【例5.19】 截取數(shù)組中某段數(shù)組元素。（實例位置：資源包\TM\sl\5\19）

    <script language="javascript">
    <!--
    var arr=new Array("a","b","c","d","e","f");
    document.write("原數(shù)組:"+arr+"<br>");
    document.write("獲取數(shù)組中第3個元素后的所有元素信息:"+arr.slice(2)+"<br>");
    document.write("獲取數(shù)組中第2個到第5個的元素信息"+arr.slice(1,5)+"<br>");
    document.write("獲取數(shù)組中倒數(shù)第2個元素后的所有信息"+arr.slice(-2));
    //-->
    </script>

運行程序，會將原數(shù)組以及截取數(shù)組元素后的數(shù)據(jù)輸出。運行結(jié)果如圖5.26所示。

圖5.26 獲取數(shù)組中某段數(shù)組元素

5.3.8 將數(shù)組轉(zhuǎn)換成字符串

將數(shù)組轉(zhuǎn)換成字符串主要通過toString()、toLocaleString()和join()方法實現(xiàn)。

1．toString()方法

toString()方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

語法格式：

    arrayObject.toString()

參數(shù)說明：

arrayObject：必選項，表示數(shù)組名稱。

返回值：以字符串顯示arrayObject。返回值與沒有參數(shù)的join()方法返回的字符串相同。

例如，將數(shù)組轉(zhuǎn)換成字符串，代碼如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.toString());

運行結(jié)果如圖5.27所示。

圖5.27 將數(shù)組轉(zhuǎn)換為字符串

2．toLocaleString()方法

toLocaleString()方法用于將數(shù)組轉(zhuǎn)換成本地字符串。

語法格式：

    arrayObject.toLocaleString()

參數(shù)說明：

arrayObject：必選項，表示數(shù)組名稱。

返回值：本地字符串。

例如，將數(shù)組轉(zhuǎn)換成用“,”分隔的字符串，代碼如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.toLocaleString());

運行結(jié)果如圖5.28所示。

圖5.28 將數(shù)組轉(zhuǎn)換為本地字符串

3．join()方法

join()方法用于將數(shù)組中的所有元素放入一個字符串中。

語法格式：

    arrayObject.join(separator)

參數(shù)說明：

separator：可選項，表示要使用的分隔符。如果省略該參數(shù)，則使用逗號作為分隔符。

返回值：返回一個字符串。該字符串是把arrayObject的每個元素轉(zhuǎn)換為字符串，然后把這些字符串連接起來，在兩個元素之間插入separator字符串而生成的。

例如，以指定的分隔符將數(shù)組中的元素轉(zhuǎn)換成字符串，代碼如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.join("#"));

運行結(jié)果如圖5.29所示。

圖5.29 使用指定分隔符將數(shù)組中的元素轉(zhuǎn)換為字符串