[day-7] JS 陣列與物件混合應用

陣列與物件混合應用

而前兩天我們學到陣列和物件
今天要講的就是他們混合的應用

這邊先舉一個在陣列裡面放物件的例子
假設有兩間不同的店 店裡有各種資訊 就可以以這樣的方式來寫

let market =[
    {
       bossName:"Tom",
       bananaNum:6,
       appleNum:5,
       isClose:false
    },
    {
       bossName:"joun",
       bananaNum:9,
       appleNum:8,
       isClose:false
    }
]

console.log(market);

傳出的結果就會如下

如果這時候用length來查詢陣列的數量 則會顯示兩筆(一整個物件算一筆資料)

陣列與物件混合讀取

主要應用陣列的[中括號] 加上物件.的方式來去撈到選取的資料

let market =[
    {
       bossName:"Tom",
       bananaNum:6,
       appleNum:5,
       isClose:false
    },
    {
       bossName:"joun",
       bananaNum:9,
       appleNum:8,
       isClose:false
    }
]

console.log(market[0].appleNum) 
//這樣就能抓到market陣列的第一筆資料內appleNum屬性

Json格式介紹

上面基礎的概念了解之後 可以開始認識JSON這個格式
因為通常我們會有很多個資料庫 每個資料庫結構都不一樣
當要互相傳遞的時候 就需要一個共通的格式
那這個共通傳遞的部分就很有多人會使用JSON格式來去傳遞到別人的伺服器去
其他人就可以很友善的去解析這個資料
目前廣為流傳在後端傳遞資料用

那JSON格式的資料大概就會長這樣
跟我們前面學的陣列物件差不多 中括號和大括號
不過在大括號裡面的資料都會用雙引號包起來JS裡物件則不需要

可以到各政府資料集網站去找到JSON檔來練習
ex:高雄政府資料集

JSONView 推薦

這邊也建議大家可以安裝JSONView這個chrome的插件
可以讓大家更好去閱讀JSON的格式
chrome插件 JSONView 官方載點

物件裡面也可以包物件

當物件裡面的屬性 有更詳細的資料時
就會在物件裡面 再包一個物件
例如以下 一個家裡面 有媽媽爸爸狗 但媽媽跟爸爸 分別又有更詳細的資料

let home ={
    motherStatus:{
        age:30,
        name:"Mary"
    },
    fatherStatus:{
        age:38,
        name:"Tom"
    },
    dogs:3
};

物件包物件讀取

就是一樣從物件利用.進入物件屬性後再用.進入屬性

console.log(home.motherStatus.age); 
//回傳home物件裡的motherStatus物件裡的age 結果為30

console.log(home.fatherStatus.name); 
//回傳home物件裡的fatherStatus物件裡的name 結果為Tom

物件和陣列混用讀取

就是遇到物件時用.遇到陣列時用[第幾筆]
則可以撈出要的資料

console.log(home.motherStatus[2].age) 
//home變數的motherStatus物件陣列裡第三筆物件資料的age屬性

如何篩選出自己想要的資料格式，並賦予到特定變數上

其實就是跟前面撈資料一樣的做法
只是宣告一個變數來接資料

let ary = home.motherStatus; //這樣就把資料接進ary變數裡了

console.log(ary);

物件搭配if練習

可以透過之前if的練習來加入物件的元素

let tomStatus = {
  name: 'Tom',
  age: '30',
  status: '',
}

tomStatus.degree = 36.5

if (tomStatus.degree >= 37.5) {
  console.log('您不得進入')
  tomStatus.status = '您不得進入'
} else {
  console.log('您可以進入')
  tomStatus.status = '您可以進入'
}

console.log(tomStatus)
console.log(tomStatus.status)

而這些資料設計都要依照情境自己來判斷來設計

陣列物件搭配 if 流程判斷

以上個題目來繼續
假如這次不只有一位客人

let peopleStatus = [
    {
        name:"Tom",
        age:"30",
        status:""
     },
     {
        name:"Mary",
        age:"32",
        status:""
     }
]

peopleStatus[0].degree = 36.5

if (peopleStatus[0].degree >= 37.5) {
  console.log('您不得進入')
  peopleStatus[0].status = '您不得進入'
} else {
  console.log('您可以進入')
  peopleStatus[0].status = '您可以進入'
}

console.log(peopleStatus[0])
console.log(peopleStatus[0].status)

而這邊教的都是先了解一筆資料的處理是怎麼回事
之後會再教各位一次處理多筆資料 100、1000筆的資料時
又會有不同的方法
先有觀念之後再了解多筆資料的處理也會更好上手

以上是本章的內容～
下一張會是講解函式function的部分