JavaScript 配列のソースを表示新しいページはコチラ

[[JAVA Script#リファレンス]]に戻る。
　

配列はArrayとオブジェクトによりプログラム処理が実現できるようになっています。その前に配列って何？っていう人のための説明もしておかないとダメでしょうか？変数はすでに理解していただけているとして、変数をひとつの記憶をする箱のように例えると、その変数に連続した番号を付与して連結したようなイメージをもってもらえるとよいと思います。


イメージできましたか？ん、できない？そうですね。挿絵をつけましょうか？

[[ファイル:Array Imagination.jpg|200px|thumb|none|配列イメージ]]


あんまり役に立たないか？


で、イメージでは旗のところに配列変数名を書いてnArrという名前をつけています。箱が4つなので、それぞれの箱には左から配列要素番号あるいは添え字という呼び方をして、0～3までの数字を割り振りました。それぞれの箱には具体的にはnArr[0]、nArr[1]、nArr[2]、nArr[3]という変数名を与えることができます。イメージできたでしょうか？


連結した箱にある一定の関連性をもったデータグループとして、準備した箱に必要なデータを入れます。例えば、文字なら、曜日データとして 月、火、水、木、金、土、日。というのがあったら、その文字列を格納するような感じです。他の例でいくと、10回チャレンジできるボール投げの飛距離の結果を数値データとして格納するとか、そんな感じでしょうか？ある程度、関連があるデータを格納するというのが配列のよくある使い方です。もっと例を出しておきましょう。たとえば人気のレンタルDVDがあるとして、その貸出予約表を受け付けるとします。するとデータとしてはその予約者の名前を予約順番どおりに入れるとして、"ゆき"、"あいこ"、"てるみ"、"きょうこ"、"まなみ"というような順序データになります。もっと単純に2進数の1と0だけを入れるような配列として、十進数の12に相当する2進数1100をひとつづつ、1、1、0、0という具合にデータを格納することもできます。文字列はそれ自体が配列になっているという風に考えることもできます。さきほどの予約者順の最初の"ゆき"にしても、分解すれば、ゆ、き、なります。"ゆ"はUnicodeでU+003086と表現することになっていて、UTF-16なら"30 86"、でUTF-8 "E3 82 86"ならとなります。おなじく、"き"はUnicode U+00304D、UTF-16 "30 4D"、UTF8 "E3 81 8D"、となります。符号化方式に関する法則については、[[C 文字列操作#文字列区切り文字分割]]の少し上あたりを参照して下さい。


そうすると、日本語文字は1文字でも2バイトあるいは3バイト使われていることになります。1バイトの大きさしか持たない変数ならばバイト数分だけ配列を作って、文字列をバイト単位で格納するため、ゆき、ならUTF-16方式を使っていれば、4バイトで配列要素数、つまり箱は4が必要になり、添え字0～3が必要になります。最後に\0という文字列終端を表す記号までふくめると実際はもう1バイトと1要素増えます。JAVAスクリプトの場合はあまりバイト単位の要素を確認することは少なく、日本語に対しては文字列配列の変数に格納されて、2文字として要素数の大きさを2として、添え字0～1のような感じでそれぞれの文字にアクセスできますが、それは文字列関数を使うときの考え方になります。とくに半角の英字とか全角日本語とかを意識しなくても1文字は1文字として、管理され要素数や関数利用時の文字番号になります。言語によっては1バイト文字2バイト文字で管理され、自分で全角文字なのか？どうかを調べて文字数を管理するものもあるのですが、JAVA Scriptではそういったことは必要なく、文字数と要素数が一致しています。文字列は配列ですが、JAVAスクリプトではあまり配列という概念を感じさせないので、文字列は単なる複数の文字を格納できる変数のように扱えるようになっているため、文字列配列は配列の配列のような2次元の配列ではなく、単純な1次元の配列のようにふるまいます。


さてさて、何を言っているのかわけがわからないという人も出てきたところで、JAVA Scriptの文字列配列がいかに簡単に扱えるかということを実感できるようにはやばやと配列の具体的な利用方法に関する説明に移りたいと思います。


と、…、とにかく。


文字列を分解すると疲れますが、そういうことでした。そうすると、文字列を配列にすると、配列を配列にしている感じになっています。このあたりの考え方はC++だとすごく重要なんですけど、ま、JAVA Scriptでは、そういう難しいことを深く考えなくても、文字列配列が扱えます。なので、むずかしい説明はありませんが、裏ではそういう難しいことも含まれているということをなんとなく、うっすらと理解しておくといいんじゃないかなぁとは思います。


では実際に配列を作る例を見ていきましょう。


== '''Array オブジェクト生成''' ==
配列オブジェクト(入れ物・モノ)を生成するには、以下のように定義します。
*Data1Arr = new Array() //空の配列
*Data2Arr = new Array(2) //要素数 2
*Data3Arr = new Array(1,2,3) // 要素数3で、データを初期化
*Data4Arr = [] //空の配列
*Data5Arr = [1,2,3] // 要素数3で、データを初期化


2番目に定義した要素数2の配列ですが、データの初期化がされていないので、それぞれの要素には何も格納されていません。また、参照の際に、何も入っていない配列要素を参照するとundefinedと出力されたり、代入してもnullになるため、何もデータが得られませんがエラーにならないので、処理がとまることは無いです。


サンプルプログラムは以下のとおりです。
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript Array</TITLE>
</HEAD>
<BODY>
JavaScript Array<br />
<SCRIPT Language="JavaScript">
<!--
Data1Arr = new Array();
Data2Arr = new Array(2);
Data3Arr = new Array(1,2,3,4);
Data4Arr = [];
Data5Arr = [1,2,3,4];


Data1Arr.push("春(はる)");
Data1Arr.push("夏(なつ)");
Data1Arr.push("秋(あき)");
Data1Arr.push("冬(ふゆ)");


Data2Arr.push(1);
Data2Arr.push(2);
Data2Arr.push(3);
Data2Arr.push(4);


Data4Arr.push("東(ひがし)");
Data4Arr.push("西(にし)");
Data4Arr.push("南(みなみ)");
Data4Arr.push("北(きた)");


document.write("■Array<br />");
document.write("Data1Arr = ",Data1Arr[0],",",Data1Arr[1],",",Data1Arr[2],",",Data1Arr[3], "<br />");
document.write("Data2Arr = ",Data2Arr[0],",",Data2Arr[1],",",Data2Arr[2],",",Data2Arr[3], "<br />");
document.write("Data3Arr = ",Data3Arr[0],",",Data3Arr[1],",",Data3Arr[2],",",Data3Arr[3], "<br />");
document.write("Data4Arr = ",Data4Arr[0],",",Data4Arr[1],",",Data4Arr[2],",",Data4Arr[3], "<br />");
document.write("Data5Arr = ",Data5Arr[0],",",Data5Arr[1],",",Data5Arr[2],",",Data5Arr[3], "<br />");


-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>

[[Media:JavaScript Array declare.html|サンプル実行結果]]


上記サンプルのData2Arrは要素数2でpopメソッドで要素を追加できますが、要素番号2以降に格納され、要素番号0と1の最初に準備された要素はカラのまま要素番号2にデータとしての数値1が要素番号3にデータとしての数値4が格納されます。また、要素数0で定義した配列Data1ArrとData4Arrもpopメソッドによって要素数が拡張されつつ、データが格納できるようになっていて、宣言のときに要素数を決定したり、配列の大きさを調整するような処理があまり重要ではないことが伺い知れます。このことから、要素番号を管理することはあえて実施せずに適当にくっつけたり、切り離したりしても、要素数が自動で管理されている状態になっていることが多いため、配列要素数の状態については、あまり意識しなくてもよいでしょう。複雑な操作をしたときに状態がどうなっているか確認することは必要になるかもしれません。

== '''要素数の取得・設定 length''' ==
配列オブジェクトの生成について前の項目で説明したように、要素数を決めることはあまり必要ではないため要素数を設定することはなにしても、このメソッドによって配列要素数を調べることは多くあります。


例えば以下のようにすると配列の要素数を調べることができます。
*Data2Arr.length


上記のメソッドを出力したり、違う変数で数値を取得すると要素数を知ることができます。ちなみに
*Data2Arr.length = 10;


のようにすると、要素数10の配列であると設定することもできます。


サンプルは以下のとおりです。

== '''連結 concat''' ==


== '''抽出 slice''' ==


== '''複数要素の置換 splice''' ==


== '''要素先頭追加 unshift''' ==


== '''要素先頭の削除 shift''' ==


== '''要素末尾追加 push''' ==


== '''要素末尾の取得と削除 pop''' ==


== '''配列全要素の文字列化出力＋カンマ区切り toString''' ==


== '''配列全要素の文字列化出力＋区切り文字指定 join''' ==


== '''配列反転 reverse''' ==


== '''配列ソート＋ソート方法指定 sort ''' ==


[[JAVA Script#リファレンス]]に戻る。