---
# System prepended metadata

title: "JavaScript 陣列 Array 完全新手指南｜ push、pop、splice 魚塘管理\U0001F498"
tags: [前端養成, 程式, 陣列, array, JavaScript, 基礎, 白話解釋, 新手筆記]

---

# JavaScript｜戀愛魚塘管理💞 用陣列 Array 管理 match 才專業 💅

配對清單爆滿？用魚塘清單管理搞懂 `push`、`unshift`、`pop`、`shift`、`splice` 剔除、推入、插隊一鍵搞定👩‍❤️‍👨
約會起來更順手💋

此篇要用配對清單和章魚哥排隊的例子來理解 JavaScript 最重要且基礎的資料結構
####  🪬  陣列資料結構（array data structure → Array) 🔫 你目前位置 aka 本篇主題
####  🪬 物件資料結構（Objects data structure → Object) → 下一篇
![image](https://hackmd.io/_uploads/S1cExdEFeg.png)

<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🩷

// ['元大證券哥', '健身男', '鳳梨罐頭', '製片男']
```
![image](https://hackmd.io/_uploads/BJcCx2SFeg.png)

來看個圖解吧 ↓
![image](https://hackmd.io/_uploads/rkWr52BFgg.png)



### 變異 - 刪除操作（ `pop` / `shift` / `splice` ）

↓ 時間有限，不得己要刪掉一個
- `.pop()` 最後一個（最後面）刪掉
- `.shift()` 第一個（最前面）刪掉

你問我括號內要放什麼？ 
不愛就不愛，哪來什麼理由🤡

### 🔫 `.pop()` 刪掉最後一個
↓ 因為時間有限，顧不完那麼多，最新那個只好先 see u next life 🎟️
```javascript!
let matchList = ['元大證券哥', '健身男', '鳳梨罐頭', '製片男']

// 刪掉最後一個 因為太忙ㄌ → 直接刪掉 
matchList.pop();
console.log(matchList); 

// ['元大證券哥', '健身男', '鳳梨罐頭'] 
```
![image](https://hackmd.io/_uploads/HydRohHYxx.png)


### 🔫 `.shift()` 刪掉第一個
↓ 第一位陪聊太久，神秘感消失，下車 🚔
```javascript!
let matchList = ['元大證券哥', '健身男', '鳳梨罐頭']

// 刪掉第一個 他知道太多ㄌ 已經沒有神秘感ㄌ → 直接刪掉
matchList.shift();
console.log(matchList); 

// ['健身男', '鳳梨罐頭'] 
```
![image](https://hackmd.io/_uploads/H1jx2e8Kgx.png)



### 🔫 `.splice()`  精準刪除指定順序（也可以順便補上ㄛ 如果有ㄉ話💞
↓ 基礎型態
```javascript!
array.splice(起始位置, 要刪掉幾個, [要插入的新元素...])
```

↓ 發現鳳梨罐頭太色，不合男友規格，踢出名單 🔫
```javascript!
let matchList = ['健身男', '鳳梨罐頭'];

// 要指定鳳梨罐頭 out 
matchList.splice(1, 1, '笑眼小狗'); // → 健身男是0 鳳梨罐頭是 1 → 所以是 1 開始刪掉 1 個 並且由 笑眼小狗 補上
console.log(matchList); 
// → ['健身男', '笑眼小狗']
```
![image](https://hackmd.io/_uploads/HJV3sJ2Kgg.png)


忽然朋友介紹ㄌ一個Ｕ質本田男
想把新認識ㄉ本田哥排到第二順位，畢竟本田哥是朋友掛保證
```javascript!
let matchList =  ['健身男', '笑眼小狗'];

// 要把本田哥塞進第二順位 並且不刪人
matchList.splice(1, 0, '本田哥'); // → 健身男是0 本田哥要放在第二位 → 所以是 1 加入本田哥 並且不刪人 → 0

console.log(matchList); 
// → ['健身男', '本田哥', '笑眼小狗']
```
![image](https://hackmd.io/_uploads/SJmZpxIFlx.png)

---
還是沒有概念ㄇ 〠
那我們再來看看下面ㄉ例子
↓
### 🐙 比奇堡居民排隊篇 🐙
重金娉請ㄌ社畜代表 - 章魚哥 🐙 來親身做一個示範
![image](https://hackmd.io/_uploads/rJJ3HdNYxg.png)
###### - 現場已經人山人海。

🐙 試問章魚哥會排在哪？
：隊伍的最尾端，因為哥最晚來。

### 變異 - 新增操作（ `push` / `unshift` ）
 ↓ 章魚哥搞不清楚狀況，來協助哥入隊吧（變異 - 新增操作）〠
### 🤹‍♀️ `.push()` 把哥投擲到最尾端
```javascript!
// 這些人是原本乖乖排隊ㄉ → 前賦值陣列
let spankButtMember = ['打工魚','泡芙阿姨']; 

// 使用 .push 讓哥一秒彈到最尾端
spankButtMember.push('章魚哥');
console.log(spankButtMember); 
```

![image](https://hackmd.io/_uploads/rJJEljNtel.png)

### 🤹‍♀️ `.unshift()` 把哥請到最前面
這時候隊伍最尾端的哥超級不爽，秀出打屁屁大會的 VVIP 資格票，要求主委讓他插在最前面，成為打屁屁第一人

這時候主委使用 `.unshift()` → 執行 VVIP 資格讓章魚哥插隊到隊伍最前面

```javascript!
// 有打屁屁大會 VVIP 的章魚哥 要入隊
let spankButtMember = ['打工魚','泡芙阿姨']; 

// 讓持有打屁屁大會 VVIP 資格的章魚哥使用金錢的力量成為打屁屁第一人🥴
spankButtMember.unshift('章魚哥'); 
console.log(spankButtMember); 
```
![image](https://hackmd.io/_uploads/By9XC5VFxg.png)

↑ 成功讓金主章魚哥成為隊伍第一人 🐙

---

~~魚塘~~清單到這邊先收工 🪬
用  `.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)


