Javascript初學筆記3 陣列Array處理方法(map(),filter(), find())

JS內的陣列處理方法相較起來我認為比較難懂一些，原因在於這些方法通常會含有個callback function在內，一開始真的很容易看不懂，我試著用我的方式理解這幾個常用的方法 希望能幫助其他人再多做點了解，若是內容有誤你又好巧不巧點進來，麻煩告知我修正~!謝謝!

map , filter , find

我先優先處理比較簡單的三個，其他我下一篇再說明，這三個method我採用同一組例子進行說明。設想今天有個流體力學的考試，身為課程的助教你看了一下成績覺得這真他媽的該死，於是你想根據這個分數array做以下的處理 。
test = [90,45,67,85,20,70]
1.找出所有及格的同學(filter)
2.根據排列順序，找出第一個超過90分的分數(find)
3.分數實在太悽慘，所以打算用開根號*10進行調分(map)

test = [90,45,67,85,20,70] 
let filtering = test.filter(item => item > 60) \\ [ 90, 67, 85, 70 ] 
let finding = test.find(item => item >= 90) \\90 
let adjustment = test.map(item => Math.round(item**0.5*10))
\\  [ 95, 67, 82, 92, 45, 84 ] 

接著我們針對這三個方法做一下較為細部的說明。
1. filter
能根據你給的條件過濾所指定的陣列，並將結果存為一個新陣列，原陣列不受影響。
2. find
與filter類似，但一旦找到滿足條件的數字則立即回傳值，可以搭配布林運算子使用。
3. map
針對陣列內的每一個元素做加工，並將結果存為一個新陣列，原陣列不受影響 。

注意一下我這邊採用的arrow function ，就是我在文章一開始提到的callback function
這個function沒有名稱，僅傳入一個變數作為陣列內的迭代，作為以上三個方法的條件式，你可以把他想成一組搭配的使用，最原始的寫法如下

let  filtering  = test.filter(function(item, index, array){ 
此處放入你要的條件式
}; 

在這個callback function中原先有三個變數，分別是內容/索引數/以及完整陣列
你可以採用你想要的變數命名，我們修改上面filter的例子做說明。

let filtering = test.filter((x,y) => y > 2) 
\\[ 85, 20, 70 ] 

看了上面的例子你會發現，不輸入所有變數也可以照常運行，但第二個傳入的變數一定為索引數(index)，所以上面的例子就會輸出index > 2 的三個數字。
後續的方法都會按照類似的格式去寫，只要充分理解其中一項就會覺得輕鬆了很多，配合arrow function我認為比較好懂，所以之後的函數我都盡量採用arrow去寫。