文科少女學程式

在這段期間，不管學習上的一些作業，或是做自己想做的一些作品，
少女我發現很常會需要運用陣列的處理方式讓自己拿到自己需要的資料。
但是少女我其實自己並不算太擅長用陣列的方法，除了常用的幾個方法外。
不過在經歷幾週的上班後，我發現針對這部分，自己還有一些雖然自己知道怎麼用，
但實際上卻沒有真正了解到該在什麼時機用這些陣列方法，
這次的學習筆記的重點就會以這部分為主。

使用陣列方法的各種情境
想要回傳新陣列時
filter()
我覺得這個方法看名字就可以馬上知道它的用途，簡單來說就是篩選(廢話)。
功能就跟在逛網拍時，篩選特定項目一樣，最後只會顯示符合篩選條件的商品項目(回傳新陣列)，
但是不符合條件的項目依舊還在(不影響原陣列)。

直接看範例！
範例一：篩選出大於100的數字

結果：
只有大於100的數字會存在於新的陣列中。

範例二：篩選出類別為裙子的商品

結果：
只有類別為"裙子"的商品會出現在陣列中。


map()
這個陣列處理方法比較難從名字看懂它的用途，不過它一樣是用跑迴圈的概念進行，
只是它跟filter不一樣，主要用途不是把符合條件的內容篩選出來，
而是把陣列裡的東西一個個挑出來後，個別進行一些動作。
但是map和filter一樣都不會動到原陣列，會回傳一個新陣列。

直接看範例！
範例一：把整個陣列的元素值都+1

結果：
整個新陣列的數字都是原陣列的數字+1。

範例二：將名字叫做Tracy的好友，設定為我的最愛。

結果：
只有名字為Tracy的陣列的favorite會被改成true，其他則維持false。


想要回傳布林值時
some()
這個陣列的方法是當其中一個元素符合特定條件時，就會回傳true。

直接看範例！
範例：查看名單內是否有Phoebe這個人
(只要在名單裡找到一個Phoebe名字，就代表名單內有名字叫做Phoebe這個人)

結果：
因為整個陣列都沒有一個叫做Phoebe的人，所以回傳false。



every()
這個陣列方法與some類似，但是就如同它的名字，當陣列的每個元素都符合特定條件時，才會回傳true。

直接看範例！
範例：確認好友名單內，是否都有加入我的最愛。
(必須確認所有好友都符合條件)

結果：
雖然Tracy的favorite為true，但因為其他兩個人是false，所以回傳false。

想要回傳特定元素值時
find()
用find可以回傳第一個符合條件的元素值。

直接看範例！
範例：尋找一個加入我的最愛的好友。

結果：
雖然有兩位好友，favorite為true，但是find()方法只會找出第一位符合條件的資料，
所以最後只印出Tracy這位朋友。

想要改動原陣列時
forEach()
這個方法其實跟map有點像，但是forEach是在原陣列進行特定動作，
map則是會產生出另一個陣列，並且進行特定動作。

直接看範例！
範例：

結果：
Kylie的年齡變更為40

使用情境超級比一比
回傳新陣列VS回傳布林值
如果想要用在if判斷是中，當作判斷用的條件，
可以直接使用回傳布林值的陣列處理方法。
如果需要透過一組新的陣列資料來渲染頁面，
就可以選擇能回傳新陣列的方式。

回傳新陣列VS沒有回傳新陣列
如果想要做的動作，不希望影響到原陣列的資料，
可以透過會回傳新陣列的方式進行；
但是沒有這樣的需求的話，就可以選擇直接在原陣列做動作的方法。
最近工作上剛好也碰到這個情境，也特別紀錄在這次的內容中。
那次是想要使用Vuex裡的state資料時，基本上不太建議改動到state裡面的資料，
但剛好因為前端渲染的需求，不得不需要改動state的資料，
這時候就很適合使用map進行處理。
(我原本是使用forEach，但是必須另外透過json.parse()和json.strinfy深度複製陣列，
否則依照陣列by reference的特性還是會改動到原本的陣列。)

結論
在使用這些陣列處理方式前，先想想自己這次的目的是什麼，
再去選擇要使用的方式，才可以選到比較合適的方式。

以前對於這些方法掌握度沒這麼高的時候，
只知道這些方法就是利用迴圈的概念去做一些事情，
所以常常會混雜著亂使用，後來和很多大神實際接觸後，
其實這些陣列的操作方法還是得依照實際用途來使用，
即使結果一樣，但可能會因為使用的方法不太合適，
而需要多一道工，或是程式碼呈現的語意讓其他人看得不太理解。
也是因為這樣，才特別又針對這部分重新思考並理解用法，
那這次的學習筆記就到這裡告一段落了！

如果有哪裡說得不太恰當，也歡迎跟我討論喔～
掰餔！