昨天把哈納跟牠的朋友們全部抓進 Array 裡。

今天打開陣列一看：

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

很好。

大家都還在。

但新的問題馬上出現了——

如果今天陣列裡不是只有四隻，而是四十隻，我到底要怎麼找哈納？？？

總不能真的一隻一隻翻吧 ==

所以今天來看看幾個很常出現的 Array 方法：

map()
filter()
find()

名字都看過。

但每次三個一起出現，我還是會：

等一下，你們到底誰負責誰？？？

map：全部都給我加工一下！

先從 map() 開始。

假設今天想幫每隻貓咪後面都加上一個 🐱：

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

const newCats = cats.map(function(cat) {
  return cat + "🐱";
});

console.log(newCats);

結果：

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

map() 會把陣列裡的每一筆資料都拿出來處理，

最後再回傳一個新的陣列。

所以我目前先把它記成：

大家都要做同一件事 → map

哈納不能偷懶。

四隻全部一起加貓咪 XD

filter：不符合條件的請出去！

接著換 filter()。

這次不要只存名字，來多放一點資料：

const cats = [
  { name: "哈納", age: 5 },
  { name: "小橘", age: 2 },
  { name: "布丁", age: 4 },
  { name: "奶茶", age: 1 }
];

假設今天只想找出 3 歲以上的貓咪：

const adultCats = cats.filter(function(cat) {
  return cat.age >= 3;
});

console.log(adultCats);

結果會留下：

哈納
布丁

也就是符合條件的資料會被留下來。

所以：

符合條件的都留下 → filter

奶茶、小橘：

蛤？我們只是年紀比較小欸？？？

沒有要趕你們走啦。

只是篩選一下 XD

find：我今天就找哈納一個！

再來是 find()。

假設今天的任務非常明確：

我要找哈納。

const hana = cats.find(function(cat) {
  return cat.name === "哈納";
});

console.log(hana);

結果：

{
  name: "哈納",
  age: 5
}

find() 會找到第一筆符合條件的資料後就回傳。

所以如果今天不是要找一群，

只是要找某一筆資料，

就可以用 find()。

簡單來說：

「哈納！出來！」 → find

哈納：

我不是一直都在這裡嗎 ==

map、filter、find 到底怎麼分？

寫完三個之後，我自己先這樣記：

直接用哈納版本來記：

全部貓咪一起加工 → map

挑出符合條件的貓咪 → filter

只找哈納本人 → find

突然就沒那麼容易搞混了 XD

今天的小心得

昨天才剛學會把一堆資料塞進 Array。

今天就開始處理：

「塞進去之後我要怎麼把我要的東西找出來？」

以前看到：

map()
filter()
find()

很容易覺得大家長得差不多。

但真的各寫一次之後，

差別其實滿明顯的。

最後留一句給未來的自己：

全部加工用 map、篩一群用 filter、找一個用 find。

至於哈納？

放心。

今天沒有被 pop() 出去了 XD

Day 17，完成！