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

2018-10-27 11:25:26 | 日記

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

 

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

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

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

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

 

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

 

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

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

 

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

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

 

 

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

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

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

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

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

 

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

①各配列は、先頭が必ず4の倍数(0、4、8、12)である

②各要素は「先頭の数字(①) + {0,1,2,3}である、 ということを

 

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

幅:4、
(y、x)=(1、1)

ですよね?

幅 * Y + X=(4×1)+1=

 

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

 

 

 

 

 

おや!!??

お気づきじゃない!!??



 

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

 

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

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

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

 

index = 幅 * Y + X

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

 

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

 


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

コメント   この記事についてブログを書く
« webサイトのアクセス数は、ペ... | トップ | 冷蔵庫の“萌え系”擬人化キャ... »
最新の画像もっと見る

コメントを投稿

日記」カテゴリの最新記事