昨天才剛把 let、const 跟 var 抓出來重新認識一下。

今天決定來整理另一個平常很常用的東西——

Array（陣列）。

假設今天想記錄哈納跟牠的朋友們。

如果一隻一隻記，可能會變成：

const cat1 = "哈納";
const cat2 = "小橘";
const cat3 = "布丁";

嗯。

三隻還好。

但如果今天突然有 100 隻貓呢？

……

不是欸！我是想養貓，不是想把變數名稱取到天荒地老 ==

所以今天決定把哈納跟牠的朋友們全部抓進陣列裡。

Array：哈納！帶你的朋友進來排隊！

如果今天有三隻貓咪：

const cats = ["哈納", "小橘", "布丁"];

這樣就可以把多筆資料放在同一個陣列裡。

如果想找到哈納：

console.log(cats[0]);

結果：

哈納

如果想找到小橘：

console.log(cats[1]);

結果：

小橘

那布丁呢？

console.log(cats[2]);

結果：

布丁

等等。

為什麼哈納是 0 號，不是 1 號？？？

原來 JavaScript 的陣列索引是從 0 開始。

所以：

cats[0] → 哈納
cats[1] → 小橘
cats[2] → 布丁

哈納明明是第一個進來的，結果編號居然是 0。

哈納：蛤？我連 1 號都不配當是不是？？？

好啦，這是 JavaScript 的規定，不是我故意的 XD

length：哈納，你到底帶了幾個朋友來？

如果今天想知道陣列裡有幾隻貓，可以使用：

console.log(cats.length);

結果：

3

length 可以取得陣列的長度。

這裡有一個很容易搞混的地方：

陣列索引從 0 開始，但 length 回傳的是陣列長度。

所以：

cats[0] → 第一隻
cats[1] → 第二隻
cats[2] → 第三隻

cats.length → 3

不要看到最後一隻的索引是 2，就以為只有兩隻貓。

布丁：所以我是不算貓是不是 ==

push：又有新朋友來了！！！

假設今天哈納又帶了一隻新朋友回家。

這時候可以使用：

cats.push("奶茶");

console.log(cats);

結果：

["哈納", "小橘", "布丁", "奶茶"]

push() 可以把新資料加入陣列的最後面。

所以現在從三隻貓變成四隻了。

哈納：欸嘿！又多一個朋友～

等等。

昨天不是才說：

const cats = ["哈納", "小橘", "布丁"];

const 不能改嗎？

怎麼今天又可以新增奶茶了？

原來 const 限制的是變數不能重新指定值。

但如果變數存的是陣列，還是可以修改裡面的內容。

所以：

cats.push("奶茶");

是可以的。

但如果直接把整個陣列重新指定：

cats = ["小白", "小黑"];

就會報錯。

原來不是不能帶新朋友回家，是不能直接把整間貓舍換掉 XD

pop：奶茶，你先出去一下！

如果今天想把陣列最後一筆資料移除，可以使用：

const lastCat = cats.pop();

console.log(lastCat);
console.log(cats);

結果：

奶茶
["哈納", "小橘", "布丁"]

pop() 會移除陣列最後一筆資料，並回傳被移除的內容。

所以奶茶就先離開陣列了。

奶茶：不是欸！我才剛進來耶？？？

放心啦。

只是程式碼練習，沒有真的把你趕出去 XD

includes：哈納！你朋友還在不在裡面？

假設今天想確認哈納有沒有偷偷跑出去。

可以使用：

console.log(cats.includes("哈納"));

結果：

true

代表陣列裡有找到哈納。

如果今天要找奶茶：

console.log(cats.includes("奶茶"));

結果：

false

因為奶茶剛剛已經被 pop() 移除了。

includes() 可以用來判斷陣列裡是否包含指定的值。

找到就回傳 true。

沒找到就回傳 false。

哈納：我明明就乖乖待在這裡，你是在找什麼啦 ==

今天的小整理

今天先整理幾個比較基本的陣列操作。

原本只是想整理一下 Array。

結果今天直接開了一間貓舍。

哈納帶朋友進來。

奶茶進來沒多久又被請出去。

最後還要確認哈納本人到底有沒有偷跑。

嗯……

今天的 JavaScript 怎麼突然變成貓咪戶口普查了 XD

不過今天重新整理後，至少更清楚陣列可以怎麼存放跟操作多筆資料。

至於陣列還有其他常用的方法，像是：

map()
filter()
find()

這幾位今天先不要。

不然哈納可能真的要離家出走了。

Day 16，完成！