---
# System prepended metadata

title: 第三週課程重點筆記
tags: [秋季班, JS 課程重點筆記, JS直播班, 六角學院, '2021']

---

# 第三週課程重點筆記
###### 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
}

```