紹介する経緯
reduceの使い方を見ていると、配列の要素を全て足す処理など集計系の記事が多かったので、今回は実用的なreduceの使い方を紹介します。
(備忘録的な意味も含めて)
reduceの簡単な説明
ここでは説明を省きますが、操作したい配列が空配列(要素数が0)の場合エラーが出ますので、第2引数の初期値は設定しておいた方が良いです。
-
accumulator(前回の値)
初期値はinitialValueで設定できます。
設定しない場合はarray[0]番目が初期値になる。 -
currentValue(現在の値)
配列内で現在処理されている要素。 -
currentIndex
配列内で現在処理されている要素のindex番号。 -
array
現在操作されている配列 -
initialValue
第2引数で初期値を設定できる。
sample.js
array.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator
}, initialValue)
実用的な使い方
電話番号、郵便番号等の値を配列として保持している場合など多いのではないでしょうか？
配列で値を保持していて、API側にpostする際にハイフン区切りの文字列として整形するなどあるあるだと思います。
hoge.js
// 電話番号、郵便番号のなどの値を管理している配列
const array = ["000","1234","9470"];
const convert_value = array.reduce((prev, current) => {
return prev || current ? `${prev}-${current}` : '';
});
簡単な解説
- prev・・処理前の値(直前の処理結果)
- current・・現在の要素の値
下記テーブルを使用し何をしているのかを可視化しました。
| ループ回数 | prev | current | retunされる値 |
|---|---|---|---|
| 1 | 000 | 1234 | 000-1234 |
| 2 | 000-1234 | 9470 | 000-1234-9470 |
下記コードにて、prev、currentのどちらかの値がtruthyの場合、前回の値と現在の要素の値でハイフン区切りにしています。
最終的には、000-1234-9470の文字列が返却されます。
hoge.js
return prev || current ? `${prev}-${current}` : '';
参考にさせていただいたサイト・記事
参考：Array.prototype.reduce()：ドキュメント
参考：reduceの使い方まとめ(Javascript、配列の合計など)