[JavaScript]2つの配列の値を合計し平均値を出す方法

下記のコードは、自分で作成したコードなのですが、もう少しシンプルに書く方法があったら教えて頂きたいと思いご質問させて頂きました。
コードで実現したいこととしましては、配列変数、「data1」と「data2」の値を合計し、平均値を出し、さらに、求めた平均値以上の値を全て出力する、といった内容です。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>practice</title>
6    </head>
7    <body>
8        <script>
9        
10        var data1_sum = 0;
11        var data2_sum = 0;
12        var ave = 0;
13        
14        var data1 = [59, 39, 100, 2, 15, 40, 84, 97];
15        var data2 = [63, 18, 64, 97, 50, 98];
16        
17        for(var i = 0; i < data1.length; i++){
18            
19            data1_sum += data1[i];
20        }
21        
22        for(var i = 0; i < data2.length; i++){
23            
24            data2_sum += data2[i];    
25        }
26        
27        ave = (data1_sum + data2_sum) / (data1.length + data2.length);
28        
29        document.write("<p> data1とdata2を合わせた平均値" +  ave + "</p>");
30        
31        for(var i = 0; i < data1.length; i++){
32            
33            if(data1[i] >= ave){
34                
35                document.write("<p>data1:" + data1[i] + "</p>");
36            }
37        }
38        
39        for(var i = 0; i < data2.length; i++){
40            
41            if(data2[i] >= ave){
42                document.write("<p>data2:" + data2[i] + "</p>");
43            }
44            
45        }
46        
47
48        
49        
50        
51        
52        
53            
54        </script>
55    </body>
56</html>

よろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは。

たとえば以下のようなやり方でいかがでしょうか。
（※ 下記のコードは、https://jsfiddle.net/jun68ykt/qgyar358/16/ にも上げておきました）

javascript
1const 
2  data1  = [59, 39, 100, 2, 15, 40, 84, 97],
3  data2 = [63, 18, 64, 97, 50, 98],
4  dataAll = data1.concat(data2);  // data1 と data2 を連結した配列
5
6const ave = dataAll.reduce((sum, e) => sum + e) / dataAll.length; // 平均を求める
7
8const results = [data1, data2].map((data) => data.filter(e => e >= ave)); // 平均以上の要素から成る配列を作成
9
10console.log(results[0]);   // data1 の要素で平均以上のもの： [59, 100, 84, 97]
11console.log(results[1]);   // data2 の要素で平均以上のもの：  [63, 64, 97, 98]

上記を実行すると以下が表示されます。

[59, 100, 84, 97]
[63, 64, 97, 98]

参考になりましたら幸いです。

補足

reduce を使って合計を算出するのは、以下の質問

https://stackoverflow.com/questions/10359907/array-sum-and-average

で、多数の Good がついている回答（上から２番目）にも、次のようなサンプルで出ています。

javascript
1var sum, avg = 0;
2
3// dividing by 0 will return Infinity
4// arr must contain at least 1 element to use reduce
5if (arr.length)
6{
7    sum = arr.reduce(function(a, b) { return a + b; });
8    avg = sum / arr.length;
9}
10
11document.write("The sum is: " + sum + ". The average is: " + avg + "<br/>");

ただし、上記の回答についているコメント

elegant !== fast. Array.prototype.reduce requires the execution of a function on each iteration which is far slower (orders of magnitude) than running a simple loop. jsperf.com/speedy-summer-upper – furf May 7 '13 at 18:47

からのリンク先にあるように、処理の速さをとるなら、ループのほうがよいです。特に、配列の要素数が多くなったときに差が出てきそうです。

投稿2018/06/27 11:05

編集2018/06/28 00:28

jun68ykt

総合スコア9058

newyee

2018/06/28 00:28

ご丁寧にご回答いただきましてありがとうございます。すみません。他の方のご回答も頂いているのですが、自分のスキルレベル以上のことを考えず質問してしまったなと反省しております... 実は、正直なことを申しまして、質問内容に関係なく、ご回答下さった構文においても理解できていない状況でして... せっかくご丁寧にご回答くださったのに、本当にすみません... この質問に関しましては、きちんと勉強をし、ご回答下さった内容が理解できると思った時にまた、ご参考にさせて頂きたいと思っております...

jun68ykt

2018/06/28 00:31

なるほどです。頑張ってください。

行動規範の内容に同意します

下記の記事がほぼそのまま参考になると思います。

[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める

投稿2018/06/27 09:48

m.ts10806

総合スコア80890

newyee

2018/06/28 00:10

ご回答ありがとうございます。動物病院の予約システムの件では、アドバイス＆ご指摘頂きましてありがとうございました。貼って頂いたリンクなのですが、まだ僕自身知識不足すぎて、理解できない部分が多いですので、もう少し勉強をし理解できるようになったと思った際にご参考にさせて頂きたいと思っております。後、質問させて頂いた内容とは関係がないのですが、質問全般のことに関してお聞きしたいことがございまして... 僕自身、プログラミンの勉強をしている際に、分からないことがあったら何度も質問させて頂いているのですが、自分のスキルレベルが低い状態ですと、ご回答下さっても、理解できない部分が多々あります。実際は、自分が現在のスキルレベルよりも高い内容のことをご質問しているかもしれないとは認識はしているのですが、もしかしたら自分でも分かるかもしれないと思いご質門させて貰っているんですよね... 今回の場合ですと、まだ配列の所までしか学習が終わっていないのに、関数も絡んでくるだろうという認識はありながらも質問させて頂きまして... 長々と関係ない質問すみません。

m.ts10806

2018/06/28 00:20 編集

えーと。まず理解できてない云々を言い訳にするのではなく、実際に動かしてみればいいだけの話です。「これがこうなるのか」と実体験すればそれが知識になり続けていくうちに「今度はこう使えるんじゃないか」と応用につながる。提示した記事で今質問者さんがやっているのは「イケてない実装」の方そのままです。そこは分かりますよね？ほぼ同じコードなので。だからこそ「これがこうなる、こう変化させられる」というイメージがつきやすいと思ったのですが。 teratailの「質問するときのヒント」に書いてあることがまさにやるべきことです。 https://teratail.com/help/question-tips#questionTips2 >質問をする前に自分で何がわからないのかを把握しましょう >今置かれている状況を整理し、わかっている範囲とわからない範囲を明確にしましょう何一つ分かってないということはないはずです。ただ単に「分かっていることの中に分かっていないことが出てきたら”全て分かってない”と錯覚してしまっている」だけです。落ち着いて見てみれば見覚えのある表現がでてきているはずです。分かっている範囲と分からない範囲が明確にできたら、あとは「分からない範囲」を調べて分かっている範囲との連携部分とか辻褄をあわせていくものです。英語の文章とかまさにそれですね。中学卒業程度の授業を受けていたら一文全て分からないということは滅多にないです。分からない部分を辞書を引いて文章として成り立つ形を目指していく。そうすると意味が通じるようになる。それと同じだと思います（まあ日本語のちょっと難しい小説読むときとかでも同じことが言えます）

newyee

2018/06/28 10:12

分かりました。取り敢えずは、理解できない部分があったとしても、ご回答くださったコードを写してみるなどして、実行してみたいと思います。いつもご丁寧なアドバイス＆ご指摘感謝致します。

行動規範の内容に同意します

質問に関しては　jun68ykt様が記述しておられるものが一番コード数が少なく限りなく正解に近いかと！

回答済みになっていないということはまだ理解ができておられない、ということで私なりに補足しますと

javascript
1dataAll = data1.concat(data2);  // data1 と data2 を連結した配列

ここはconcat関数で単純にdata1とdata2を結合しています。

javascript
1dataAll.reduce((sum, e) => sum + e)

ここではreduceという関数を使用して前手順で結合した配列（dataAll）の合計値を求めています。
reduce関数は配列の最初の要素から後方の要素へ与えられた関数を同時に適用していきます。( sum+ e の部分)

分かりやすくすると

javascript
1dataAll.reduce(function(a , b){ return a + b });

といった感じでしょうか。
aには最初の引数、bには2番目の引数が渡されますので、59 + 39がreturnされます。
その次は59 + 39（=98）の値がaに代入され、bには3番目の要素100が入ります。
これが自動的に行われ続け配列内の値の合計が求められると考えて問題ないかと。

その後

javascript
1/ dataAll.length;

の一文でdataAll内の配列要素数で割っています。
arr.lengthプロパティはその配列の要素数が入るようになっています。

少しでも理解、解決の手助けになれば。

投稿2018/06/28 09:29

unorigino

総合スコア128

jun68ykt

2018/06/28 09:32

丁寧な解説、ありがとうございます！

newyee

2018/06/28 10:25

ご丁寧にご解説頂きありがとうございます。おおよそ把握することができました。まずは、実際にコードを実行してみて、多少の分からない部分などは調べながら、確かめていきたいと思っております。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問