備忘録的プログラミングリファレンス

連想配列型( Object )

 JavaScript における連想配列型は Object 型とも呼ばれます。JavaScriptにおいて、オブジェクトの基本になっている型です
 連想配列型はオブジェクトとしても利用できますが、クラス宣言を伴うオブジェクトとして利用するには class や function() を利用する必要があります。クラス定義については連想配列型によるクラス定義を参照してください。

 ここでは主に連想配列型についてのみ解説します。
 連想配列は、キーと呼ばれるデータの名称とデータ自身のセットを複数保持することができる配列です。キーとデータのセットをデータアイテムといいます。

連想配列型の初期化
var animal = { name :'elephant', food : 'plant' };

 以下のような配列型との違いは、データごとにキーが付いているところです。

配列型
var name=['elephant','donkey','tiger']

 連想配列ではキーによってデータを取り出し易くなっています。

キーの値を取得
alert( animal.name );
// elephant と出力されます

ページ内 Index

連想配列については以下の項目に分けて説明します。

型宣言

 連想配列型の変数を宣言するには以下のようにします。

連想配列型の変数宣言
var example = {};

Object()

 Object() によっても連想配列型の変数を宣言することができます。

オブジェクトとして連想配列を宣言
var example = new Object();

初期値

 上記のように変数宣言したオブジェクトに初期値を設定することができます。

連想配列型の変数を初期値を設定して宣言
var animal = {};
animal.name = 'elephant';
animal.food = plant';
animal.average_life = 70;

その他のデータ型について

 ややこしいですが、JavaScriptの変数はすべてオブジェクト型です。そのため上記のnew Object()宣言で String 型、Number 型などに初期化できます。

Object() を使った他の型の変数として宣言
var string = new Object( 'abcd' );	// String 型
var number = new Object( 100 );		// Number 型

データアイテムの追加

 キー名を指定して値を設定します。キー名が既にある場合は値の変更になります。

ObjectArray.key = value;
または
ObjectArray['key'] = value;
連想配列のデータアイテムを追加
animal.weight = 5000;	// データアイテムを追加

データの変更

 データアイテムが既にある場合に限ります。キー名を指定して値を設定します。

ObjectArray.key = value;
または
ObjectArray['key'] = value;
データを変更
animal.food = 'meet';	// データを変更

データアイテムの削除

 delete コマンドで連想配列とそのキーを指定します。

delete ObjectArray.key;
または
delete ObjectArray['key'];
連想配列のデータアイテムを削除
delete example.name;	// キー名が name のデータアイテムを削除

データの取得

 キー名を指定して値を取得します。

または
var value = ObjectArray.key;
var value = ObjectArray['key'];
データを取得
var item_food = animal.food;

データアイテム数を取得

 データアイテム(キーと値のセット)の数を取得するには length を使用します。

var length_ = ObjectArray.length;
データアイテム数を取得
var length_item = animal.length;

キーの配列を取得

 全てのデータアイテムをキーだけの配列を取得するには keys を使用します。

var Array_keys = ObjectArray.keys;
キーのリストを取得
var array_keys = animal.keys;

 結果は、array_keys = ['name', 'food', 'average_life', 'wieght'] になります。

全てのデータアイテムの取得と処理

 全てのデータアイテムを取得しながら処理するには繰り返し構文 for() を使用します。

for( var key in ObjectArray ){
	var key_ = ObjectArray.key;
	var value_ = ObjectArray.value;
}
for() による処理
for( var key in animal ){
	var key_ = animal.key;
	var value_ = animal.value;

	console.log( key_ );
	console.log( value_ );
}

 結果は開発用コンソール内で表示されます。

連想配列をリスト化

 例えば配列変数を作成して、そこに連想配列を追加します。

var array_ = new Array();
array_.push( ObjectArray );
配列に連想配列を追加
var list_animals = new Array();
list_animals.push( animal );

animal = {'name':'tiger', 'food':'meet', 'average_life':9}; // animal は上書きされます
list_animals.push( animal );

 結果は以下のようになります。

list_animals = [
	 {'name':'elephant', 'food':'meet', 'average_life':70, 'wieght':5000},
	 {'name':'tiger', 'food':'meet', 'average_life':9}
]

 詳しくは、JavaScript の配列を参照してください。

連想配列型によるクラス定義

 連想配列型は、オブジェクトのためのクラス宣言ができます。クラス宣言は class または function を利用します。

function によるクラス宣言

 まずは function によってクラス宣言をする方法です。この書き方はクラス宣言としては不十分とみなされており古い書き方です。

function によるクラス宣言
function Animal( name, food, average_life ){
	this.name = name,
	this.food = food,
	this.average_life = average_life,
	get_Name = function(){
		return( this.name );
	}
};

class によるクラス宣言

 以下は class によるクラス宣言です。construtor() はデータの初期化を行います。

class によるクラス宣言
class Animal{
	constructor( name, food, average_life ) {
		this.name = name,
		this.food = food,
		this.average_life = average_life,
	}

	get_Name = function(){
		return( this.name );
	}
};

 以上のようなクラス定義によって、新しいオブジェクトを生成できます。

インスタンス化
var animal_elephant = new Animal( 'elephant', 'meet', 70 );

 Animal.get_Name()メソッドを使用すると以下のような返り値が取得できます。

メソッドの使用
alert( animal.get_Name() );
// 'elephant' が表示される

 class についての詳しくはオブジェクト(クラスとインスタンス)を参照してください。