iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

草頭黃小姐的 30 天 JavaScript 自學小本本系列 第 9

Day 09 JavaScript:陣列

陣列

草頭黃小姐又來拉,今天要記錄陣列這個東西。
在 JavaScript 裡面陣列這個東西,英文叫做 Array。

那你會唱拔蘿蔔嗎?我們預備備唱~(啊不是唱歌課拉 XD)
想像一個蘿蔔一個坑,有一排蘿蔔坑,每個坑塞滿長得不同的蘿蔔,啊我是不是又複雜化了!

我們換個例子,你們應該都看過有一排的藥盒,藥盒上面寫星期一到五,並且依序放數要吃什麼藥。

那 JavaScript 的陣列又該怎麼寫呢?那我們先打開 JS Bin,先使用 var 來定義變數,這次變數就叫 list

var list = []

記得陣列要用中括號[]包住,想像跟藥盒長一樣。在這中括號裡面可以放任何東西,例如數字 1,2,3 或是字串衛生紙手帕,那我們這裡的字串就代入:

var list = [ 1, 2, 3, 4, 5];

陣列中共有幾個元素

如果我們要用程式幫我們算這個陣列有幾個元素,可以怎麼寫呢?
在 JavaScript 可以用 length 這個字,專門用來算這個陣列有幾個元素。
再用 console.log 來檢視這個 list 的 length,便可以算出該陣列的元素數量。

var list = [ 1, 2, 3, 4, 5];
console.log (list.length);

陣列中挑出指定元素

如果我們要指定某個元素,我們會用以下語法

var list = [ 1, 2, 3, 4, 5];
console.log (list[2]);

第二行指得是在這個陣列找出第二個元素,那我們來在 JS bin 跑一次看看:

咦?這裡是否有點怪怪的,明明是要找第二個元素,為什麼會跑出 3 呢?
這裡要提醒大家,在許多程式語言,包含 JavaScript,他們數數的起點都是從 0 開始算起,所以這裡取 0, 1 ,2,這裡的 2 其實是指第三個元素。這也是為什麼會跑出 3。

那如果我們要拿最後一個元素呢?

var list = [ 1, 2, 3, 4, 5];

你可以有接下來的寫法:

var list = [ 1, 2, 3, 4, 5];
console.log(list[list.length-1])

只得就是印出 list 裡面的陣列元素長度後得到 5 個,然後我們指引去要拿後一個的話,用 -1 的方式,因為元素的索引值會從 0 開始算,這樣就能取得最後一個

陣列中改變某一元素

我們的原先陣列長這樣:

var list = [ 1, 2, 3, 4, 5];

我們想把 3 換成字串 孫悟空,我們可以這麼做:

list[2]="孫悟空";

剛有提到在程式語言裡,數數都是從 0 開始數的,於是在陣列裡的 3 就是我們要的元素,因此我們後面寫下等於孫悟空,就得字串要用引號包住,那我們丟到 JS bin 上看看,會變成怎麼樣?

var list = [1, 2, 3, 4, 5];
list[2]="孫悟空";

console.log(list);

因此我們印出:

是不是就順利改變了呢?

如果你在最後想加入新的元素

我們來宣告一個陣列

var list = [1, 2, 3, 4, 5];
list.push("keddie");

只要用 push 後面加入想加入的值即可:

如果你在一開始想加入新的元素

var list = [1, 2, 3, 4, 5];
list.unshift("keddie");

console.log(list);

用 unshift 即可把元素加在最前面。

如果你想擠掉某個元素

var list = [1, 2, 3, 4, 5];
list.pop();

console.log(list);

用 pop 這個方法,可以擠掉最後一個元素

另外一種抽法從頭開始抽

var list = [1, 2, 3, 4, 5];
list.shift();

console.log(list);

用 shift 就會拔掉第一個元素

今天的介紹就到此為止,希望大家還能明白我拙劣的說明:)


上一篇
Day08 JavaScript :基礎班的函數
下一篇
Day 10 JavaScript: for 迴圈
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30

尚未有邦友留言

立即登入留言