【JavaScript】二次元配列を一次元配列にする、とはどういうこと？要するにこういうこと。

二次元配列から、一次元配列へのマッピングは
index = 幅 * Y + X
これは公式で覚えてください。（Yは縦軸、Xは横軸ですね。）

 

【１】そもそも二次元配列とか一次元配列てなんや？

この公式がどういう意味なのか、を説明する前に、
まず、二次元配列と一次元配列について解説。

一次元配列とは、文字通り
一列の配列ですね。イメージとしたらこんな感じ

箱１つ１つを「要素」と言います。
箱の番号は配列の「添字」と言います。
※必ず0から始まるので注意

 

で、二次元関数ですが、ようするにこうです。

 

まあ、これは言葉を見れば、なんとなくわかりますよね。x方向に配列があって、さらにy方向にも配列がある。２つあるから二次元配列。

では、本題の「二次元配列を一次元配列にする」とはどういうことか。
図で説明するとこうです。

 

複数あった配列が、１列にまとまりましたね。

配列が増えてくると、無駄に複雑になるので、一列にマッピングすることが、しばしば好まれます。

 

 

【２】 index = 幅 * Y + X　について、説明するぞ

さあ、一次元と二次元配列がイメージでわかったところで、
冒頭で出てきた
index = 幅 * Y + X
についての説明です。

テトリスみたいなので考えるといいでしょう。
テトリスのブロックは縦４×横４のマス目に収まります。

▼色を塗ったところが、ブロックだと思ってください。

これを配列に
表すとこんな感じになるわけですよ。（ひとり言『後半、×ばっかりやん？』）
[◎, ◎, ◎, ×]
[ ×, ◎, ×, ×]
[ ×, ×, ×, ×]
[ ×, ×, ×, ×] 

 

さて、ここで１つの法則にお気づきでしょうか？

①各配列は、先頭が必ず４の倍数（０、４、８、１２）である

②各要素は「先頭の数字(①)　＋　{０，１，２，３}である、　ということを

 

 例）〇印の場所を、公式に当てはめて、特定してみましょう

幅：４、
（y、x）＝（１、１）

ですよね？

幅 * Y + X＝（４×１）＋１＝５

 

ちゃんと丸印が特定できました。

 

 

 

 

 

おや！！？？

お気づきじゃない！！？？

 

これって、やってることは実はこうなんです。

 

二次元関数が、いつのまにやら、横並びの「一次元関数」になっているのと同じ計算してないですか？

そして、こうすることで、最初、テトリスの図では「１６要素」だったのに、最大８要素になったのです。

（ひとり言で「×ばっかりやん」と嘆いていた私ですが、無駄がなくなりスッキリしました。）

 

index = 幅 * Y + X

の意味について、少しは理解いただけると嬉しいです。

 

参考サイト「二次元データを一次元配列で扱う際のインデックスの計算方法」

 

---

こんな写真も無料でダウンロード
商用可能なフリー素材、フリー素材ドットコム
http://free-materials.com/