ViVi Home > 技術文書
> さくさく理解する JavaScript 入門 >
さくさく理解する JavaScript 配列入門
配列とはもっとも基本的なデータ構造のひとつで、データの順序付き集合のことだ。
C/C++, Java, C# などと同様に 変数名[インデックス] で要素にアクセス可能である。
length や splice() など便利なプロパティやメソッドも用意されている。
本章では、vector オブジェクトの宣言・初期化方法について説明する。
配列を宣言するには、空配列を宣言する、全てのデータを指定して宣言する、 元データを指定して宣言する、他のオブジェクトを元にして宣言する、のようにいくつもの方法がある。 本章ではそれらの方法を順次解説する。
空の配列を作るには、変数を宣言し [] で初期化するか、Array オブジェクトを new で生成して初期化する方法がある。
var ar = [];
var ar = new Array();
どちらがいいかは好みかもしれないが、筆者的は簡潔な前者の方が好きだ。
JavaScript は動的型な言語なので、C/C++等の様に配列宣言時に要素の型を指定する必要はない。とってもお手軽だ。
空の配列に後から要素を追加することが出来る。その方法は、次章で説明する。
下記の様に、値をカンマで区切ったリストで、[] または () の中に記述することで、要素を指定して、配列を初期化できる。
var ar = [1, 2, "abc", 3, "xyz"];
var ar = new Array(1, 2, "abc", 3, "xyz");
JavaScript は型に寛容な言語なので、配列要素は同じ型である必要はない。
上記の例のように、数値、文字列、オブジェクトなど何でも指定できる。
配列の要素は何でも良いと先に書いたが、配列の要素として配列を記述することが出来る。それが、2次元配列となる。
var ar = [[1, 2], ["abc", 3, "xyz"]];
var ar = new Array(new Array(1, 2), new Array("abc", 3, "xyz"));
※ 中身を確認するために、console.log(ar) で配列を表示すると、[Array[2], Array[2]] の様に、2次元配列を分かる形式で表示されるが、
document.write(ar) で表示すると、2次元配列であっても 1,2,3,4 の様に要素が順に表示されるだけで、2次元配列かどうかは確認できない。
動作確認を行う場合は、document.write() よりも console.log() を使用した方がよいようである。
演習問題:解答例
[] 演算子 を使って、他の言語の普通の配列と同じように、配列要素値の参照・代入が可能。
括弧の中には何番目の要素かを指定する数値を書く。これをインデックス(添字)と呼ぶ。数値0が最初の要素を表す。
var ar = [3, 1, 4]; document.write(ar[0]); // 最初の要素の 3 が表示される ar[1] = 2; // 2番めの要素を 2 に書き換える document.write(ar[1]); // 2 が表示される
2次元配列の場合は 配列名[インデックス][インデックス] で参照する。
演習問題:解答例
配列要素を追加する場合、単に「配列名[インデックス] = 値;」と記述するだけでよい。 インデックスで指定される要素が存在しない場合は、新たに要素が追加される。
C/C++ や Java などでは、固定配列と動的配列というものがあり、範囲外をアクセスすると例外(エラー)が発生する。
しかし、JavaScript は非常に柔軟な言語なので、範囲外をアクセスしてもエラーにはならず、柔軟に対応してくれる。
これは、エラーが見過ごされることがあり危険な場合もあるのだが、初級者には優しい仕様と言えるだろう。
var ar3 = [3, 1, 4]; ar3[5] = "abc"; document.write(ar3);
上記のコードを実行すると「3,1,4,,,abc」と表示される。
この例のように離れたインデックスを指定すると、指定されなかった部分には unknown 要素が挿入される。
次章で説明する length で要素数を参照すると、自動的に挿入された部分もカウントされる。上記の例で言えば 要素数=6 となる。
特別に先頭または末尾に要素を追加するためのメソッド:unshift(値), push(値) が用意されている。
var ar = [1, 2, 3, 4]; ar.unshift(0); // 先頭に 0 を挿入 document.write(ar); // 0,1,2,3,4 が表示される ar.push(9); // 末尾に 9 を追加 document.write(ar); // 0,1,2,3,4,9 が表示される
C++ には、「+= 要素」や、「+= 動的配列」で要素を追加することが可能な動的配列クラスがあるが、JavaScript の配列はそれをサポートしていないようである。
その代わりと言ってなんだが、unshift(), push() に複数の引数を指定することができる。
var ar = [1, 2, 3, 4]; ar.unshift(0, 12); // 先頭に 0, 12 を挿入 document.write(ar); // 0,12,1,2,3,4 が表示される ar.push(9, 8, 7); // 末尾に 9, 8, 7 を追加 document.write(ar); // 0,12,1,2,3,4,9,8,7 が表示される
このあたりはかなり柔軟だ。さすが JavaScript。
JavaScript 配列には何故か insert() メソッドが無いので、削除も行う splice(位置、削除個数、値) メソッドを使用する。
削除個数に 0 を指定すると、指定位置への単なる挿入になる。
var ar = [1, 2, 3, 4]; ar.splice(1, 0, "hoge"); document.write(ar); // 1,"hoge",2,3,4 が表示される
演習問題:解答例
演習問題:解答例