4 JavaScript Array methods you must know

4個 常常會用的陣列方法

• Array.prototype.map()
• Array.prototype.filter
• Array.prototype.reduce()
• Array.prototype.find()

用了一張圖來解釋此四種方法的陣列關係
共同點就是：此四種方法對陣列內每個元素進行同樣處理

1.map()

const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]

將陣列列元素⼀個⼀個抓出來,將執⾏結果存成另⼀個陣列

2.filter()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

Array.filter( 函數 )
根據函數回傳值 ( True / False)決定要不要把元素複製到新陣列
filter 方法允許我們在做一些條件篩選，最後依照 return 的結果來判斷要不要把陣列到另一個陣列裡頭。

3.reduce()

這是我個人覺得比較難理解的陣列，可以快速用於加總甚至是排序方法
https://www.youtube.com/watch?v=IXp06KekEjM

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

4.find()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1

find() 只會回傳一次值，且是第一次為 true 的值，常用在搜尋關鍵字上面。

參考文章

常用陣列方法