# JavaScript｜戀愛魚塘管理💞 用陣列 Array 管理 match 才專業 💅
配對清單爆滿？用魚塘清單管理搞懂 `push`、`unshift`、`pop`、`shift`、`splice` 剔除、推入、插隊一鍵搞定👩❤️👨
約會起來更順手💋
此篇要用配對清單和章魚哥排隊的例子來理解 JavaScript 最重要且基礎的資料結構
#### 🪬 陣列資料結構（array data structure → Array) 🔫 你目前位置 aka 本篇主題
#### 🪬 物件資料結構（Objects data structure → Object) → 下一篇
<br>
那麼，我們就開始囉 📺
↓
## 陣列資料結構 ( Array )
是一種有序的清單，陣列裡的每個元素都會有編號 ( index → 0 開始算 )
用來執行 **遍歷 aka 迴圈操作 / 變異操作**
👉🏻 把 match 到的配對清單放成一堆，並且以「先來後到」做排列，後面來的就 push 進來排隊，方便之後管理~~魚塘~~清單 or dating someone 💅😏
#### ❗️熱知識 遍歷與變異
🔫 **遍歷 aka 迴圈**：`.forEach()` `.map()` `.filter()` → 走一遍
🔫 **變異** : `.push(推)` `.splice(刪)` → 改資料
###### ✪ 跨界冷知識 可以想像成 ol>li 有序清單 (ordered lists) <br> 每個成員都有自己的編號（index），一個編號就是一個 li，依照順序乖乖排隊。
那我們開始寫陣列基礎版囉 🪬
```javascript!
// 開一個魚塘裝魚 痾 不是 是開一個空陣列 → 後賦值的寫法
let matchList = []; // 這是空陣列
// 開始把 match「推」進去囉
matchList.push('元大證券哥');
matchList.push('健身男');
console.log(matchList[0]); // → 印出 元大證券哥
console.log(matchList[1]); // → 印出 健身男
// 後面又來了兩個，一次處理
matchList.push('鳳梨罐頭','製片男');
console.log(matchList); // → 印出所有的 match List🩷
// ['元大證券哥', '健身男', '鳳梨罐頭', '製片男']
```
來看個圖解吧 ↓
### 變異 - 刪除操作（ `pop` / `shift` / `splice` ）
↓ 時間有限，不得己要刪掉一個
- `.pop()` 最後一個（最後面）刪掉
- `.shift()` 第一個（最前面）刪掉
你問我括號內要放什麼？
不愛就不愛，哪來什麼理由🤡
### 🔫 `.pop()` 刪掉最後一個
↓ 因為時間有限，顧不完那麼多，最新那個只好先 see u next life 🎟️
```javascript!
let matchList = ['元大證券哥', '健身男', '鳳梨罐頭', '製片男']
// 刪掉最後一個 因為太忙ㄌ → 直接刪掉
matchList.pop();
console.log(matchList);
// ['元大證券哥', '健身男', '鳳梨罐頭']
```
### 🔫 `.shift()` 刪掉第一個
↓ 第一位陪聊太久，神秘感消失，下車 🚔
```javascript!
let matchList = ['元大證券哥', '健身男', '鳳梨罐頭']
// 刪掉第一個 他知道太多ㄌ 已經沒有神秘感ㄌ → 直接刪掉
matchList.shift();
console.log(matchList);
// ['健身男', '鳳梨罐頭']
```
### 🔫 `.splice()` 精準刪除指定順序（也可以順便補上ㄛ 如果有ㄉ話💞
↓ 基礎型態
```javascript!
array.splice(起始位置, 要刪掉幾個, [要插入的新元素...])
```
↓ 發現鳳梨罐頭太色，不合男友規格，踢出名單 🔫
```javascript!
let matchList = ['健身男', '鳳梨罐頭'];
// 要指定鳳梨罐頭 out
matchList.splice(1, 1, '笑眼小狗'); // → 健身男是0 鳳梨罐頭是 1 → 所以是 1 開始刪掉 1 個 並且由 笑眼小狗 補上
console.log(matchList);
// → ['健身男', '笑眼小狗']
```
忽然朋友介紹ㄌ一個Ｕ質本田男
想把新認識ㄉ本田哥排到第二順位，畢竟本田哥是朋友掛保證
```javascript!
let matchList = ['健身男', '笑眼小狗'];
// 要把本田哥塞進第二順位 並且不刪人
matchList.splice(1, 0, '本田哥'); // → 健身男是0 本田哥要放在第二位 → 所以是 1 加入本田哥 並且不刪人 → 0
console.log(matchList);
// → ['健身男', '本田哥', '笑眼小狗']
```
---
還是沒有概念ㄇ 〠
那我們再來看看下面ㄉ例子
↓
### 🐙 比奇堡居民排隊篇 🐙
重金娉請ㄌ社畜代表 - 章魚哥 🐙 來親身做一個示範
###### - 現場已經人山人海。
🐙 試問章魚哥會排在哪？
：隊伍的最尾端，因為哥最晚來。
### 變異 - 新增操作（ `push` / `unshift` ）
↓ 章魚哥搞不清楚狀況，來協助哥入隊吧（變異 - 新增操作）〠
### 🤹♀️ `.push()` 把哥投擲到最尾端
```javascript!
// 這些人是原本乖乖排隊ㄉ → 前賦值陣列
let spankButtMember = ['打工魚','泡芙阿姨'];
// 使用 .push 讓哥一秒彈到最尾端
spankButtMember.push('章魚哥');
console.log(spankButtMember);
```
### 🤹♀️ `.unshift()` 把哥請到最前面
這時候隊伍最尾端的哥超級不爽，秀出打屁屁大會的 VVIP 資格票，要求主委讓他插在最前面，成為打屁屁第一人
這時候主委使用 `.unshift()` → 執行 VVIP 資格讓章魚哥插隊到隊伍最前面
```javascript!
// 有打屁屁大會 VVIP 的章魚哥 要入隊
let spankButtMember = ['打工魚','泡芙阿姨'];
// 讓持有打屁屁大會 VVIP 資格的章魚哥使用金錢的力量成為打屁屁第一人🥴
spankButtMember.unshift('章魚哥');
console.log(spankButtMember);
```
↑ 成功讓金主章魚哥成為隊伍第一人 🐙
---
~~魚塘~~清單到這邊先收工 🪬
用 `.pop` / `.shift` / `.splice` / `.push` / `.unshift` 靈活管理曖昧對象清單！以後加人、踢人、換人都不費力💅
不過，只有名字會怕以後初老直接大忘記
名字就這樣丟出來，根本考驗記憶啊🤡
所以需要升級成 物件資料 (Object) 把 match 聊天細節記錄下來
下次計畫 date ㄉ時候假裝不經意提到 match ㄉ愛店，match 肯定會在心裡大喊 「天ㄚ，他居然記得 🥹 肯定有意思😵 暈暈暈💫」
我們下一篇見！🔥💫
---
📺 JS 新手宇宙 - EP . 03
[ 🩷 EP1 《 函式和參數名稱、傳值再也不會搞混！ 》](https://hackmd.io/pPUQiXn2TgGJrDTSLJR6sw)
[🩷 EP2 《 for 迴圈：愛你 10 天計畫 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/rJF-uhgOll)
###### （ 你在這裡 ↓ ）
[🩷 EP3 《 陣列 Array：push、pop、splice 魚塘管理💅 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/ByqK9u-Klx)
[🩷 EP4 《 物件 Object：80s 畢業紀念冊大曝光，二十年後我還記得你 💘 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/SkkxzBY9ee)
Sign in with Wallet
Connect another wallet