前情提要

經過上一回的測驗，我發現了自己不是天選之人。

「哪尼，為什麼我不是天選之人，我不是有魔力嗎？而且還有引導學姊妳呀！」

艾草：「哎唷，現在為了擴大培養魔法人才只好放寬魔力基準呀。在沒人才我要被派去當貓頭鷹信使耶．．．我明明是綠繡眼，嗚嗚嗚嗚嗚」

(兩人相看無言)

艾草：「咦，先不要哭喪著臉，天選之人很多都消失在去魔王城的路上了↑_(ΦwΦ;)Ψ。而且陣列跟魔法陣息息相關唷！」

「怕爆，那不用天選了，繼續乖乖累積魔力總量囉～～～₍₍ ◝(●˙꒳˙●)◜ ₎₎」

陣列

今天讓我們聊聊陣列吧，陣列是一種有順序的資料集合，外層使用 [] 中括號包覆裡面的值，而值可以放原始型別、物件型別等各種型別的值，陣列是使用 , 逗號隔開，接下來就讓我們來練習宣告一個變數並賦予值為陣列吧！

let array = ['item0','item1'];

陣列的讀取

為什麼是從零開始寫起呢？因為陣列是從零開始讀取的，如下：

let array = ['item0','item1'];
console.log(array[0])//'item0'

而要讀取陣列的長度，可以使用 length 的方式：

let array = ['item0','item1'];
console.log(array.length)//2

陣列的型別

另外陣列是物件型別，所以當我們去查看它的型別時，會出現以下狀況：

let array = [];
console.log(typeof array)//object

那如果要查看陣列的型別可以怎麼做呢？

let array = [];
Array.isArray(array)//true

可以使用 Array.isArray() 的方式，將要判斷的內容放入()小括號內，如果是陣列的話，就會回傳 true 。

陣列的修改

陣列的修改方式為使用 [] 中括號讀取值後，直接賦予新的值即可，如下：

let array = [0];
array[0] = 1;
console.log(array)//[1]

陣列的新增

這邊會介紹三種新增的方式，包含預設新增的方式、unshift() 、push() 的方式！

預設寫入的方式可以直接用 [] 去指定位置，並賦予該陣列值，如下：

let array = [0];
array[1] = 1;

這樣就完成囉，是不是很簡單呀？

如果我們今天想指定到其他位置也可以，如下：

let array = [0];
array[2] = 2;
console.log(array)//[0, empty, 2]
console.log(array[1])//undefined
console.log(array.length)//3

如上面的範例，如果指定到第2筆資料，但第1筆尚未存放值的情況下，會被帶入 undefined ，且不會影響陣列長度，所以讓我們開心的隨便亂放吧（誤，單純玩笑話，請不要亂來

接下來來介紹第二個方法 unshift() 吧！

unshift() 會將資料塞入在陣列的第一個值，如下：

let array = [1];
array.unshift(0);
console.log(array)//[0, 1]

最後陣列的新增方式讓我們來學習 push() 吧！

push() 會將資料塞入在陣列的最後一個值，如下：

let array = [1];
array.push(0);
console.log(array)//[1, 0]

知識點：陣列的新增

• 可以使用指定位置的方式寫入
• unshift() 寫入的資料會塞在第一筆
• push() 寫入的資料會塞在最後一筆

陣列的刪除

這篇會簡單介紹三種陣列的刪除方式：pop()、shift()、splice(,)

讓我們先來學習 pop() 吧！

pop() 會刪除該陣列的最後一筆資料，如下：

let array = [0,1,2];
array.pop();
console.log(array)//[0, 1]

shift() 會刪除該陣列的第一筆資料，如下：

let array = [0,1,2];
array.shift();
console.log(array)//[1, 2]

而 splice(,) 比較特別，它可以帶入三個參數，分別代表：

第一個參數： start 起始位置

第二個參數：deleteCount 要刪除幾筆資料（選擇性）

第三個參數：item1, item2, ... 要加入陣列的元素（選擇性）

splice(start,deleteCount) 可以讓我們指定想刪除的位置，所以當我們今天想刪除中間的1時可以使用以下方法：

let array = [0,1,2];
array.splice(1,1);
console.log(array)//[0, 2]

splice(start,deleteCount,item) 可以讓我們指定想刪除的位置，並在刪除的位置內新增一個值：

let array = [0,1,2];
array.splice(0,1,3);
console.log(array)//[3, 1, 2]

指定在第零筆刪除一筆資料，並在該處插入數字 3 。

知識點：陣列的刪除

• pop() 會刪除陣列的最後一筆資料
• shift() 會刪除陣列的第一筆資料
• splice(,) 可以指定刪除位置，分別要帶入三個參數：
  • 第一個代表：起始位置
  • 第二個代表：要刪除幾筆資料
  • 第三個代表：要新增的值

總結

陣列

• 外層要使用中括號包覆
• 每個值間是使用 , 逗號分隔
• 陣列值從零開始讀取
• 可以使用 length 來讀取長度
• 陣列的型別為 object
• 可以使用 Array.isArray() 來判斷是否為陣列
• 陣列的新增可以使用 ： 預設新增的方式、unshift() 、push()
• 陣列的刪除可以使用：pop()、shift()、splice()

小練習

請問以下選項何者錯誤？

let herbs = ["mugwort","mint","vanilla"];
console.log(herbs[1]);//選項一
herbs.pop();
herbs.push("orris");
herbs.splice(0,1);

A 選項一會讀取出 "mint"
B 陣列中僅存的值為 ["mint", "orris"]
C herbs.pop() 會刪除陣列中的最後一筆資料
D herbs.push("orris") 會在陣列的最前方塞入一筆資料
E splice(0,1) 第一個參數零代表起始位置，第二個參數代表往後刪除一筆

解答：透過陣列方法 push 可以新增資料，資料會被塞入最後一筆，所以答案是 D 。

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice