JavaScriptで覚えておくとよいデータ構造 - 配列・オブジェクト

JavaScriptで必要なデータ構造の覚書です。

配列

配列は複数件のデータを扱うためのデータ構造です。

■配列を生成する。

配列の生成は以下のように行います。

var 配列の名前 = [];
var 配列の名前 = [ データ, データ, … ];

配列の生成では、配列の名前を指定します。
もし、生成時にデータを格納する場合に、[]内にデータを指定します。
なお、JavaScriptでは配列の生成時にサイズを指定しません。

例えば、空の配列array1を生成するには、以下のように書きます。

var array1 = [];

例をもう一つ。データを３つ格納した配列array2を生成するには、以下のように書きます。

var array2 = [ "history", "japanese", "math" ];

■配列にデータを追加する。

配列へのデータの追加は以下のように行います。

配列の名前.push( データ );

データの追加では、配列の名前とデータを指定します。
追加するたびに、データは配列の末尾に追加され、配列のサイズが増えます。

例えば、配列array1にデータを追加するには、以下のように書きます。

array1.push( "give" );
array1.push( "gave" );
array1.push( "given" );

■配列にデータを格納する。

配列の特定の位置へのデータの格納は以下のように行います。

配列の名前[インデックス] = データ;

データの格納では、配列の名前とインデックスと格納するデータを指定します。
インデックスとは配列の位置を表す数字で、「0」以上で「配列のサイズ」より小さい値を指定する必要があります。

例えば、配列array2へデータを格納するには、以下のように書きます。

array2[3] = "english";
array2[4] = "science";

■配列からデータを取得する。

配列からのデータの取得は以下のように行います。

関数( 配列の名前[インデックス] );
変数 = 配列の名前[インデックス];
return 配列の名前[インデックス];

データの取得では、配列の名前とインデックスを指定します。インデックスの考え方はデータの格納時と同様です。
配列から取得したデータは、関数の引数に渡したり、変数に代入したり、関数の戻り値として返したりできます。

例えば、配列array1のデータを取得してブラウザに表示するには、以下のように書きます。

document.write( array1[0] + "<br>" ); => give
document.write( array1[1] + "<br>" ); => gave
document.write( array1[2] + "<br>" ); => given

■配列中のすべてのデータに同じ処理をする。

配列中のすべてのデータに同じ処理をするためには、以下のようなfor文を使用します。

for ( var i = 0; i < 配列の名前.length; ++i ) {
	// 配列の名前[i]を使った処理
}

このfor文中の『配列の名前.length』は配列のサイズを表します。そのため、このfor文を使えば配列中のすべてのデータに同じ処理を行えます。

例えば、配列array2中のすべてのデータを表示するには、以下のように書きます。

for ( var i = 0; i < array2.length; ++i ) {
	document.write( array2[i] + "<br>" );
}

これは以下のように書いた場合と同じ結果になります。

document.write( array2[0] + "<br>" ); => history
document.write( array2[1] + "<br>" ); => japanese
document.write( array2[2] + "<br>" ); => math
document.write( array2[3] + "<br>" ); => english
document.write( array2[4] + "<br>" ); => science

オブジェクト

オブジェクトとは、キーに関連付けてデータを格納するデータ構造です。

■オブジェクトを生成する。

オブジェクトの生成は以下のように行います。

var オブジェクトの名前 = {};
var オブジェクトの名前 = { キー: データ, キー: データ, キー: データ, キー: データ };

オブジェクトの生成では、オブジェクトの名前を指定します。
もし、生成時にデータを格納する場合、{}内にキーとデータを指定します。データはキーに関連付けて格納されます。

例えば、空のオブジェクトobject1を生成するには、以下のように書きます。

var object1 = {};

例をもう一つ。データを４つ格納したオブジェクトobject2を生成するには、以下のように書きます。

var object2 = { "country": "日本", "language": "日本語", "capital": "東京", "currency": "円" };

■オブジェクトにデータを格納する。

オブジェクトへのデータの格納は以下のように行います。

オブジェクトの名前[キー] = データ;

データの格納では、オブジェクトの名前とキーと格納するデータを指定します。データはキーに関連付けて格納されます。

例えば、オブジェクトobject1にデータを格納するには、以下のように書きます。

object1["country"] = "フランス";
object1["language"] = "フランス語";
object1["capital"] = "パリ";
object1["currency"] = "ユーロ";

■オブジェクトからデータを取得する。

オブジェクトからのデータの取得は以下のように行います。

関数( オブジェクトの名前[キー] );
変数 = オブジェクトの名前[キー];
return オブジェクトの名前[キー];

オブジェクトからのデータの取得では、オブジェクトの名前とキーを指定します。キーに関連付いたデータが取得されます。
オブジェクトから取得したデータは、関数の引数に渡したり、変数に代入したり、関数の戻り値として返したりできます。

例えば、オブジェクトobject1からデータを取得してブラウザに表示するには、以下のように書きます。

document.write( object1["country"] + "<br>" ); => フランス
document.write( object1["language"] + "<br>" ); => フランス語
document.write( object1["capital"] + "<br>" ); => パリ
document.write( object1["currency"] + "<br>" ); => ユーロ

■オブジェクト中のすべてのデータに同じ処理をする。

オブジェクト中のすべてのデータに同じ処理をするためには、以下のようなfor in文を使用します。

for ( var key in オブジェクトの名前 ) {
	var data = オブジェクトの名前[key];
	
	// keyやdataを使った処理
}

このfor in文では、すべてのキーとデータについて処理を繰り返します。繰り返すたびに、変数keyにキーが、変数dataにデータに格納されます。

例えば、オブジェクトobject2中のすべてのキーとデータの関連付けをブラウザに表示するには、以下のように書きます。

for ( var key in object2 ) {
	var data = object2[key];
	
	document.write( key + ": " + data + "<br>" );
}

これは、以下のように書いた場合と同じような結果になります。ただし、キーの順序は決まっていないので、表示順序は異なることがあります。

document.write( "country: " +  object2["country"] + "<br>" ); => country: 日本
document.write( "language: " +  object2["language"] + "<br>" ); => language: 日本語
document.write( "capital: " +  object2["capital"] + "<br>" ); => capital: 東京
document.write( "currency: " +  object2["currency"] + "<br>" ); => currency: 円