---
tags: JS 直播班 - 2022 秋季班
---
# 第三堂：物件跟陣列資料處理之術

* 記得錄影
* 第四週主線任務提早開啟！

## 獎勵公布
* 下週將公布部分完賽獎項

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

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

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

### 問答挑戰 1
* [小組填答區](https://forms.gle/qzQmr1MNQyMrZbH78)
* [31~35](https://chalk-freedom-ec6.notion.site/Part-1-31-35-040557b80c30419385242d27da5da443)

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

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

// 使用時機 001

### 問答挑戰 2
* [小組填答區](https://forms.gle/qzQmr1MNQyMrZbH78)
* [36~40](https://chalk-freedom-ec6.notion.site/Part-2-36-40-b24015aa677540f48a23be073fb37219)
## 陣列與物件使用時機
* 陣列使用時機：當資料需要使用`大量`且`同性質`的資料
* 物件使用時機：要描述一個東西對應的特徵和行為。

### 題目區

前鎮區有兩戶人家，第一戶家庭爸爸叫 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)

### 資料集
* [高雄 open data](https://data.kcg.gov.tw/dataset?res_format=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)
* 總共有幾個車站？
* [2021 前端薪資調查，共 450 多份](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)、[摘要圖表](https://docs.google.com/forms/d/e/1FAIpQLScJfMnHg27iDUG3aAecClJQMudzxiLpXsHfMXkhmDKTYKybcA/viewanalytics)
* [高雄里長](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://data.kcg.gov.tw/dataset/kcgoa-00000580-930/resource/99b51a03-7c0d-4b8f-a7f9-967872bc88ef)
* [新聞 API](https://newsapi.org/)

### 問答挑戰 3
* [小組填答區](https://forms.gle/qzQmr1MNQyMrZbH78)
* [41~45](https://chalk-freedom-ec6.notion.site/Part-3-41-45-8e15acb6090b412d896c844b7f6f7801)

## 第三關主線任務

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

## 週末任務

請描述此段[程式碼](https://codepen.io/hexschool/pen/VwmGZBd?editors=1010)，哪裡用到物件 push 與取值概念、寫第四關主線任務破關流程