陣列與物件混合應用
而前兩天我們學到陣列和物件
今天要講的就是他們混合的應用
這邊先舉一個在陣列裡面放物件的例子
假設有兩間不同的店 店裡有各種資訊 就可以以這樣的方式來寫
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的部分