---
tags: JS 直播班 - 2021 春季班
---

# 第三堂：物件跟陣列資料處理之術

* 感謝後勤組上時間軸與大群討論伙伴
* [報到](https://rpg.hexschool.com/training/17/calendar) Code：`jEROVzJal1y1`

## 批改部分
1. 會在下週二前，改完全部的第一關主線任務
2. 下週二陸續改第二關主線任務，期間可以看[影音課程](https://courses.hexschool.com/courses/enrolled/1289881)補知識點
3. 想參考解答，可以到「[觀看其他同學攻略](https://rpg.hexschool.com/training/17/task/self)」
4. 學習上有問題可都透過 Slack 詢問

## 獎勵公布
* 做完四關主線任務，將送實體 JS 徽章

## 定義資料結構得仰賴陣列與物件

## 陣列
* 基本設定、讀取陣列、賦予新變數
* 抓取長度(length)、push、unshift、pop、slice

let colors = ["red","black","pink"];
let liaoLikeColor = colors[2];
let books = [5,30,400,100]
colors.splice(1,1); //起使位置,要往後刪除幾筆資料

## 物件
* 為什麼要有物件？以房子為例子
* 物件寫法教學
* 如何讀取物件的值、+=
* 新增、修改方式

//讀取物件屬性方法
let home = {
    motherName: "mary1",
    "001":"hello"
}
let a = 'motherName';
console.log(home[a]);

// 使用時機 001

## 陣列與物件使用時機
* 陣列使用時機：當資料需要使用`大量`且`同性質`的資料
* 物件使用時機：要描述一個東西對應的特徵和行為。

### 題目區

前鎮區有兩戶人家，第一戶家庭爸爸叫 Tom、兒子叫 Mark、第二戶家庭爸爸叫 John、兒子叫 Jack

//選項 A
let data = [
  {
    fatherName:"Tom",
    sonName:"Mark"
  },{
    fatherName:"John",
    sonName: "Jack"
  }
]
// 選項 B
let data = {
  father1Name:"Tom",
  son1Name:"Mark",
  father2Name:"John",
  son2Name: "Jack"
}

**一個水果攤有2種水果，香蕉有8個，蘋果有10個**

// 選項 A
let fruitStandData =[
  {
    fruitName:'banana',
    num: 8
  },
  {
    fruitName: 'apple',
    num: 10
  }
]
// 選項 B 
let fruitStandData ={
  fruitType: [
    {
      fruitName: 'banana',
      num: 8
    },
    {
      fruitName: 'apple',
      num: 10
    }
  ]
}

**Mark 有間旅館，房型有單人房與雙人房，並提供游泳服務**

//選項A
let hotelData = {
  singleRoomNormalDayPrice: 1380,
  singleRoomHolidayPrice: 1500,
  singleRoomName: "單人房",
  doubleRoomHolidayPrice: 2380,
  doubleRoomHolidayPrice: 2500,
  doubleRoomName: "雙人房",
  swimming: true,
  boss: "Mark"
}

//選項B
let hotelData = {
  items: [
    {
      
      normalDayPrice: 1380,
      holidayPrice: 1500,
      name: "單人房"
    },
    {

      normalDayPrice: 1380,
      holidayPrice: 1500,
      name: "雙人房"
    }
  ],
  swimming: true,
  boss: "Mark"
}

## 陣列與物件整合運用
* 安裝 [JSON view](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW)
* 感謝 [A wei](https://codepen.io/hong-wei/pen/OJbOLYB?editors=0011) 提供 [if 搭配物件寫法](https://whimsical.com/4oYtsHWjADWsieeNrjY1Xa)

### 資料集
* [高雄 open data](https://data.kcg.gov.tw/dataset?res_format=JSON)
* [充電站資料](https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json)
* [國中各校人數統計JSON](https://data.tainan.gov.tw/dataset/junior-number/resource/4f56ba22-0b13-4570-8be6-2d66483ffa5f)
* [台南景點資料](https://www.twtainan.net/data/attractions_zh-tw.json)
* [輕軌](https://api.kcg.gov.tw/api/service/get/4278fc6a-c3ea-4192-8ce0-40f00cdb40dd)
* 總共有幾個車站？
* [高雄里長](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)
* 顯示有幾個里長？
* 顯示每個里的里長姓名

## 搞懂 JSON 格式後，你可以看懂

* [Imgur 圖片服務上傳工具](https://apidocs.imgur.com/)、[Imgur API](https://apidocs.imgur.com/#c94c8719-fe68-4854-b96d-70735dd8b2bc)
* [公共運輸整合資訊](https://ptx.transportdata.tw/PTX/Service)、[公車運輸資料 API](https://ptx.transportdata.tw/MOTC#!/CityBus/CityBusApi_RealTimeByFrequency_UDP)
* [新聞 API](https://newsapi.org/)

## 第三關主線任務

* <a href="https://rpg.hexschool.com/training/17/task?type=detail&id=170" target="_top">第三關主線任務</a>