iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

溫故知新 JavaScript系列 第 12

Day12- 關於陣列

https://ithelp.ithome.com.tw/upload/images/20200925/20129439L18AcWoNDl.jpg
什麼是陣列呢,我的解讀是這樣的把一群有相同性質的資料,用同一個變數名稱集合起來!
啥!我知道上面那段話講了還是讓人聽不太明白,所以我最喜歡用比喻來說明了,拿上一篇的計算機來說我們是不是要知道漢堡的價格就得先建立一個漢堡的價格變數

 var hamprice = 30;

但是如果今天速食店不是只有一種口味的漢堡,還有我最愛吃勁辣雞腿堡、雙層牛肉吉事堡、大麥克,那不就慘了...每一種口味都要建立一個新的變數像是這樣

var hamprice_1 = 30 //大麥克
var hamprice_2 = 60 //勁辣雞腿堡
var hamprice_3 = 80 //雙層牛肉吉事堡

在最前面我們提到過每一個變數都會佔用到一個記憶體空間,而且變數也經常會被重複提取使用,如果這樣做的話不但會佔用很多的記憶體空間,也會讓整個網頁的程式碼變得非常冗長又凌亂於是我們可以把同樣是漢堡的這個品項用陣列集合起來。

陣列語法

var hamprice =[30,60,80] //漢堡價格的陣列

這樣一來我們就把所有品項的漢堡價格透過陣列存放起來囉!
但是又該怎麼取用陣列的數值呢,在程式的世界裡所有的計算都是從 0 開始的,所以這個陣列裡面位置的編號也是從 0 開始,比方說我們要取得陣列中 30 與 80 這兩個數字,陣列寫法如下

// 取陣列第一個數值
var hamprice =[30,60,80]
var ham_chickens = hamprice[0];
console.log(ham_chickens);

// 取陣列第三個數值
var ham_beef = hamprice[2];
console.log(ham_beef);

就如同上面範例,取值只需要在變數名稱後面用中括號內再放進那個數值的位置就可以了,這樣我們就不用每一個口味的漢堡就再建立一次變數。

取得陣列長度

有時候我們也需要整個資料到底有多少筆資料,此時就是加入 .length 語法像是下方這樣:

console.log('漢堡的價格有'+ hamprice.length +'種'); 
//"漢堡的價格有3種"

增加陣列 push

還有一種情況就是速食店之後也會推出新的漢堡品項呀,如果要增加新的品項價格怎麼辦呢?這樣則是用 .push() 這語法。

hamprice.push(100);
console.log(hamprice);

直接看陣列應用各種語法 DEMO

以上就是關於陣列的分享囉,下一期會來介紹在 JS中也是很重要的概念,那就是物件。


上一篇
Day11- 來做一個簡易計算機吧 -下集
下一篇
Day13- 關於物件
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言