陣列算是一種「特殊物件」,可以在裡面放入0到多個元素,裡面的元素可以是字串、數字等原始型別資料、也可以是另一個陣列或另一個物件。與物件的差別在於,陣列是有順序的集合,每個元素都有其索引值,並且可以用length的屬性來取得陣列的長度。
普遍的做法是採用「陣列實字」(Array Literal)的方式:
//建立一個華山論劍(huaShan)的陣列
var huaShan = ['東邪','西毒','北丐','南帝','中神通'];
console.log(huaShan.length);
//5 huaShan這個陣列有5個元素,所以長度為5
console.log(huaShan[0]);
//'東邪' 陣列的索引值從0開始算,所以第一個元素的索引值為0。
console.log(huaShan[1]);
//'西毒' 陣列的索引值從0開始算,所以第二個元素的索引值為1。
這樣也可以建立陣列:
//建立一個華山論劍(huaShan)的「空」陣列
var huaShan = [];
huaShan[0] = '東邪';
huaShan[1] = '西毒';
huaShan[2] = '北丐';
huaShan[3] = '南帝';
huaShan[4] = '中神通';
console.log(huaShan);
// [object Array] (5) ["東邪","西毒","北丐","南帝","中神通"]
console.log(huaShan.length);
// 5
還有一種方式是透過new關鍵字來建立物件:
//建立一個江南七怪(sevenMonster)的陣列
var sevenMonster = new Array();
sevenMonster[0] = '柯鎮惡';
sevenMonster[1] = '朱聰';
sevenMonster[2] = '韓寶駒';
sevenMonster[3] = '南希仁';
sevenMonster[4] = '張阿生';
sevenMonster[5] = '全金發';
sevenMonster[6] = '韓小瑩';
console.log(sevenMonster.length);
// 7
陣列並不需要連續指定,沒被指定的其索引值為 undefined。
就像江南七怪在大漠時,五哥「笑彌陀」張阿生被「銅屍」陳玄風殺死,只剩六怪,但是排序是不變的,不會六弟變五哥,七妹變六妹,五哥空出來的位置就變成'undefined'。
//建立一個江南七怪(sevenMonster)的陣列,但是五哥「笑彌陀」張阿生被「銅屍」陳玄風殺死,只剩六怪
var sevenMonster = new Array();
sevenMonster[0] = '柯鎮惡';
sevenMonster[1] = '朱聰';
sevenMonster[2] = '韓寶駒';
sevenMonster[3] = '南希仁';
//但是五哥「笑彌陀」張阿生被「銅屍」陳玄風殺死,sevenMonster[4],不予指定。
sevenMonster[5] = '全金發';
sevenMonster[6] = '韓小瑩';
console.log(sevenMonster.length);
// 7
console.log(sevenMonster);
//['柯鎮惡','朱聰','韓寶駒','南希仁','undefined','全金發','韓小瑩'];
//sevenMonster第五個元素,也就是sevenMonster[4]的元素變成'undefined'
我們可以利用 .length 的屬性來取得陣列的長度,或利用它來改變陣列的長度。
如果length設得比原本的陣列長度還要長,多出來的元素將以'undefined'填補。如果length設的比原本陣列長度少,則多出來的元素將被刪除,即使之後length設回原來長度,被刪掉的元素也不會恢復,而會以'undefined'取代。
//建立一個江南七怪(sevenMonster)的陣列
var sevenMonster = ['柯鎮惡','朱聰','韓寶駒','南希仁','張阿生','全金發','韓小瑩'];
console.log(sevenMonster.length); // 7
//江南七怪後來被陳玄風及楊康分別殺害,只剩柯鎮惡一人。
sevenMonster.length = 1;
console.log(sevenMonster); // ['柯鎮惡'];
//人死不能復生,即使再把江南七怪(sevenMonster)的length設為7,後面的六位大俠也都是'undefined'
sevenMonster.length = 7;
console.log(sevenMonster);
//['柯鎮惡','undefined','undefined','undefined','undefined','undefined','undefined']
陣列可以使用的方法列舉如下:
//建立一個華山(huaShan)的陣列
var huaShan = ['東邪','西毒','北丐','南帝','中神通'];
huaShan.pop();
console.log(huaShan);
//['東邪','西毒','北丐','南帝'] huaShan.pop()取出了陣列的最後一個元素
huaShan.push('中頑童');
console.log(huaShan);
//['東邪','西毒','北丐','南帝','中頑童'];
huaShan.shift();
console.log(huaShan);
//['西毒','北丐','南帝','中頑童']
huaShan.unshift('東方不敗');
//['東方不敗','西毒','北丐','南帝','中頑童'];
//東方不敗跑錯棚了
學會陣列與物件之後,我們就可以開始用JavaScript來處理一些網頁上擷取來的資料,就像學內功要先學打坐練習呼吸一樣。