# 第三週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`
## :mag_right: 陣列與物件的功能
```
運用陣列、物件可定義資料結構，概念類似於 Excel，也能篩選、排序資料...。
```
## :mag_right: 學習陣列與物件的目的
### 假設手上有多筆變數資料，該如何更有效率去管理？
````javascript =
let color1 = "yellow";
let color2 = "pink";
let color3 = "red";
...
...
...
````
## :mag_right: 陣列
### :dart: 結構
- **順序(序列)**：用來取得資料的「位置」
- **值**：有不同型別
### :dart: 宣告陣列 (基本樣式)
```javascript =
let colors = ["yellow", "pink", "red"];
```
- 陣列適用於**集合**資料
- 陣列內的每一筆都是「型別資料」
### :dart: 陣列取值
```javascript =
let colors = ["yellow", "pink", "red"];
console.log(colors[0]); // 讀取到第1筆，"yellow"
console.log(colors[1]); // 讀取到第2筆，"pink"
console.log(colors[2]); // 讀取到第3筆，"red"
// 在陣列中，第一筆資料是由 0 開始起算的
```
### :dart: 陣列賦值
```javascript=
array.push({hobby: 'go shopping'});
//array.push() // method 方法
//push() 是專門給陣列用的方法，資料放在陣列最後一筆
```
### :dart: 陣列長度
```javascript =
let colors = ["yellow", "pink", "red"];
console.log(colors.length); // 回傳 3
反推：
console.log(colors[colors.length]);
// 回傳 undefined，因為 3 代表陣列中第四筆資料，目前未查詢得到
```
### :dart: 陣列長度----抓陣列中最後 1 筆資料
```javascript =
let colors = ["yellow", "pink", "red"];
console.log(colors[colors.length-1]); // 回傳 "red"
```
### :dart: 修改陣列：push、unshift、pop、splice
:::warning
:warning: 由於陣列是有**序列性**的結構，因此輸入的資料也有**順序性**。
:::
#### :one: push(); 最後方、新增
```javascript =
let colors = ["yellow", "pink", "red"];
colors.push("blue");
console.log(colors);
// 回傳 ["yellow", "pink", "red", "blue"]
```
#### :two: unshift(); 最前方、新增
```javascript =
let colors = ["yellow", "pink", "red"];
colors.unshift("green");
console.log(colors);
// 回傳 ["green", "yellow", "pink", "red"]
```
#### :three: pop(); 最後方、刪除
```javascript =
let colors = ["yellow", "pink", "red"];
colors.pop("red");
console.log(colors); // 回傳 [yellow", "pink"]
```
#### :four: splice(); 指定位置、刪除
```javascript =
let colors = ["yellow", "pink", "red"];
colors.splice(1, 1); // splice(指定資料的位置, 數量)
console.log(colors); // 回傳 [yellow", "red"]
//適用於刪除資料中隨機一筆的位置，例如：todolist、DOM
```
:::success
:bulb: **使用 push 或 unshift 的時機？**
- **push:** 要指定新增的資料會出現在最上頭的，**例如：最新消息**
- **unshift:** 要指定新增的資料在最後一筆的，**例如：排名、搶頭香**
:::
## :mag_right: 物件
### :dart: 結構
- **屬性(key)**：用來取得資料的「位置」
- **值(value)**：有不同型別
```
在物件內，沒有順序性，只有屬性名稱與值。
```
### :dart: 宣告物件
```javascript =
let personal = {
// 屬性 值(value)
name: "廖洧杰",
price: 3000,
height: 179,
weight: 68,
}
```
**使用時機：記述詳細資訊**
### :dart: 讀取物件的屬性 (造訪資料)
```javascript =
let personal = {
// 屬性 值(value)
name: "廖洧杰",
price: 3000,
height: 179,
weight: 68,
}
console.log(personal.name) // "廖洧杰"
console.log(personal.height) // 179
```
### :dart: 新增物件的屬性
```javascript =
let personal = {
// 屬性 值(value)
name: "廖洧杰",
price: 3000,
height: 179,
weight: 68,
}
personal.pc = "Mac M1 Max"
console.log(personal);
// 回傳 {name: "廖洧杰", price: 3000, height: 179, weight: 68, pc: "Mac M1 Max"}
```
:::warning
:warning: **新增物件的屬性 & 修改物件屬性內的值** :warning:
看起來都是用一樣的方法，但概念上有點不同。
一個是新增一個全新的屬性到物件內、一個是修改物件原有屬性的值。
:::
### :dart: 重新賦予物件的值
```javascript =
let personal = {
// 屬性 值(value)
name: "廖洧杰",
price: 3000,
height: 179,
weight: 68,
pc: "Mac M1 Max"
}
//語意：花了3000元買電腦
personal.price -= 3000;
//語意：增加購買條件 Mac M1 Max Ram36GB版
personal.pc += "Ram36GB版"
```
### :dart: 物件取值：有兩種方式
```javascipt=
let obj = {
myName:"洧杰",
price:3000,
0:"2000"
}
// 第一種
obj.myName
// 第二種
obj["myName"]
// 使用時機：遇到容易出錯的字、不允許讀取的狀態
console.log(obj["0"]) // '2000'
// 使用時機：可以帶入變數(把屬性名稱存起來)
let thatName = "myName"
console.log(obj[thatName]) //"洧杰"
```
### :dart: 試題演練
``` javascript=
let jsLiveClass = {
day: "Mon",
week: 3,
};
想要新增一個屬性為「0」，值為「false」的資料，下列方式何者正確
1. jsLiveClass.0 = false;
2. jsLiveClass["0"] = false;
3. jsLiveClass."0" = false;
想要將屬性「day」更新值為「Fri」，下列方式何者正確
1. day = "Fri";
2. jsLiveClass[day] = "Fri";
3. jsLiveClass.day = "Fri";
Ans: 2, 3
```
## :mag_right: 陣列與物件整合運用
### :dart: 陣列與物件使用時機
* 陣列：當資料需要使用大量且同性質的資料
* 物件：要描述一個東西對應的特徵和行為
> 寫程式永遠沒有正確解答
> **只有符合情境的程式邏輯** :heavy_check_mark:
### :dart: 資料集取值
看到物件就用`.`來讀取屬性，看到陣列就用`[ ]`取值
```javascript=
let ubike = {
contentType: "application/json",
isImage: false,
data: {
retCode: 1,
updated_at: "2021-10-22 21:40:24",
retVal: [
{
scity: "高雄市",
scityen: "Kaohsiung City",
sna: "YouBike2.0_七賢國中(美術東四路)",
sarea: "鼓山區",
ar: "美術東四路/美術東五路(西南側)",
snaen: "YouBike2.0_Cisian junior high school",
sareaen: "Gushan Dist",
aren: "Meishu E. 4th Rd./Meishu E. 5th Rd.(Southwest)",
sno: "501209087",
tot: "21",
sbi: "1",
mday: "20211022211419",
lat: "22.65871",
lng: "120.29012",
bemp: "20",
act: 1
},
]
}
}
// 取 sna
console.log(ubike.data.retVal[0].sna)
```
## :mag_right: 類陣列
case 1
```javascript=
let firstName = 'Karen';
console.log(firstName[0]) // 結果為 'K'
// 字串雖然屬於類陣列：
// 類陣列雖然可以用陣列方法取到值。
// 類陣列物件的格式與陣列結構類似，有 length 屬性，可以通過 index 來訪問或設定裡面的元素，
// 但不能用陣列方法(forEach, filter...)。
```
case 2: NodeList
```htmlembedded=
<p>Click the button to change the text of this paragraph.</p>
<p>This is also a paragraph.</p>
<button onclick="myFunction()">Try it</button>
```
```javascript=
function myFunction() {
document.getElementsByTagName("P")[0].innerHTML = "Hello World!";
document.getElementsByTagName("P")[1].innerHTML = "Hello there!";
}
```
## :mag_right: indentify property, key, and value
```javascript=
let obj = {
'key1': value1, // 這個 pair 就是 property
'key2': value2, // 這個 pair 就是 property
'key3': value3 // 這個 pair 就是 property
}
```
Sign in with Wallet
Connect another wallet