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

連想配列型( Object )

 JavaScript における連想配列型は Object 型とも呼ばれます。JavaScriptにおいて、オブジェクトの基本になっている型です。

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

 ここでは主に連想配列型についてのみ解説します。
 連想配列型のデータは、キーとデータのセットを配列として複数もちます。

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

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

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

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

ページ内 Index

連想配列型の宣言

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

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

 このような変数宣言によって連想配列型のオブジェクトが右辺に生成されます。このオブジェクトは Object 型ともいわれます。

Object()

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

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

初期値

 上記のような変数宣言で初期値を設定することができます。

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

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

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

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

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

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

 Object 型の変数を宣言したあとでデータを追加することもできます。

後でデータを追加
let animal = {};
animal.name = 'elephant';
animal.food = 'plant';
animal.average_life = 70;

 データの追加について詳しくは以下のデータアイテムの追加を参照してください。

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

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

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

プロパティ(Property)

 Object クラスには以下のインスタンスプロパティがあります。

インスタンスプロパティ概要
.constructorコンストラクターを参照。オブジェクトのタイプを返す

メソッド(Method)

 Object クラスのメソッドには静的メソッドと呼ばれる Object に続いてメソッドを指定するものと、通常のオブジェクトのメソッドとして使用するインスタンスメソッドがある。

静的メソッド

静的メソッド概要
Object.assign()オブジェクトのプロパティを集約する。第1引数が集約先、第2引数以降が参照元
Object.create()引数に指定されたオブジェクトをプロトタイプとして新たにオブジェクトを生成
Object.entries()オブジェクトのプロパティを [ key,value ] の組み合わせの配列として返す。
Object.fromEntries()[ key,value ] の組み合わせの配列から新たなオブジェクトを生成
Object.getOwnPropertyNames()オブジェクトのキーを抽出し配列にして返す。オブジェクトが配列の場合は配列番号で返す
Object.getOwnPropertySymbols()オブジェクトに含まれているシンボルオブジェクトを抽出して配列で返す
Object.getPrototypeOf()引数で指定されたオブジェクトのプロトタイプを返す
Object.hasOwn()第1引数で指定されたオブジェクトが第2引数のプロパティをもっているか/否か
Object.is()第1引数と第2引数が等価であるか/否か。===に似ているが、+0 と -0 は等価とみなす
Object.keys()オブジェクトのキーを抽出し配列にして返す。キーの配列はソートされる
Object.setPrototypeOf()第1引数のオブジェクトに第2引数のプロトタイプを設定する
Object.values()オブジェクトの値( value )を抽出して配列として返す
プロパティのディスクリプタ
Object.defineProperty()プロパティのディスクリプタを操作。第1引数にオブジェクト名、第2引数にプロパティ名、第3引数にディスクリプタを指定
Object.defineProperties()プロパティのディスクリプタを操作。第1引数にオブジェクト名、第2引数にプロパティ名とディスクリプタの組み合わせを指定
Object.freeze()プロパティの値の変更と削除を禁止に
Object.getOwnPropertyDescriptor()プロパティのディスクリプタを取得。第1引数にオブジェクト名、第2引数にプロパティ名を指定
Object.getOwnPropertyDescriptors()プロパティのディスクリプタを取得。引数にオブジェクト名を指定
Object.isExtensible()プロパティの追加が禁止か/否か。Object.preventExtensions() によって拡張禁止にできる
Object.isFrozen()プロパティの値の変更と削除が禁止になっているか/否か。Object.freeze() によって変更禁止にできる
Object.isSealed()プロパティの削除が禁止になっているか/否か。Object.seal() によって変更と拡張を禁止にできる
Object.preventExtensions()プロパティの追加を禁止にする
Object.seal()プロパティの削除を禁止にする

 静的メソッドは以下のように Object.メソッド の形で使用します。

静的メソッドの使用
console.log( Object.keys( obj_example ) );

 以下のインスタンスメソッドは通常のオブジェクトで利用するメソッドです。

インスタンスメソッド

メソッド概要
.hasOwnProperty()引数で指定されたプロパティを持っているか/否か。ただし、そのプロパティは継承されていないものに限る
.isPrototypeOf()引数で指定されたオブジェクトがプロトタイプチェーンにあるか/否か
.propertyIsEnumerable()引数で指定されたプロパティを持っているか/否か
.toLocaleString()指定されたローケルに変換する。文字列として返す
.toString()文字列として返す
.valueOf()値( value )を抽出して配列として返す

 インスタンスメソッドは以下のように、Object インスタンスに使用します。

インスタンスメソッドの使用
let tiger = {
	name : 'tiger',
	food : 'meet',
	color : 'yellow and black'
};

console.log( tiger.valueOf() );
// [ 'tiger', 'meet', 'yellow and black' ]

データの取得

 連想配列のデータはキー名( key )を指定してその値( value )を取得することが基本になります。
 オブジェクトの全データを参照するには繰り返し文 for( propaties in Object ){...} を使用する方法があります。

キー名を指定して値を取得

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

または
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( propaties in Object ){...}

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

for( let key_ in ObjectArray ){
	var value_ = ObjectArray[ key_ ];
}

 この例ではオブジェクトの全データが出力されます。

確認ボタンをクリックして実行してみてください。実行結果は開発用コンソールに出力されます。

データアイテムの追加

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

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 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 についての詳しくはオブジェクト(クラスとインスタンス)を参照してください。