連想配列型( Object )
JavaScript における連想配列型は Object 型とも呼ばれます。JavaScriptにおいて、オブジェクトの基本になっている型です。
let example = {};
ここでは主に連想配列型
についてのみ解説します。
連想配列型のデータは、キーとデータのセットを配列として複数もちます。
let animal = { name :'elephant', food : 'plant' };
連想配列ではキーによってデータを取り出し易くなっています。
alert( animal.name ); // elephant と出力されます
連想配列型はオブジェクトとしても利用できますが、クラス宣言を伴うオブジェクトとして利用するには class や function() を利用する必要があります。クラス定義については連想配列型によるクラス定義
を参照してください。
連想配列型の宣言
連想配列型の変数を宣言するには以下のようにします。
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 型などに初期化できます。
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 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 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 についての詳しくはオブジェクト(クラスとインスタンス)
を参照してください。
