JavaScript 初歩のまとめ ⑩ 配列

前回の 配列のまとめの続きです。

多次元の配列

配列は 変数と同じように 何でも代入することができますが、配列の要素に 配列を代入することもできます。多次元の配列という呼び方の他、配列のネスト、入れ子の配列 等と呼ぶこともあります。値にアクセスする書き方も一緒に ためしてみます。



ex.1
var arr = new Array(3);
arr[0]  = new Array('a', 'b' 'c');
arr[1]  = new Array('d', 'e' 'f');
arr[2]  = new Array('g', 'h' 'i');
document.write(arr[2][0], '<br>', arr);

1行ずつ見てみます。

1行目　 配列要素数が 3 の配列 arr を生成しています。

2行目　 a, b, c という 3つの文字列を 要素に持つ配列を生成して 配列 arr の 0 番目に 代入しています。

3~4行目　2行目と同様のことを 配列 arr の 1番目と2番目に対して行っています。

5行目　いつものように document.write(); で配列の中身を表示させています。

とりあえず 実行結果を確認してみます。

ex.1 の実行結果

最初に g と表示されました。g が代入されているのは、arr[2] に代入された配列の 0番目 です。5行目を もう一度見てみると表示させる要素の最初が

arr[2][0],

となっています。これが多次元配列に代入された値に アクセスする書き方です。

変数名[添字n][添字m]

変数名の n 番目に代入されている配列の m 番目の要素 という意味です。

とてもややこしいですけど、慣れてしまえば何とかなりそうです。ついでに 実行はしませんが、ex.1で 次の書き方をしたら 何の文字が表示されるか クイズみたいに考えてみましょう。 

arr[1][2], arr[0][0], arr[2][1]　　答えは、f,a,h です。

本題に戻って、次に表示させたのは これもいつもの 見やすくなるかと思って入れている 改行タグです。最後に 配列 arr を添字無しで表示させてみました。普通の配列のときと同じように、丁寧に 全部の配列要素を カンマ区切りで 表示してくれました。

次に 多次元配列は書き方が ゴチャゴチャしていて 判りにくいので、普通の配列ではできた  new Array を使わない簡単な書き方が 多次元配列でも使えるかをためしてみます。

ex.2

var arr = [['a', 'b', 'c'], ['ア', 'イ', 'ウ']];
document.write(arr[0][2], '<br>', arr[1][2]);

ex.2 の実行結果

ちゃんと使えました。こっちの書き方の方が スッキリして見やすいと思います。

ところで、多次元配列という名前から判るように、配列は 幾つでも入れ子にできます。ex.2 と同じ書き方で ちょっとだけためしてみます。

ex.3
var arr = [['a', 'b', 'c'], [['d', 'e'], ['f', 'g']]];

document.write(arr[1][0][1], '<br>', arr);

ex.3 の実行結果

[ ] を何個も繰り返して書くことで、幾らでも入れ子にできるみたいです。とてもややこしいし、3回以上はさしあたって 必要になる場面も少なそうなので、確認できただけでよしとします。

連想配列

連想配列は 配列の添字に数字の代わりに文字列を使った物のことです。代入された値に関連のある 文字列を添字に使うことで、管理しやすい配列になります。
添字が数字の配列には、0 から始まる順番がありますが、連想配列に代入された値は 基本的に順不同です。

ex.4
var population = {'USA':31450000, 'Japan':12650000, 'China':134890000};
document.write(population['China'], '<br>', population['USA']);

ex.4 の実行結果

国名を添字にして、その国の大まかな人口を連想配列にして 表示させてみました。また 次のような書き方もできます。

ex.5

var population = {USA:31450000, Japan:12650000, China:134890000};
document.write(population.China, '<br>', population.Japan);

ex.5 の実行結果

代入する時に 添字の文字列をクォーテーションで囲まずに、参照する時には [ ] ではなくて ピリオドで区切っても 同じように表示されています。この書き方は、もう少し後でまとめようと思っている オブジェクトを扱うときの書き方と とても似ています。

調べてみたら、配列は オブジェクトの一種ということでした。どういうことなのかもう少し調べてから、オブジェクトについてまとめを書きますので、続きはそのときに…。