javascriptで配列を比較する

javascriptの勉強をしています。
現在、配列の課題を行っています。

配列に入れた値が、50未満ならその数を表示する、という
プログラムを作ろうとしていますが、うまくいきません。

以下、ソースになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>課題</title>
    <script>
        var data = [59, 39, 100, 2, 15, 40, 84, 97];

        /* 以下に課題処理を追加 */
        for (var i = 0; i < data.length; i++){
          document.write(data[i] + "<br>");
        }

    /* 配列内の値が50未満の物がいくつあるか */
        if (data.value() < 50){
          document.write(data.length);
        }
    </script>
</head>
<body>
</body>
</html>

調べたところ、indexOfが使えるかと思ったのですが、使い方がわかりません。
配列内の値を取得→ifで50未満の場合のみ表示、という流れだと考えています。

よろしくお願い致します。

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

回答3件

配列内の値を取得→ifで50未満の場合のみ表示、という流れだと考えています。

とおっしゃっていますが、

以下、ソースになります。

に書かれているソースコードでは、そのようにプログラムしようとしている形跡が見られません。「if で50未満の場合のみ表示」というロジックはどこに書こうとしたのでしょうか？

繰り返しの中で

javascript
1if (data[i] < 50) {
2  // data[i] を表示
3   ...
4}

としてみてはどうでしょうか。

####回答案1
あと少しですが、完成させると、以下のようになると思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>課題</title>
6  <script>
7  var data = [59, 39, 100, 2, 15, 40, 84, 97];
8
9  for (var j = 0; j < data.length; j++){
10    document.write(data[j] + "<br>");
11  }
12
13  /* 以下に課題処理を追加 */
14  var count = 0;
15  for (var i = 0; i < data.length; i++){
16    if (data[i] < 50) {
17      document.write(data[i] + "<br>");
18      count++;
19    }
20  }
21  /* 配列内の値が50未満の物がいくつあるか */
22  document.write(count);
23  </script>
24</head>
25<body>
26</body>
27</html>
28

####回答案２
ブラウザで表示したときに、何が表示されているのかわからないので、見出しなどをつけたほうが良いと思います。あと、 Javascript の配列のメソッドを使えばもう少し短く書けます。以下では、 Array クラスの length 属性とfilter, toString メソッドを使っています。toString メソッドは document.write の中で暗黙的に呼び出されています。

参考：Array

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>課題</title>
6  <script>
7  var data = [59, 39, 100, 2, 15, 40, 84, 97];
8
9  document.write("データ = " + data + "<br>");
10
11  /* 以下に課題処理を追加 */
12  var filteredData = data.filter(function (item) {return item < 50;});
13  document.write("50未満のデータ = " + filteredData + "<br>");
14
15  /* 配列内の値が50未満の物がいくつあるか */
16  document.write("個数 = " + filteredData.length);
17  </script>
18</head>
19<body>
20</body>
21</html>
22

投稿2016/11/06 11:28

編集2016/11/07 00:16

mit0223

総合スコア3401

Kyouko_kisaragi

2016/11/06 12:07

解答ありがとうございます！いただいたヒントを元に、以下のソースを組んでみました。 var data = [59, 39, 100, 2, 15, 40, 84, 97]; for (var j = 0; j < data.length; j++){ document.write(data[j] + "<br>"); } /* 以下に課題処理を追加 */ for (var i = 0; i < data.length; i++){ if (data[i] < 40) { document.write(data[i] + "<br>"); } } これで『50以下の値』そのものは表示されるようになりました。ですが、『50以下の値がいくつか』は表示されません。 data[i].lengthでいけるかと思いましたが、エラーが出てしまいました。個数を表示するには、どうすればいいでしょうか。

naomi3

2016/11/06 13:50

カウンタを作り、50以下の値が出てくればカウンタをインクリメント、そうでなければインクリメントしない。それをすべてのデータについて繰り返し、最後にカウンタを表示、ではどうですか。

Kyouko_kisaragi

2016/11/10 11:03

遅くなり大変申し訳ございませんでした。無事に解決致しました。ありがとうございます！

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

ベストアンサー

for文で比較しながら表示、数量計測用変数を一個用意しておいてカウントアップという方法は（普通はこうするかな）ほかの回答者様からでているので、別のアプローチ

javascript
1<script>
2    var data = [59, 39, 100, 2, 15, 40, 84, 97];
3    
4   // filterを使って条件にあう要素のみピックアップ
5    var data2 = data.filter(function(element) {
6        return (element <= 50);
7    });
8
9    for (var i = 0; i < data2.length; i++){
10      document.write(data2[i] + "<br>");
11    }   
12    document.write('50未満の個数は'+data2.length+'個');
13
14</script>

投稿2016/11/06 16:12

hiim

総合スコア1689

別のアプローチで。

JavaScript
1document.body.insertAdjacentHTML( 'beforeend', '50未満の個数は' + 
2	[ 59, 39, 100, 2, 15, 40, 84, 97 ].reduce( ( previous, current ) => {
3		if ( current < 50 ) {
4			document.body.insertAdjacentHTML( 'beforeend', current + '<br>' );
5			previous++;
6		};
7		return previous;
8	}, 0 ) + '個'
9);
10```**動くサンプル：**[https://jsfiddle.net/khcqa9x5/1/](https://jsfiddle.net/khcqa9x5/1/)
11
12【Array.prototype.reduce() - JavaScript | MDN】
13[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
14
15【element.insertAdjacentHTML - Web API インターフェイス | MDN】
16[https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)