# 第三堂：物件跟陣列資料處理之術
## 開課提醒
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)，例如：哪裡用到物件、陣列、陣列方法、物件方法與取值概念
Sign in with Wallet
Connect another wallet