Reactでポートフォリオ のアプリを作成し始めたのですが、
その時使った配列操作の map、filter、reduceについて、
書き方と使い方をまとめておきます。
※文法に集中する為、Reactの書き方は全て排除しJavaScriptのみでまとめてます。
mapメソッド
mapは元々の配列から操作して、新しい配列を作ります。
具体的な例はこんな感じ↓
incomeItems = [{text: "本の売却", amount: 500, id: 123343434}, {text: "宝くじ", amount: 5000, id: 123454523}]
const incomeAmounts = incomeItems.map(incomeItem => incomeItem.amount);
//結果 incomeAmounts = [500,5000]
incomeItemsはオブジェクトの配列です。
中にはユーザーが入力した「text」と「amount」、ランダムなIDが入ってます。
そのincomeItemsに対してmapメソッドを使ってます。
【アロー関数でのmapの書き方】
配列. map ( value => 新しい配列としてリターンしたい内容 )
第二引数にindex、第三引数に実行しているarray自身を入れることもできます
配列. map(( value, index, array ) => 新しい配列としてリターンしたい内容 )
mapを使ってincomeAmountsという数字だけを取り扱う用の配列が作れました。
filterメソッド
filterメソッドは条件に合致した要素で新しい配列を作ります。
今回のアプリでは、ユーザーがdeleteボタンを押した時に、その項目が削除されるという操作のため使いました。
具体的な例はこんな感じ↓
incomeItems = [{text: "本の売却", amount: 500, id: 1}, {text: "宝くじ", amount: 5000, id: 2}]
//onClickなどでdeleteHandlerを実行させる
const deleteHandler = () => {
setIncomeItems(incomeItems.filter((e) => e.id !== incomeItem.id));
}
//結果: incomeItems = [{text: "宝くじ", amount: 5000, id: 2}]
incomeItemsにユーザーが入力した内容がオブジェクトの配列として入ってます。
その配列に対してfilterを実行し、各配列の要素(e)のidとincomeItemのid(
消したいitem）を比べてます。
idが一致しない要素だけのincomeItemsの配列が出来上がります。（=削除以外の項目）
【filterの書き方】
配列. filter ( ( element ) => 条件)
これもまた第二引数にindex、第三引数に実行中のarray自身を指定できます。
配列. filter ( ( element, index, array ) => 条件)
filterを使ってユーザーが削除した以外の要素を取り出せました。
reduceメソッド
reduceは配列の各要素を一つにできます。累積系に便利ということです。
今回のアプリでは、配列の中にある数値の合計を出してみました。
具体的な例はこんな感じ↓
incomeAmounts = [500,5000]
const incomeTotal = incomeAmounts.reduce((acc, cur) => acc += cur, 0);
//結果: 5500
incomeAmountsの配列に対してreduceを実行してます。
reduceの第一引数(arr)は、前までに蓄積された値で、第二引数(cur）は、現在の値が入ります。
この場合「合計」を出したいので、蓄積の値(arr）と現在の値(cur）を足して一つの要素として返してます。
【reduceの書き方】
配列. reduce ( ( accumulater, current ) => 条件, 初期値)
今回の例では第二引数までで、0を初期値として渡してます。
なんと引数は４つまで渡せます。
配列. reduce ( ( acc, cur, idx, src ) => 条件, 初期値)
1: (acc) アキュムレーター。前までの蓄積された値
2: (cur) 現在値
3: (idx) インデックス
4: (src) 元々の配列
配列操作のメソッドはもっといっぱいあるで、色々使いながら学んでいきたいですね。