2011年11月19日 星期六

JavaScript陣列

陣列 (Array) :
陣列是用來儲存多個資料, 而且這些變數是同一型態的 (但 JavaScript 允許一個陣列儲存不同型態的資料)。 陣列內的資料就稱為該陣列的元素 (elements), 陣列內的資料數目就稱為該陣列的長度 (length)。
當你想存取很多資料, 就可以用陣列, 好處就是不用為每個資料都定義一個變數名稱, 還可以方便存取大量資料。


如何宣告一個陣列:
只宣告一個陣列的名稱, 但不指定它的內容:
var array_name = new Array() ;


定義一個陣列的名稱和長度, 但不指定它的內容:
var array_name = new Array(length) ;
var Car_No Value = new Array(20);


一個個分別指定值:
var My_Color = new Array();
My_Color[0] = 'red';
My_Color[1] = 'green';
My_Color[2] = 'blue';


在宣告時直接指定參數:
var array_name = new Array(data1 , data2 , data3 , ... , dataN);
var My_Colorr = new Array('red','green','blue');
alert(My_Color[1]); //輸出 'green'


  • array_name 是陣列的名稱。
  • new 是用來將記憶體分配給一個新的物件, 它是是一個關鍵字。
  • Array 是用來宣告陣列的。
  • length 是陣列的資料數目, 它的值可以是由 1 開始的正整數, 例如你想宣告一個儲存星期的英文字陣列, length 的值就可以是 7。
  • data1 , data2 , data3 , ... , dataN  N 個資料, 那麼這個陣列的長度就是 N   了:

例子:
var week_array = new Array("Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday", "Sunday");

上述例子中定義了一個陣列來儲存星期的英文字,這個陣列有 7 個資料,因此陣列的長度就是 7 了。因為句子太長,所以寫成兩行,而分隔位置可以在逗號的左右。

宣告了一個陣列後,就可以存取陣列內的資料。要存取這些資料,就要學習它們的表示方式。


表示方式: 陣列內的資料
array_name[index]

  • index 是陣列內某個資料的位置, 它是由 0 開始的,而不是由 1 開始的,大家須要留意這點,因為這個電腦概念與人類實際生活不同,所以初學者很易會弄錯的。 而 index 的最大值就是 length - 1,而不是 length
  • [  和  ]   是左中括號和右中括號,用來括著 index

我們也可以取得一個陣列的長度,就是用一個陣列的 length 屬性,而且它是整數型態的。


表示方式:陣列的長度
array_name.length


我們就用上面定義了的 week_array 做例子,下面列出了 week_array 內所有資料的表示方式和它們的內容:
表示方式內容
week_array[0]"Monday"
week_array[1]"Tuesday"
week_array[2]"Wednesday"
week_array[3]"Thursday"
week_array[4]"Friday"
week_array[5]"Saturday"
week_array[6]"Sunday"
week_array.length7

陣列應用例子:
<script>
var student_name = new Array("Tom", "John", "Sam");
var num_of_student = student_name.length;
var student_age = new Array(num_of_student);
student_age[0] = 16;
student_age[1] = 18;
student_age[2] = 20;
document.write("There are " + num_of_student + " students.");
document.write("<br>First student : " + student_name[0]);
document.write(" ; Age : " + student_age[0]);
document.write("<br>Second student : " + student_name[1]);
document.write(" ; Age : " + student_age[1]);
document.write("<br>Third student : " + student_name[2]);
document.write(" ; Age : " + student_age[2]);
</script>


例子說明:
var student_name = new Array("Tom", "John", "Sam");
定義一個陣列,名稱是 student_name ,同時指定它的內容,分別是 "Tom", "John", "Sam" 三個字串型態的資料。緊記第一個資料的位置是 0,而這裏有 3 個資料,所以最後一個資料的位置就是 2 了。
var num_of_student = student_name.length;
定義一個變數,名稱是 num_of_student ,然後將指定它的內容,內容是 student_name.length ,因為 student_name 陣列內有 3 個資料, 所以 student_name.length 的值就是 3 了,而且它是整數型態,因此 num_of_student 是整數型態的變數。
var student_age = new Array(num_of_student);
定義一個陣列,名稱是 student_age ,同時指定它的長度,長度為 num_of_student 的內容,亦即是 3 了,所以 student_age 就是一個有 3 個資料的陣列。

student_age[0] = 16;
student_age[1] = 18;
student_age[2] = 20;

將 student_age 陣列中的第一個資料的內容指定為 16 ,第二個資料指定為 18 ,第三個資料指定為 20 。


二維及三維陣列:
相信大家都知道用陣列的好處,就是容易管理大量變數,如果變數再多的話,可以考慮使用二維、三維甚至更多維的陣列。
之前提及的其實只是一維陣列,一維陣列內的每個元素都是相同型態的變數,但如果一個陣列的每個元素又是陣列的話,就變成陣列內有陣列,即是二維陣列了。宣告一個二維陣列不須要特別的寫法,只須運用 for 迴圈便可。

程式範例(二維及三維陣列):
宣告一個二維陣列, size 是 2 x 3, 同時指定它的數值
<script>
// Define a 2-D array
var d1 = 2;
var d2 = 3;
var array2d = new Array(d1);
for (i = 0 ; i < d2 ; i++) {
array2d[i] = new Array(d2);
}
// assign values to array2d and display its content
for (i = 0 ; i < d1 ; i++) {
for (j = 0 ; j < d2 ; j++) {
array2d[i][j] = i + j
document.write("<br>array2d[" + i + "][" + j + "] = " + array2d[i][j])
}
}
</script>


例子說明:
var array2d = new Array(d1)

定義 array2d 陣列,長度為 d1,就產生了 array2d[0] , array2d[1]。
array2d[i] = new Array(d2)

為 array2d 的每一個元素,再產生一個陣列,長度為 d2,產生出 array2d[0][0] , array2d[0][1] , array2d[0][2] , array2d[1][0] , array2d[1][1] , array2d[1][2]。
array2d[j] = i + j

上例所指定 array2d 陣列的內容,如下表:
array2d[j]j = 0j = 1j = 2
i = 0
0
1
2
i = 1
1
2
3


宣告三維陣列也是用相似的寫法:
程式範例(二維及三維陣列):
宣告一個三維陣列, size 是 2 x 3 x 4

<script>
// Define a 3-D array
var d1 = 2;
var d2 = 3;
var d3 = 4;
var array3d = new Array(d1);
for (i = 0 ; i < d2 ; i++) {
array3d[i] = new Array(d2);
for (j = 0 ; j < d3 ; j++) {
array3d[i][j] = new Array(d3);
}
}
// assign values to array2d and display its content
for (i = 0 ; i < d1 ; i++) {
for (j = 0 ; j < d2 ; j++) {
for (k = 0 ; k < d3 ; k++) {
array3d[i][j][k] = i + j + k
document.write("<br>array3d[" + i + "][" + j + "][" + k +"] = " + array3d[i][j][k])
}
}
}
</script>

例子說明:
array3d[j][k] = i + j + k

上例所指定 array3d 陣列的內容,如下表:

array[j][k]k = 0k = 1k = 2k = 3
i = 0j = 00123
j = 11234
j = 22345
i = 1j = 01234
j = 12345
j = 23456


排列數目:
程式範例(以數目大小由小至大排列):
<script>
function sort_num(a , b){
return(a - b);
}
var age = new Array(4000, 300 , 20 , 1 , -5);
age.sort(sort_num);
document.write(age)
</script>


例子說明:
sort_num(a , b)
這個函數就是以數目大小來排列的關鍵了, 這種方法只有 NN3+ 和 IE5+ 支援, 不過站長始終不明白為何做這麼簡單的工作也要寫這些毫無意義的東西, 因此大家還是要死記這種方法。 參數 a 和 b 決定了 sort() 方法要由小至大, 還是大至小排列, 如果你要由大至小排列, 就將函數內寫成 return(b-a)。


程式範例(以數目大小由大至小排列):
<script>
function sort_num(a , b){
return(b - a);
}
var age = new Array(4000, 300 , 20 , 1 , -5);
age.sort(sort_num);
document.write(age)
</script>



程式範例:
就算陣列內的元素是數目型態, sort() 方法也會以 ASCII 碼來排列
<script>
var age = new Array(4000, 300 , 20 , 1 , 5);
age.sort();
document.write(age)
</script>

沒有留言:

張貼留言