iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

溫故知新 JavaScript系列 第 13

Day13- 關於物件

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200926/20129439XtJ0cOaSID.jpg
HI~今天要進入認識物件的環節囉,前面提到陣列是把一群有相同性質的資料,用同一個變數名稱集合起來的方法,但是...如果今天不想只能單純的記錄一種資料型態我們還想要紀錄更多事情呢?這時就可以用物件的方式包裝起來。

我們用莊園的概念來打個比方,在莊園裡頭有好幾座農場,今天我們要記錄這些農場裡的所有農夫、狗的名字、小雞的數量等等用陣列的表示方式會是這樣:

陣列型態儲存

var farmer = '老王'; 
var dogs   = ['小黑','汪汪','雪寶','高飛'];
var chick  = 20;
var apple  =[10,30,60];

前面有提到這是一座莊園有好多農場集合起來的,用上面的方法根本不知道老王是哪一座農場的農夫,況且如果今天有 100 座農場我們不就要建立一大堆的陣列,每個陣列資料屬於哪座農場也會搞不清楚。

物件的語法

因此我們可以改用物件的方式去封裝,讓每一個物件去記下更多的資訊,因此這邊改用物件的方式儲存起來是這樣的,如此一來我就可以知道 farm1 這座農場裡面有哪些屬性,每個屬性的值又是什麼囉。

var farm1 = {
    farmer: '老王',
    dogs: ['小黑','汪汪','雪寶','高飛'],
    chick: 20,
    apple:[10,30,60]
}

// dogs 屬性名稱
// ['小黑','汪汪','雪寶','高飛'] 屬性值

物件資料的取得

我們要取得這份物件資料的農夫姓名可以用這樣的語法,代表我要在這座農場取得農夫這個屬性的值。

farm1.farmer  //farm1內的farmer

那如果要取得的是第一隻狗的名字呢?
那就是運用上一節我們提到的用中括號再加上在陣列中的順序編號,如下方語法

console.log(farm1.dogs[0]) // 取得小黑

物件資料的變更

今天我們還可以變更裡面的數值,假設如果這座農場的雞在將來增加到 100 隻那就用下面的語法去做變更

console.log(farm1.chick = 100)// 小雞數量變100

以上就是關於物件的介紹,以及我們怎麼去取得與變更物件的資料,明天來講講物件與函式可以如何搭配運用囉!


上一篇
Day12- 關於陣列
下一篇
Day14- 物件更多的運用技巧(函式與陣列)
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言