---
# System prepended metadata

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

---

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

## 開課提醒
1. 錄影
2. [第二週週報](https://liberating-turtle-5a2.notion.site/c9436099febf453182a212fbc0b9b7ab?pvs=4)


## 今日上課知識點
1. 陣列
2. 物件
3. 陣列與物件整合運用
4. JSON

---
## 陣列 Array
* ✨陣列寫法
```javascript
let colors = ["red","black","pink"];
console.log(colors);
```
* ✨length：抓取陣列長度 
```javascript
console.log(colors.length);
```
* ✨push()：在陣列末端加入一個新的值
```javascript
colors.push('blue');
```
* ✨讀取到特定的值
```javascript
const colors = ['red', 'yellow', 'black'];

索引值：           0        1        2

console.log(colors[1]);
```

* 在指定位置賦予值
```javascript
colors[10] = 'white';
```

* 取得陣列最後一個值
```javascript
colors[colors.length-1];
```

## 抽考一
[31~35題目](https://chalk-freedom-ec6.notion.site/Part-1-31-35-040557b80c30419385242d27da5da443)
<!-- 解答：23321 -->


## 物件 Object
* ✨物件寫法
```javascript
const house = {}
```

👀 觀察跟陣列不同的地方
1. 物件用{}
2. 前面是「屬性」，後面是「值」
3. 描述細節或特徵
4. 沒有順序（沒有索引值）

* ✨新增物件
```javascript
const obj = {}
obj.age = 18

console.log(obj);
```

* ✨物件取值
```javascript
const obj = {
    myName: 'yinmin',
    money: 3000,
    123: '456'
}
```
方法一：點記法
```javascript
console.log(obj.myName);
console.log(obj.123);
```
方法二：括弧記法
```javascript
console.log(obj['myName']) 
console.log(obj['123']) 
```
> 用在「特殊字元」或是「帶入變數」時


## 抽考二
[36~40題目](https://chalk-freedom-ec6.notion.site/Part-2-36-40-b24015aa677540f48a23be073fb37219)
<!-- 解答： 31223 -->


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


### 題目區

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

``` javascript
//選項 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個**
``` javascript
// 選項 A
let fruitStandData =[
  {
    fruitName:'banana',
    num: 8
  },
  {
    fruitName: 'apple',
    num: 10
  }
]
// 選項 B 
let fruitStandData ={
  fruitType: [
    {
      fruitName: 'banana',
      num: 8
    },
    {
      fruitName: 'apple',
      num: 10
    }
  ]
}

```

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

```javascript
//選項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 Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=zh-TW)

## JSON
是一種格式，用來做資料交換，檔案大小輕量
為什麼需要 JSON？

JSON 好用網站：
[JSON Editor online](https://jsoneditoronline.org/)，可以將得到的資料轉成 JSON 格式

### 資料集
* [高雄 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)
* [TDX API](https://tdx.transportdata.tw/api-service/swagger)
* [輕軌](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/)

## 抽考三
* [41~45題目](https://chalk-freedom-ec6.notion.site/Part-3-41-45-8e15acb6090b412d896c844b7f6f7801)
<!-- 解答：31332 -->

---
## 本週任務
1. 主線任務
1. 小組任務
1. 週末任務：程式碼解讀
請描述此段[程式碼](https://codepen.io/hexschool/pen/VwmGZBd?editors=1010)，例如：哪裡用到物件、陣列、陣列方法、物件方法與取值概念