[Javascript] 配列やオブジェクトの一括処理でreduce機能を使うのが便利と気がついた話

2022年4月29日

Javascript テクノロジー

eyecatch 効率的なプログラミングは、そのプログラム言語の裏技を使う事が多いと言うことに気がついた、ユゲタです。 最近、ちょっと色々なところでニーズがある、ゲームを作っていた時に、プログラム内でセットされている多重配列の任意の値を合計する処理を書こうとしたら、 for文の階層がアホみたいに多くなって、ネスト深常態になって、ソースコードが汚く見えたので、もっとスマートに書けないものかと思考して、 リファレンスサイトで見つけた、reduce機能というのを使って、その汎用性の高い関数という事に気がついた話をします。

2重配列のそれぞれの行の合計を簡単計算する方法

次のような多重のデータがある場合、 var datas = [ [1,2,3,4,5], [6,7,8,9,10], [11,12,13,14,15], [16,17,18,19,20], [21,22,23,24,25] ]; 配列が2重になっていて、それぞれの行の合計を取得するコードです。 const sum = [] for(let data of datas){ sum.push(data.reduce(function(s,n){return s + n},0)) } console.log(sum) > [15, 40, 65, 90, 115]

reduce機能を理解する

ちなみに、reduce機能を簡単に理解できるように、単純配列を例にしてみたいと思います。 ここでは、上記のデータの1つ目のデータを例にとって、 [1,2,3,4,5].reduce(function(s,n){return s + n},0) > 15 このような構文になります。 簡単に解説すると、配列に対して、reduce(function(設定値 , データの値){... , 設定値}) という感じでfunctionの中は自由に記述できるので、合計値だけでなく、文字列連結や、色々な条件文を記述する事ができます。 ちょっとわかりにくいのが「設定値」と書かれた部分はなんの役割をするかというと、reduce処理をする時の、返り値にしたい値の初期設定値としてセットすることができます。 合計値を求めたい場合は、0を入れておくといいでしょう。 削除してもシンプルな処理の場合は、合計値が求められますが、複雑な処理を書いた時に、バグった事があるので、確実に書いておいた方がよさそうです。

2重配列のそれぞれの列の合計を簡単計算する方法

さらに先ほどの2重配列データの列の合計を計算したいという場合もあるかと思うので、それを書いてみると、 const sum = [] const colCount = datas[0].length for(let i=0; i<colCount; i++){ sum.push(datas.reduce(function(s,n){return s + n[i]},0)) } console.log(sum) > [55, 60, 65, 70, 75] ちょっと複雑になってしまいましたが、今回は、行それぞれの配列データの個数が同じである事が条件にしていますが、個数が変わる場合は、最大値をcolCountに入れて、n[i]とインクリメントしている箇所に、配列データが存在しないときは0の値を入れるように三項演算子などで書き込む必要があります。 でも、多重にfor文を組むことを考えると、比較的シンプルに書けるreduce機能は、かなり便利に使える機能だと完璧に理解する事ができました。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。