# 陣列與物件整合運用 ## 陣列與物件混合應用 * 在陣列與物件混和情境下,陣列裡面可以放多個物件,在物件中再寫詳細資料,如下範例: ```javascript= let market = [ { bossName: "Tom", bananaNum: 6, appleNum: 5, isClose: true }, { bossName: "John", bananaNum: 4, appleNum: 5, isClose: false } ] console.log(market); //讀取整個market陣列資料 ``` ![](https://i.imgur.com/T37Ij4Z.png) ## 陣列與物件混合讀取教學 * 接續上面程式讀取陣列位置0內的整個物件,用中括號尋找物件 ```javascript= console.log(market[0]); //讀取物件資料 ``` ![](https://i.imgur.com/i382FKE.png) * 讀取陣列[0]內的bannaNum屬性,用點號.尋找屬性 ```javascript= console.log(market[0].bossName); ``` 印出值為:![](https://i.imgur.com/AWuZjAD.png) ## JSON格式 [wiki百科介紹](https://zh.wikipedia.org/wiki/JSON) * 為何要有JSON格式:不同結構的資料庫之間需要有共通格式做傳遞 * 應用領域:JSON使用在JavaScript、Java、Node.js應用的情況比較多,PHP、C#等開發的WEB應用主要還是使用XML。 * 安裝JSON套件:[JSONVUE](https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW)。套件使用目的:可以將資料做友善的排版。 * 下載JSON資料範例: 1. :[電動車資訊.json](https://cdn.fs.teachablecdn.com/OPXa0mREqO3hpSLfVnQw),其為陣列格式(內包物件)。將陣列資料全部複製後,全部貼在all.js宣告變數的等號後面,在程式最後面加個分號。用console.log確認是否有儲存成功。 2. 前往網站JSON資料集,右鍵檢視原始碼,ctrl+a & ctrl+c貼到主控台的宣告變數等號後面,同樣最後面加上分號。 * JSON陣列格式中每一筆資料都是物件,讀取方式為陣列變數名稱[0]陣列第0筆資料,.後面為屬性格式。 ```javascript= console.log(data[0].kind); ``` ## 物件裡面包物件 * 當物件內的資料有更多詳細資訊時,可以使用物件包物件方式,注意裡面那層的物件需使用冒號而不是等號,且使用逗號隔開。 * 讀取資料使用點號法。 ```javascript= let home = { motherStatus: { age: 18, name: "Amy" }, fatherStatus: { age: 20, name: "Sam" }, dogs: 3 } console.log(home.motherStatus.age); console.log(home.fatherStatus.name); console.log(home.dogs); ``` ![](https://i.imgur.com/D0ikEAU.png) * 接續上程式篩選出自己想要的資料格式,並賦予到特定變數上 ```javascript== let arry=home.motherStus; console.log(arry); ``` ## 物件搭配if練習 * 範例一量測體溫: ![](https://i.imgur.com/SGRYPeO.png) * 先宣告湯姆狀態的物件,湯姆體溫可以直接在物件大括號內寫入也可以另外用點號法寫入資料。 * 開始寫判斷式,依據條件判斷可以或不可以進入且寫入屬性status的值。 * 最後再印出物件TomStatus。 ```javascript= 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); ``` * 假如客人的數量很多,可以改寫為宣告陣列,寫入第N筆資料,使用console.log確認資料是否寫入成功。開始寫判斷式if、else,代入您不得進入或您可以進入於status屬性和console.log。 * 最後確認陣列是否正確。可以修改變數degree的值或是陣列[N]來練習。 * 後續資料變多時,可以先處理第一筆資料,再用語法解決其他資料。 ```javascript= let peopleStatus = [ { name: "Tom", age: 30, status: "" }, { name: "Amy", age: 27, status: "" } ] peopleStatus[1].degree = 37.6; console.log(peopleStatus[1]); if (peopleStatus[1].degree >= 37.5) { peopleStatus[1].status = "您不得進入"; console.log("您不得進入") } else { peopleStatus[1].status = "您可以進入"; console.log("您可以進入") } console.log(peopleStatus[1]); ```
{"metaMigratedAt":"2023-06-16T16:31:50.749Z","metaMigratedFrom":"Content","title":"陣列與物件整合運用","breaks":true,"contributors":"[{\"id\":\"e4b9e14c-92e0-407c-8e66-01aba7c9f9e6\",\"add\":3125,\"del\":290}]"}
Expand menu