iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 6

【Day5】不是八卦陣的有序集合:陣列

陣列算是一種「特殊物件」,可以在裡面放入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']

陣列可以使用的方法列舉如下:

  • pop():取出陣列尾端元素。
  • push():新增元素至陣列的尾端。
  • shift():取出陣列的第一個元素
  • unshift():新增元素至陣列開端。
//建立一個華山(huaShan)的陣列
var huaShan = ['東邪','西毒','北丐','南帝','中神通'];
huaShan.pop();
console.log(huaShan);
//['東邪','西毒','北丐','南帝'] huaShan.pop()取出了陣列的最後一個元素
huaShan.push('中頑童');
console.log(huaShan);
//['東邪','西毒','北丐','南帝','中頑童'];
huaShan.shift();
console.log(huaShan);
//['西毒','北丐','南帝','中頑童']

huaShan.unshift('東方不敗');
//['東方不敗','西毒','北丐','南帝','中頑童'];
//東方不敗跑錯棚了

學會陣列與物件之後,我們就可以開始用JavaScript來處理一些網頁上擷取來的資料,就像學內功要先學打坐練習呼吸一樣。


上一篇
【Day4】不可貌相的JS變數型別:如何練成一個物件
下一篇
【Day6】如何檢查型別
系列文
JavaScript老學徒筆記—馬步篇35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言