Javascript:構造体

Question

###実現したいこと
dataの中から10を見つけた時に、構造体(？)に格納し画面に表示する。

    <script type="text/javascript">
      var Info=function(){
      this.x=0;
      this.y=0;
      };
      var data=[10,20,30,10,40,50];
      var info=[];
      var cnt=0;
      for(var i=0;i<=data.length;i++){
        if(data[i]==10){
          cnt=cnt+1;
        for(var j=0;j<=cnt;j++){
          info[j]=new Info();
          info[j].x=data[i+1];
          info[j].y=data[i+2];
          console.log(info[j].x);
          console.log(info[j].y);
        }
      }
    }
    </script>

###理想の完成形
以下のように格納され、表示できること。
20//info[0].x
30//info[0].y
40//info[1].x
50//info[1].y
###現在の表示
20
30
20
30
40
50
40
50
40
50
###コメント
ループのどこが間違えているのでしょうか。いまだに分かりません・・・。
また、今回使用しているものは構造体と呼んでよいのでしょうか？
以上、ご教示の程よろしくお願いします。
※11/20 23:24質問文一部訂正しました。

Answer 1

詳細な要件が不明なので、「理想の完成形」を実現する方法のみに言及しています。

(2017/11/20 23:54 追記)

質問の編集を受けて、要件が理解できた為、改善案を追記しました。

for 文 (訂正前)

• Array.prototype.includes() - JavaScript | MDN

var data = [10,20,30,10,40,50], set = [];

for (var i = 0, len = data.length, value; i < len; ++i) {
  value = data[i];

  if (!set.includes(value)) {
    set.push(value);
    console.log(value);
  }
}

console.log(JSON.stringify(set)); // [10,20,30,40,50]

new Set() (訂正前)

• Set - JavaScript | MDN
• for...of - JavaScript | MDN
• Spread要素が実装された - JS.next

var data = [10,20,30,10,40,50],
    set = new Set(data);

for (var value of set) {
  console.log(value);
}

console.log(JSON.stringify([...set]));  // [10,20,30,40,50]

改善案

function Info (x, y) {
  this.x = +x;
  this.y = +y;
}

var data = [10,20,30,10,40,50], infoList = [];

for (var i = 0, len = data.length, x, y; i < len; ++i) {
  if (data[i] === 10) {
    x = data[i + 1];
    y = data[i + 2];
    infoList.push(new Info(x, y));
    console.log(x);
    console.log(y);
  }
}

console.log(JSON.stringify(infoList)); // [{"x":20,"y":30},{"x":40,"y":50}]

また、今回使用しているものは構造体と呼んでよいのでしょうか？

JavaScriptに「構造体」は存在しません。
new Info は単純なオブジェクトですね。

更新履歴

• 2017/11/20 23:54 改善案を追記

Re: yu-kos さん

Comments

[yu-kos]

改善案を使い、無事自分の思っている動作を確認できました。
オブジェクトというのですね。勉強になります。
一つ質問なのですが、this.x=+x; の+xはどのような意味ですか？
お時間ありましたらよろしくお願いします。

[think49]

+x は Number 型へ変換します(Number(x) と同じ動作)。
x値, y 値にNumber型を期待しているように読めた為、型変換処理を入れました。。

[think49]

後で気が付きましたが、「改善案」は一度参照した要素にも反復処理してしまう問題があるので、下記コードに直すといいですね。
x = data[++i];
y = data[++i];
data = [10,10,10,10,10,10] の処理結果を確認すれば、違いが分かります。

Answer 2

仕様があまりわかりませんが、

          cnt=cnt+1;
        for(var j=0;j<=cnt;j++){

これ必要？
＆iのforにおいて10が見つかったときにi+2までデータ使ってるから、i+2してから次のループしにしないと行けないような。

例：

    <script type="text/javascript">
      var data=[10,20,30,10,40,50];
      var info=[];
      for(var i=0;i<=data.length;i++){
        if(data[i]==10){
          var wk={x: data[i+1], y:data[i+2]};
          console.log(wk.x);
          console.log(wk.y);
          info.push(wk);
        }
      }
      console.log(info);
    </script>

Answer 3

for(var j=0;j<=cnt;j++){
  info[j]=new Info();
  info[j].x=data[i+1];
  info[j].y=data[i+2];
  console.log(info[j].x);
  console.log(info[j].y);
}

ここで下手にcntを使っているのが原因ですね。

• 1回目に10を見つけた時 -> cnt = 1 -> j = 0なので、1になるまでの2回繰り返し -> logが2回
• 2回目に10を見つけた時 -> cnt = 2 -> j = 0なので、2になるまでの3回繰り返し -> logが3回

一回cntから離れて考えてみてはどうでしょうか?

私も作ってみましたけど、forEachを使うという、forを使う人から見ればある意味ズルい?ことをしてみました。参考までに。

var Info = function(){
  this.x = 0;
  this.y = 0;
};
var data = [10,20,30,10,40,50];
var infos = [];
data.forEach(function(n,i,arr){
  if(n == 10){
    var info = new Info();
    info.x = arr[i+1];
    info.y = arr[i+2];
    infos.push(info);
  }
});
infos.forEach(function(info){
  console.log(info.x);
  console.log(info.y);
  // console.log("x : " + info.x + " , y : " + info.y);
});

出力

20
30
40
50