###### tags: `Javascript`

# 陣列
- 陣列寫法：

let colors = ['red', 'yellow', 'black'];
// colors 宣告的變數名稱
// 裡面放有值： red,yellow,black 的顏色

- 陣列、物件 是一種資料集合，能有效幫助我們在設計資料的時候更加友善。
- 陣列不只能放字串，也能放數字與混合資料：

let ary = ["blue", 5, false]; //字串、數字、布林
console.log(ary); 

- 陣列也可以是空陣列：

let data = [];
console.log(data);

## 陣列讀取教學
✏ 如果我們要讀取陣列 `colors` 裡的 `red` 要怎麼讀取？

//陣列 array
let colors = ['blue', 'red', 'black'];

首先要了解陣列的長度，陣列都是從 0、1、2 開始算起

因此要讀取 `red`，可以這樣寫：

//讀取陣列資料、瞭解陣列長度
console.log(colors[1]); //red

`red` 在第2個，所以要寫成 `colors[1]`，即可讀取到 `red` 的資料。

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

let colors = ['red', 'yellow', 'black'];
let liaoLikeColor = colors[2]; // 把 black 賦予到 liaoLikeColor 變數上
console.log(liaoLikeColor); //black

## length 讀取陣列長度流程
✏ 如果要讀取 colors 陣列的長度，要怎麼做？
- 要使用 `length` 的屬性來取得陣列的長度。

let colors = ['red', 'yellow', 'black', "pink"];
console.log(colors.length); // 4，因為總共4個

✏ 如果要讀取 colors 陣列的長度，並賦予到新的變數，要怎麼做？

let colors = ['red', 'yellow', 'black', "pink"];
let colorsNum = colors.length;
console.log(colorsNum); //4

## 陣列預設寫入資料
✏ 如何在陣列寫入資料？

let colors = []; //先宣告一個空陣列
colors[0] = "blue"; //如果要在陣列的第一筆寫入 "blue",要指定 colors[0] = "blue"
colors[1] = "red"; //第二筆要寫 colors[1] = "red"
colors[2] = "black";//第三筆要寫 colors[2] = "black"
console.log(colors);

輸出結果：

✏ 如果沒有依序寫入值在陣列裡，會發生什麼事？

//漏了color[3]

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

colors[4] = "pink";
console.log(colors);

輸出結果：
- 在`colors[3]`會塞入一個空值：`empty`

✏ 這時陣列的長度是？
- 陣列裡的長度一樣是 <font color="#f00">**5**</font> 個，沒有資料給予空值的地方也算在長度內

//漏了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 陣列寫入新的資料？

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

console.log(colors);

輸出結果：
- 值已經從陣列後面依序新增

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

✏ 用 unshift 在 colors 陣列<font color="#f00">最前面</font>寫入新的資料？

let colors = ['blue', 'red', 'black'];

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

console.log(colors);

輸出結果：

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

let colors = ['blue', 'red', 'black'];
colors.pop(); //刪除最後一筆資料：black，剩下 blue,red
colors.pop();//刪除最後一筆資料：red，剩下 blue
console.log(colors);

輸出結果：

✏ shift 刪除陣列<font color="#f00">第一筆</font>資料

let colors = ['blue', 'red', 'black'];
colors.shift(); //刪除第一筆資料：blue，剩下 red,black
colors.shift();//刪除第一筆資料：red，剩下 black
console.log(colors);

輸出結果：

## splice 刪除指定資料
✏ 刪除陣列 red 的資料？

let colors = ['blue', 'red', 'black'];
colors.splice(1, 1);
//第一個數字，起始位置
//第二個數字，要往後刪除幾筆資料(包含自己)
console.log(colors);

輸出結果：

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

✏ 刪除陣列 red 往後兩筆資料？

let colors = ['blue', 'red', 'black'];
colors.splice(1, 2); 
// 1 是 red 的索引位置，2 是刪除包含 red 的往後兩筆資料，就是 red 和 black
console.log(colors);

輸出結果：

✏ 刪除陣列 black 資料？

let colors = ['blue', 'red', 'black'];
colors.splice(2, 1); 
// 2 是 black 索引位置，1 是刪除包含 black 的一筆資料
console.log(colors);

輸出結果：

- 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(,) 可以刪除指定位置的資料，要帶入兩個參數
- 第一個參數要帶入起始位置
- 第二個參數要帶入要往後刪除幾筆資料

## 陣列與物件
陣列會用來放結構重複的資料
物件會放性質相異的資料