---
# System prepended metadata

title: 陣列
tags: [Javascript]

---

###### tags: `Javascript`

# 陣列
- 陣列寫法：
```javascript=
let colors = ['red', 'yellow', 'black'];
// colors 宣告的變數名稱
// 裡面放有值： red,yellow,black 的顏色
```
- 陣列、物件 是一種資料集合，能有效幫助我們在設計資料的時候更加友善。
- 陣列不只能放字串，也能放數字與混合資料：
```javascript=
let ary = ["blue", 5, false]; //字串、數字、布林
console.log(ary); 
```
- 陣列也可以是空陣列：
```javascript=
let data = [];
console.log(data);
```

## 陣列讀取教學
✏ 如果我們要讀取陣列 `colors` 裡的 `red` 要怎麼讀取？
```javascript=
//陣列 array
let colors = ['blue', 'red', 'black'];
```
首先要了解陣列的長度，陣列都是從 0、1、2 開始算起
![](https://i.imgur.com/snr2jQo.jpg)

因此要讀取 `red`，可以這樣寫：
```javascript=
//讀取陣列資料、瞭解陣列長度
console.log(colors[1]); //red
```
`red` 在第2個，所以要寫成 `colors[1]`，即可讀取到 `red` 的資料。

## 讀取陣列資料，並賦予新變數流程
✏ 如果我們要取 colors 陣列的 black 值，並賦予到新的變數上，要怎麼做？

```javascript=
let colors = ['red', 'yellow', 'black'];
let liaoLikeColor = colors[2]; // 把 black 賦予到 liaoLikeColor 變數上
console.log(liaoLikeColor); //black
```
## length 讀取陣列長度流程
✏ 如果要讀取 colors 陣列的長度，要怎麼做？
- 要使用 `length` 的屬性來取得陣列的長度。
```javascript=
let colors = ['red', 'yellow', 'black', "pink"];
console.log(colors.length); // 4，因為總共4個
```
✏ 如果要讀取 colors 陣列的長度，並賦予到新的變數，要怎麼做？
```javascript=
let colors = ['red', 'yellow', 'black', "pink"];
let colorsNum = colors.length;
console.log(colorsNum); //4
```

## 陣列預設寫入資料
✏ 如何在陣列寫入資料？
```javascript=
let colors = []; //先宣告一個空陣列
colors[0] = "blue"; //如果要在陣列的第一筆寫入 "blue",要指定 colors[0] = "blue"
colors[1] = "red"; //第二筆要寫 colors[1] = "red"
colors[2] = "black";//第三筆要寫 colors[2] = "black"
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/weXQRcq.jpg)

✏ 如果沒有依序寫入值在陣列裡，會發生什麼事？
```javascript=
//漏了color[3]

let colors = []; 
colors[0] = "blue";
colors[1] = "red"; 
colors[2] = "black";

colors[4] = "pink";
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/8FX05LM.jpg)
- 在`colors[3]`會塞入一個空值：`empty`

✏ 這時陣列的長度是？
- 陣列裡的長度一樣是 <font color="#f00">**5**</font> 個，沒有資料給予空值的地方也算在長度內
![](https://i.imgur.com/8FX05LM.jpg)
```javascript=
//漏了color[3]

let colors = []; 
colors[0] = "blue";
colors[1] = "red"; 
colors[2] = "black";

colors[4] = "pink";
console.log(colors);
console.log(colors.length); // 5
```

## push 寫入資料流程
- 利用 .push 在陣列<font color="#f00">最後面</font>塞入值

✏ 用 push 在 colors 陣列寫入新的資料？

```javascript=
let colors = ['blue', 'red', 'black']; 
colors.push("pink"); //用 push 把 "pink" 值推進去。
colors.push("yellow"); //用 push 把 "yellow" 值推進去。
colors.push(3); //用 push 把 3 值推進去。

console.log(colors);
```
輸出結果：
![](https://i.imgur.com/C0TXWD5.jpg)
- 值已經從陣列後面依序新增

## unshift 寫入資料流程
- 利用 .unshift 在陣列最前面寫入值

✏ 用 unshift 在 colors 陣列<font color="#f00">最前面</font>寫入新的資料？
```javascript=
let colors = ['blue', 'red', 'black'];

colors.unshift("pink");
colors.unshift("yellow");

console.log(colors);
```
輸出結果：
![](https://i.imgur.com/JMPSxnc.jpg)

## pop 與 shift 刪除資料
✏ pop 刪除陣列<font color="#f00">最後一筆</font>資料

```javascript=
let colors = ['blue', 'red', 'black'];
colors.pop(); //刪除最後一筆資料：black，剩下 blue,red
colors.pop();//刪除最後一筆資料：red，剩下 blue
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/AuyS3ds.jpg)

✏ shift 刪除陣列<font color="#f00">第一筆</font>資料
```javascript=
let colors = ['blue', 'red', 'black'];
colors.shift(); //刪除第一筆資料：blue，剩下 red,black
colors.shift();//刪除第一筆資料：red，剩下 black
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/eskUl1v.jpg)

## splice 刪除指定資料
✏ 刪除陣列 red 的資料？
```javascript=
let colors = ['blue', 'red', 'black'];
colors.splice(1, 1);
//第一個數字，起始位置
//第二個數字，要往後刪除幾筆資料(包含自己)
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/eOOrZTa.jpg)


- `colors.splice(1, 1);`
   - 第一個數字，起始位置
   - 第二個數字，要往後刪除幾筆資料(包含自己)
   - 因為我們要刪除 red ，所以第一個數字可以設成 1 ，['blue', 'red', 'black']; 位置是 0,1,2
   - 第二個數字設成1是因為代表要從red的位置開始刪除1筆資料

✏ 刪除陣列 red 往後兩筆資料？
```javascript=
let colors = ['blue', 'red', 'black'];
colors.splice(1, 2); 
// 1 是 red 的索引位置，2 是刪除包含 red 的往後兩筆資料，就是 red 和 black
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/rkxdHXB.jpg)

✏ 刪除陣列 black 資料？
```javascript=
let colors = ['blue', 'red', 'black'];
colors.splice(2, 1); 
// 2 是 black 索引位置，1 是刪除包含 black 的一筆資料
console.log(colors);
```
輸出結果：
![](https://i.imgur.com/F2Gwr0Q.jpg)

- splice常用在介面資料的刪除，比如有三個清單，客戶想刪除第2筆清單，即會用到splice

## JS 常見陣列方法 [push(), unshift(), pop(), shift(), splice(), reverse(), concat(), include(), indexOf(), join()]
- 👍👍👍 參考 卡斯伯 老師的文章：https://wcc723.github.io/development/2020/10/04/js-array-methods/#Array-prototype-unshift

- [JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]](https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/)


## 總結
- 外層要使用 [] 中括號包覆
- 每個值間是使用 , 逗號分隔
- 讀取方式使用 [] ，並要留意從零開始讀取
- 可使用 length 來查看陣列長度
- 補充陣列的型別為  object 要確認是否為陣列可以使用 Array.isArray(放入要確認的陣列)
- 新增方式：
    - push() 在陣列最後面塞入值
    - unshift() 在陣列最前面寫入值
- 修改方式：直接使用 [] 中括號讀取想要的值並賦予新的值
- 刪除方式：
    - shift() 會刪除掉陣列的第一筆資料
    - pop() 會刪除掉陣列的最後一筆資料
    - splice(,) 可以刪除指定位置的資料，要帶入兩個參數
        - 第一個參數要帶入起始位置
        - 第二個參數要帶入要往後刪除幾筆資料

## 陣列與物件
陣列會用來放結構重複的資料
物件會放性質相異的資料
![](https://i.imgur.com/f8Gpco5.png)
