iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

溫故知新 JavaScript系列 第 14

Day14- 物件更多的運用技巧(函式與陣列)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200927/20129439uM0iKm9p5p.jpg
前面我們有提到物件內可以放變數還有陣列,其實物件內也能放一個函式如同以下寫法:

物件搭配函式

   var farm1 = {
        farmer: '老王',
        dogs: ['小黑','汪汪','雪寶','高飛'],
        chick: 20,
        duck:10,
        apple:[10,30,60],
        poultrytotal:function(){
            var num = farm1.chick + farm1.duck;
            console.log("農場的家禽數量有"+num +"隻");
           // "農場的家禽數量有30隻"
        }   
}

farm1.poultrytotal(); //執行物件內的函式寫法

在物件內加上函數的好處是這樣的頁面上不會散落一堆的變數與函數顯得雜亂無章,反而我們可以把網站上最常見的相關內容都包裝在物件內再去抓取函式執行。

物件搭配陣列

一個變數內不只能放一組物件,我們還能放10組甚至100組,這時候該怎麼做了?
那就是用陣列把物件包起來!,讓陣列內有多組物件像是以下語法:

   var farm1 =[
      {
        farmer: '老王',
        dogs: ['小黑','汪汪','雪寶','高飛'],
        chick: 10
        
      },
      {
        farmer: '小陳',
        dogs: ['老皮','小黃','恰恰','賤狗'],
        chick: 30,
      }
];

概念圖

陣列的物件取資料語法

那如果要取得這種陣列中又有物件的資料該怎麼做呢,假設我們要取得老王這位農夫的名字,是這樣寫的:

console.log(farm1[0].farmer) //老王

換個情境今天要知道的是第二個物件中名字叫做恰恰的這隻狗的名字,想一想該怎麼取得吧?

要取得的是恰恰這隻狗的名字語法如下,這邊就開始融合在陣列取值那篇文章的觀念了,我們需要知道怎麼取得陣列中的值,也要知道陣列中的順序是怎麼排的,所以取得語法如下:

console.log(farm1[1].dogs[2])  //恰恰

看到這邊感覺程式碼長得越來越可怕了也開始變得越來越長了,但唯一不同的是如果你從此系列文章的一開始跟到這章節,至少能稍微理解這些程式碼是在表達什麼,以及我們該怎麼取得裡面的資料並加以運用後面就要分享新的知識點囉,那就是程式中重要的控制判斷,明天見囉!


上一篇
Day13- 關於物件
下一篇
Day15- 控制判斷-比較運算子
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言