- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 1041字
- 2020-09-01 15:02:29
7.4 數組的屬性
視頻講解
在數組對象中有length和prototype兩個屬性。下面分別對這兩個屬性進行詳細介紹。
7.4.1 length屬性
length屬性用于返回數組的長度。
語法如下：
arrayObject.length
參數說明。
arrayObject：數組名稱。
例如，獲取已創建的數組對象的長度。代碼如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
02 document.write(arr.length); //輸出數組的長度
運行結果為：
8
例如，增加已有數組的長度。代碼如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
02 arr[arr.length]=arr.length+1; //為新的數組元素賦值
03 document.write(arr.length); //輸出數組的新長度
運行結果為：
9
注意
（1）當用new Array()創建數組時，并不對其進行賦值，length屬性的返回值為0。
（2）數組的長度是由數組的最大下標決定的。
例如，用不同的方法創建數組，并輸出數組的長度。代碼如下：
01 var arr1 = new Array(); //定義數組arr1
02 document.write("數組arr1的長度為："+arr1.length+"<p>"); //輸出數組arr1的長度
03 var arr2 = new Array(3); //定義數組arr2
04 document.write("數組arr2的長度為："+arr2.length+"<p>"); //輸出數組arr2的長度
05 var arr3 = new Array(1,2,3,4,5); //定義數組arr3
06 document.write("數組arr3的長度為："+arr3.length+"<p>"); //輸出數組arr3的長度
07 var arr4 = [5,6]; //定義數組arr4
08 document.write("數組arr4的長度為："+arr4.length+"<p>"); //輸出數組arr4的長度
09 var arr5 = new Array(); //定義數組arr5
10 arr5[9] = 100; //為下標為9的元素賦值
11 document.write("數組arr5的長度為："+arr5.length+"<p>"); //輸出數組arr5的長度
運行結果如圖7.4所示。
圖7.4 輸出數組的長度
【例7.02】將東北三省的省份名稱、省會城市名稱以及3個城市的旅游景點分別定義在數組中，應用for循環語句和數組的length屬性，將省份、省會以及旅游景點循環輸出在表格中。代碼如下：（實例位置：資源包\源碼\07\7.02）
01 <table cellspacing="1" bgcolor="#CC00FF">
02 <tr height="30" bgcolor="#FFFFFF">
03 <td align="center" width="50">序號</td>
04 <td align="center" width="100">省份</td>
05 <td align="center" width="100">省會</td>
06 <td align="center" width="260">旅游景點</td>
07 </tr>
08 <script type="text/javascript">
09 var province=new Array("黑龍江省","吉林省","遼寧省"); //定義省份數組
10 var city=new Array("哈爾濱市","長春市","沈陽市"); //定義省會數組
11 var tourist=new Array("太陽島 圣索菲亞教堂 中央大街","凈月潭 長影世紀城 動植物公園",
"沈陽故宮 沈陽北陵 張氏帥府"); //定義旅游景點數組
12 for(var i=0; i<province.length; i++){ //定義for循環語句
13 document.write("<tr height=26 bgcolor='#FFFFFF'>"); //輸出<tr>開始標記
14 document.write("<td align='center'>"+(i+1)+"</td>"); //輸出序號
15 document.write("<td align='center'>"+province[i]+"</td>"); //輸出省份名稱
16 document.write("<td align='center'>"+city[i]+"</td>"); //輸出省會名稱
17 document.write("<td align='center'>"+tourist[i]+"</td>"); //輸出旅游景點
18 document.write("</tr>"); //輸出</tr>結束標記
19 }
20 </script>
21 </table>
運行結果如圖7.5所示。
圖7.5 輸出省份、省會和旅游景點
7.4.2 prototype屬性
prototype屬性可以為數組對象添加自定義的屬性或方法。
語法如下：
Array.prototype.name=value
參數說明。
name：要添加的屬性名或方法名。
value：添加的屬性的值或執行方法的函數。
例如，利用prototype屬性自定義一個方法，用于顯示數組中的最后一個元素。代碼如下：
01 Array.prototype.outLast=function(){ //自定義outLast()方法
02 document.write(this[this.length-1]); //輸出數組中最后一個元素
03 }
04 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
05 arr.outLast(); //調用自定義方法
運行結果為：
8
該屬性的用法與String對象的prototype屬性類似，下面以實例的形式對該屬性的應用進行說明。
【例7.03】應用數組對象的prototype屬性自定義一個方法，用于顯示數組中的全部數據。程序代碼如下：（實例位置：資源包\源碼\07\7.03）
01 <script type="text/javascript">
02 Array.prototype.outAll=function(ar){ //自定義outAll()方法
03 for(var i=0;i<this.length;i++){ //定義for循環語句
04 document.write(this[i]); //輸出數組元素
05 document.write(ar); //輸出數組元素之間的分隔符
06 }
07 }
08 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
09 arr.outAll(" "); //調用自定義的outAll()方法
10 </script>
運行結果如圖7.6所示。
圖7.6 應用自定義方法輸出數組中的所有數組元素