for文の中身が理解できません、ご教示お願いいたします。

Question

前提・実現したいこと

tetrisの作成のゲーム盤の読み込みで困っています
for文の中身が理解できません

該当のソースコード

function loadTable() {
  cells = [];
  var td_array = document.getElementsByTagName('td');
  var index = 0;
  for (var row = 0; row < 20; row++) {
    cells[row] = [];
    for (var col = 0; col < 10; col++) {
      cells[row][col] = td_array[index];
      index++;
    }
  }
}

ここにより詳細な情報を記載してください。
for文の中でどのようなことが行われているのか理解できていないです。
ご教示お願いいたします。

Answer 1

cells = [];
var td_array = document.getElementsByTagName('td');
var index = 0;
for (var row = 0; row < 20; row++) {
  cells[row] = [];
  for (var col = 0; col < 10; col++) {
    cells[row][col] = td_array[index];
    index++;
  }
}

これを日本語的な書き方にすると

cellsっていう空の配列を定義。
td_arrayにタグの名前が「td」な要素を全て取得し突っ込む
変数indexを0と定義
変数rowを0と定義し、rowが10未満の時に以下の処理を行う、処理一回につきrowに１を足す
  celssのrow番目を空の配列と定義
  変数colを0と定義し、colが10未満の時に以下の処理を行う、処理一回につきcolに１を足す
    cellsのrow番目の中のcol番目にtd_arrayのindex番目を代入
    indexに１を足す

完全余談

function loadTable() {
  cells = [];
  var td_array = document.getElementsByTagName('td');
  for (var row = 0; row < 20; row++) {
    cells[row] = [];
    for (var col = 0; col < 10; col++) {
      cells[row][col] = td_array[row*20 + col];
    }
  }
}

Comments

[watermelon777]

ご回答ありがとうございました、理解することができました、ありがとうございました

Answer 2

テーブルにセルが200個あるのを順番にcellsに二次配列的な収め方をしています

Comments

[watermelon777]

その中で
cells = [];
と
cells[row][col] = td_array[index];
index++;
こちらはどのような意味を表しているか、教えていただけると幸いです

[yambejp]

> cells = [];

cellsは空の配列ですよ、という宣言

cells[row][col] = td_array[index];

cells配列のrow行目のcol列目にtdをindex順に流し込んでいます
処理が終わったらindex++・・・インクリメントして
次のループで次の項目を埋めています

あまりきれいなコードじゃないですね

[yambejp]

ほぼほぼコピペするとこう

<table id="t1" border="1">
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td>e</td><td>f</td></tr>
<tr><td>g</td><td>h</td><td>i</td></tr>
<tr><td>j</td><td>k</td><td>l</td></tr>
</tbody>
</table>
<div id="view"></div>
<script>
var cells=[];
var td_array = document.getElementsByTagName('td');
var index = 0;
for (var row = 0; row < 4; row++) {
cells[row] = [];
for (var col = 0; col < 3; col++) {
cells[row][col] = td_array[index].textContent;
index++;
}
}
document.querySelector('#view').textContent=JSON.stringify(cells);
</script>

[yambejp]

td_array[index].textContentではなく
td_array[index]をcellに流し込んでいるので、実際には
cellsに収まっているのDOM要素というtdタグ自体

Answer 3

cells[row] = [];

と、

cells[row][col] = td_array[index];

は、なにをしてるのか理解できますか？

Comments

[watermelon777]

すみません、、そのあたりがつまずきの1つ目です。
googleで検索などしたのですが、検索力が足りないのかイマイチ出てきてくれなくて、、
教えていただきたいです