filter() map() reduce()の意味と使い方

filter()の使い方

filterメソッドは配列の要素を指定した条件で絞り込む関数です。
配列を1つ1つ判定して、関数の中でtrueになったものだけをまとめて配列として返します。
trueとなったもののみを配列として返すだけなので、実際に処理を加えるわけではありません。
Arrayオブジェクトが持つ関数なので配列にのみ仕様できます。

const array = [1, 2, 3, 4, 5]
const newArray = array.filter(value => {
    return value > 3
})

console.log(newArray)

// 出力結果
> [4, 5] //配列として返す

map()の使い方

mapメソッドはfilterメソッドと違い、配列の各要素に処理を加えるメソッドです。

const arr = [10, 20, 30, 40, 50];

// mapの場合
const mapResult = arr.map(value => {
  return value / 2;
});
console.log(mapResult); //[5, 10, 15, 20, 25]実際に処理を加える

// filterの場合
const filterResult = arr.filter(value => {
  return value / 2;
});
console.log(filterResult); //[10, 20, 30, 40, 50]処理可能(true)のものだけ絞り込んで返す

reduce()の使い方

mapとfilterの処理を一つの関数内で同時にできます。

//reduceの文法
//配列.reduce(collback, 初期値)
//callbackのprevは初期値で[],currは現在の配列の値即ちnumbersのこと

const numbers = [1,2,3,4,5];

const doubledEvenNumbers = numbers.reduce((prev, curr) => {
  if (curr % 2 === 0) {//ここでfilterがやっていた絞り込み処理を行う
    const doubledEvenNumber = curr * 2;//filterで絞り込んだに処理を加える（mapの処理）
    prev.push(doubledEvenNumber);　//初期値の[]にdoubledEvenNumberをpush
  }
  return prev;
}, []);

console.log(doubledEvenNumbers); // [0, 4, 8]