配列/JavaScript

JavaScriptは、複数の値を代入出来る配列が使えます。

本項では、配列の使い方について説明します。

配列の概要とメリット

 配列には0番目は2、1番目は5、2番目は3等、複数の値を持たせる事が出来ます。

配列の概略

 配列は、var x = [2,5,3];というように宣言します。2、5、3等の値を入れる箱を要素と言います。上の図では、0番目、1番目、2番目と記述した箱の1つ1つが要素です。

 要素には数字だけでなく、文字列も使えます。文字列を使う時は、var x = ["テスト","テスト2","テスト3"];等とダブルクォーテーション(")で括る必要があります。

 配列を使うと、値を順番に取り出す、条件によって何番目かの値を取り出す、変更するといったスクリプトが作り易くなります。

配列の基本的な使い方

 配列を宣言後、要素を更新したり参照したりするためには以下のように記述します。

【配列の要素を更新/参照】
<script>
var x = [2,5,3];
x[1] = 10;
document.write(x[1]);
</script>

 赤字部分が要素への代入で、値を更新しています。[]で括った中に何番目の要素かを記述します。この数字を添字と言います。青字部分が参照で、添字を使って1番目の要素から値を取り出しています。

 上記は以下のように表示されます。

 1番目の要素は最初5でしたが、10が代入されたため10と表示されています。

多次元配列

 配列はx[i][j]等、2つ以上の添字を持つ事が出来ます。iもjも0〜2までの添字を使うと、以下の空間を持つ事になります。

多次元配列の空間

 上記配列に○、×、△、□を代入し、その値を表示させるには以下のようにします。

【2次元配列】
<script>
var x =
 [["○","△","×"],
 ["□","□","□"],
 ["×","△","○"]];
document.write(x.join("<br>"));
</script>

 x.joinで配列の値を羅列して表示する際、<br>により途中で改行が入ります。joinは、配列の要素を繋げる時の区切り文字を指定します。デフォルトはカンマ(,)です。上記は以下の通り表示されます。

 又、document.writeでx[2][1]を指定すると、△が表示されます。

配列の検索

 配列の値を検索する事も出来ます。以下は、配列の値に3が存在するか確認するJavaScriptです。

【JavaScriptの配列検索】
<script>
var x = [2,5,3];
document.write(x.indexOf(3));
</script>

 上記は以下のように表示されます。

 2番目の要素に存在する事が分かります。0から数える事に留意して下さい。存在しない場合は-1が表示されます。

配列の要素数

 配列の要素数は以下で参照出来ます。

【配列要素数】
<script>
var x = [2,5,3];
document.write(x.length);
</script>

 赤字部分は配列xに対する要素数を取得している部分です。

 上記は以下のように表示されます。

メソッド

 以下に配列の操作を5例挙げます。これはメソッドと呼ばれます。

・最初に要素を追加
 例:x.unshift("ゼロ");
 配列が["いち","に","さん"]だった場合、["ゼロ","いち","に","さん"]となります。
・最初の要素を削除
 例:x.shift();
 配列が["いち","に","さん"]だった場合、["に","さん"]となります。
・最後に要素を追加
 例:x.push("よん");
 配列が["いち","に","さん"]だった場合、["いち","に","さん","よん"]となります。
・最後の要素を削除
 例:x.pop();
 配列が["いち","に","さん"]だった場合、["いち","に"]となります。
・途中の要素を削除
 例:x.splice(1,2);
 数字は何番目の要素から何個削除するかの指定です。例では、1番目の要素から2個削除するため、配列が["いち","に","さん"]だった場合、["いち"]となります。

 記述例として、x.unshiftの使い方です。

【x.unshiftの記述例】
<script>
var x = ["いち","に","さん"];
x.unshift("ゼロ");
document.write(x);
</script>

配列のコピー

 配列を単純な代入でコピーしたとします。

【参照コピー】
<script>
var x = [0,1,2];
var y = x;
x[1] = "変更";
document.write(x + "<br>");
document.write(y);
</script>

 赤字部分でコピーし、青字部分ではx[1]に文字列"変更"を代入しています。これは以下のように表示されます。

 x[1]に文字列"変更"を代入しましたが、表示された結果ではy[1]も変更されています。これは、xやyは配列を参照しているだけで、var y = xで代入すると配列の値ではなく、参照するための情報がコピーされるためです。

参照渡し

 つまり、xの値を変えて配列の値が変わると、同じ配列を参照しているyの値も変わります。逆に、yの値を変えるとxの値も変わります。それぞれ別の配列としてコピーしたい場合は、以下のようにします。

【シャローコピー】
<script>
var x = [0,1,2];
var y = x.slice();
x[1] = "変更";
document.write(x + "<br>");
document.write(y);
</script>

 赤字部分のようにslice()を用いてコピーすると、以下のように表示されます。

 y[1]は変更されず、x[1]だけ変更されています。この方法はシャローコピーと呼ばれ、多次元配列では使えませんが、1次元配列であれば簡単にコピー出来ます。

 jQueryを使えば、多次元配列も簡単にコピー出来ます。これは、多次元の階層が深い所までコピー出来るため、ディープコピーと呼ばれます。

【jQueryを利用したディープコピー】
<script>
var x = [[0,0],[1,1],[2,2]];
var y = $.extend(true, [], x);
x[1][0] = "変更";
document.write(x + "<br>");
document.write(y);
</script>

 赤字部分でコピーしています。これは、以下のように表示されます。

 y[1][0]が変更されておらず、x[1][0]だけ変更されているのが分かります。

 上記はjQueryが動作している必要があります。jQueryについては、「jQueryの利用」をご参照下さい。

配列の事前作成

 配列だけ先に作っておいて、条件によって後で値を代入する時は以下のようにします。

【配列だけ宣言しておく】
<script>
var x = new Array();
</script>

 検索等の命令が実行された時に配列が存在しないと、エラーでスクリプトが止まってしまいます。配列だけ作っておくことでエラーにならず、スクリプトは継続されます。

次のページ条件分岐

  • このエントリーをはてなブックマークに追加

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)