為什麼需要學到陣列？

假設今天這裡有100樣東西，我們必須設法執行它，而這時候如果不使用陣列，東西都是獨立狀態的時候，我們可能需要給100樣東西都取名才能操作，其實不難想像這種情況的程式碼，有多麼的冗長且沒效率。因此，如果我們可以把整組的資料都傳遞到 function 去做運算，或是從陣列或物件撈出各個值，怎麼樣都會比變數來到快速有效率。

什麼是陣列 (Array)？

以我自己對陣列的理解，大概可以這麼解讀，將幾個不同屬性的值用中括號分成一組，裡面的屬性記得用逗號隔開，並給這個組一個變數名稱，此時的型態就是陣列，如同範例上的樣子。

let colors = ['white','black','red','green'];

陣列等於是涵蓋著許多屬性或物件的一個大型資料庫，供寫程式的時候更有效率的取用。

陣列寫法

上面我們看到陣列的狀態，可以給予一個變數，並在中括號裡面增加幾個字串，但其實陣列不只可以塞字串進去，它還可以塞進更多其他的資料。

// 不只能放字串，也可以放數字
let ary = [5,30,400,100];

// 也可以字串、數字、布林值
let ary = ['Teddy',5,30,true];

//甚至也可以是空字串
let ary = [];

這邊要特別說一下，什麼情況下我們會需要設一個空字串；當我們需要把某一筆資料撈出來額外使用的時候，就會需要把那筆資料放入自己新增的空陣列裡。

讀取陣列

在 console 裡面寫入變數名稱，是最直覺的讀取方式，但是在陣列裡面，這樣子代表的是讀取整個陣列的資料，但我們今天要討論的是讀取陣列裡的某一個屬性的資料，就像底下這個範例：

let colors = ['white','black','red','green'];
console.log(colors); // 'white','black','red','green'

假設我們只想要抓取 black 的話，就必須這麼處理：

let colors = ['white','black','red','green'];
console.log(colors[1]); // black

在這邊要注意的地方是，陣列的排序是從 0 開始，所以 black 的位置是 1。

將陣列資料取出，並賦予變數

經過上面許多範例，到了這邊其實也不難思考會是怎麼樣的寫法，這邊的步驟其實就是讀取加新增變數這兩個動作而已，假設我想要取出 red，並額外對它新增一個變數：

let colors = ['white','black','red','green'];
let myColor = colors[2];
console.log(myColor); // red

使用 length 讀取陣列長度

這個作法很常用在需要一次修改幾筆資料，或是只修改特定幾筆資料的時候。不過這裡只會說明如何讀取陣列長度。

let colors = ['white','black','red','green'];
let myColor = colors.length;
console.log(myColor); // 4 

寫入陣列

上面有提到陣列也可以設一個空陣列，是為了讓我們寫入資料用的，底下這個範例可以看到如何將資料寫進陣列。

let colors = [];
colors[0] = 'green';
colors[1] = 'red';
console.log(colors); // 'green','red'

提到了讀取、寫入、賦予屬性變數、陣列長度之後，我們或許還會思考，還有沒有更多寫法能夠改變陣列內容，使它可以越來越靈活的被取用，隨著程式碼越寫越多，當然也會希望資料的取用能夠更有效率；其實是有的，底下就簡單的也討論一下 push、unshift、shift、pop、splice。

push

push 是另一種替陣列加入資料的方式，它會在所有資料的最後面加入一個新的資料。

let colors = ['white','black','red','green'];
colors.push("pink");
// 也可以直接增加數字、布林值
colors.push(5);
console.log(colors); // 'white','black','red','green','pink',5

unshift

unshift 也是將資料寫入，但與 push 不同的是，unshift 將資料新增在最前面，這比較常使用在留言板，我們希望可以看到最新留言的時候就可以使用。

let colors = ['white','black','red','green'];
colors.unshift("Haru");
// 也可以直接增加數字、布林值
colors.unshift(99);
console.log(colors); // 99,'Haru','white','black','red','green'

shift 與 pop

shift 和 pop 都是刪除資料，差別在於 shift 是從前面開始刪除，而 pop 則從後面刪除資料。

let colors = ['white','black','red','green'];
colors.shift();
console.log(colors); // 'black','red','green'

colors.pop();
console.log(colors); // 'black','red'

splice

splice 也是刪除資料，只是比較特別一點的是，它可以直接指定要刪除的資料。

let colors = ['white','black','red','green'];
// 第一個數字代表起始位置
// 第二個數字，往後刪除幾個
colors.splice(1,2);
console.log(colors); // 'white', 'green'