概要: このチュートリアルでは、JavaScript オブジェクトと、オブジェクトのプロパティを効果的に操作する方法について学習します。
JavaScript オブジェクトの紹介
JavaScript では、オブジェクトはキーと値のペアの順序付けられていないコレクションです。各キーと値のペアはプロパティと呼ばれます。
プロパティのキーは文字列にすることができます。プロパティの値は、文字列、数値、配列、さらには関数など、任意の値にすることができます。
JavaScript には、オブジェクトを作成するための多くの方法が用意されています。最も一般的に使用されるのは、オブジェクトリテラル表記を使用する方法です。
次の例は、オブジェクトリテラル表記を使用して空のオブジェクトを作成します。
let empty = {};Code language: JavaScript (javascript)プロパティを持つオブジェクトを作成するには、中かっこ内でkey:valueを使用します。たとえば、次は新しいpersonオブジェクトを作成します。
let person = {
firstName: 'John',
lastName: 'Doe'
};Code language: JavaScript (javascript)personオブジェクトには、対応する値'John'と'Doe'を持つ2つのプロパティfirstNameとlastNameがあります。
オブジェクトに複数のプロパティがある場合、上記の例のようにコンマ(,)を使用してそれらを区切ります。
プロパティへのアクセス
オブジェクトのプロパティにアクセスするには、ドット表記と配列のような表記の2つの表記法のいずれかを使用します。
1) ドット表記 ( . )
次は、ドット表記を使用してオブジェクトのプロパティにアクセスする方法を示しています。
objectName.propertyNameCode language: CSS (css)たとえば、personオブジェクトのfirstNameプロパティにアクセスするには、次の式を使用します。
person.firstNameCode language: CSS (css)この例では、personオブジェクトを作成し、コンソールに名前と姓を表示します。
let person = {
firstName: 'John',
lastName: 'Doe'
};
console.log(person.firstName);
console.log(person.lastName);Code language: JavaScript (javascript)2) 配列のような表記 ( [] )
次は、配列のような表記でオブジェクトのプロパティの値にアクセスする方法を示しています。
objectName['propertyName']Code language: CSS (css)例:
let person = {
firstName: 'John',
lastName: 'Doe'
};
console.log(person['firstName']);
console.log(person['lastName']);Code language: JavaScript (javascript)プロパティ名にスペースが含まれている場合は、引用符で囲む必要があります。たとえば、次のaddressオブジェクトには、プロパティとして'building no'があります。
let address = {
'building no': 3960,
street: 'North 1st street',
state: 'CA',
country: 'USA'
};
Code language: JavaScript (javascript)'building no'プロパティにアクセスするには、配列のような表記を使用する必要があります。
address['building no'];Code language: CSS (css)ドット表記を使用すると、エラーが発生します。
address.'building no';Code language: JavaScript (javascript)エラー
SyntaxError: Unexpected stringCode language: JavaScript (javascript)オブジェクトのプロパティ名にスペースを使用するのは良い習慣ではないことに注意してください。
存在しないプロパティを読み取ると、undefinedになります。例えば
console.log(address.district);Code language: CSS (css)出力
undefinedCode language: JavaScript (javascript)プロパティの値の変更
プロパティの値を変更するには、代入演算子 (=)を使用します。例えば
let person = {
firstName: 'John',
lastName: 'Doe'
};
person.firstName = 'Jane';
console.log(person);Code language: JavaScript (javascript)出力
{ firstName: 'Jane', lastName: 'Doe' }Code language: CSS (css)この例では、personオブジェクトのfirstNameプロパティの値を'John'から'Jane'に変更しました。
オブジェクトへの新しいプロパティの追加
JavaやC#などの他のプログラミング言語のオブジェクトとは異なり、オブジェクトの作成後にオブジェクトにプロパティを追加できます。
次のステートメントは、personオブジェクトにageプロパティを追加し、25を割り当てます。
person.age = 25;オブジェクトのプロパティの削除
オブジェクトのプロパティを削除するには、delete演算子を使用します。
delete objectName.propertyName;Code language: JavaScript (javascript)次の例は、personオブジェクトからageプロパティを削除します。
delete person.age;Code language: JavaScript (javascript)ageプロパティに再度アクセスしようとすると、undefined値が表示されます。
プロパティが存在するかどうかの確認
オブジェクトにプロパティが存在するかどうかを確認するには、in演算子を使用します。
propertyName in objectNamein演算子は、propertyNameがobjectNameに存在する場合はtrueを返します。
次の例では、employeeオブジェクトを作成し、in演算子を使用して、オブジェクトにssnプロパティとemployeeIdプロパティが存在するかどうかを確認します。
let employee = {
firstName: 'Peter',
lastName: 'Doe',
employeeId: 1
};
console.log('ssn' in employee);
console.log('employeeId' in employee);Code language: JavaScript (javascript)出力
false
trueCode language: JavaScript (javascript)まとめ
- オブジェクトはキーと値のペアのコレクションです。
- オブジェクトのプロパティにアクセスするには、ドット表記(
.)または配列のような表記([])を使用します。 - オブジェクトからプロパティを削除するには、
delete演算子を使用します。 - オブジェクトにプロパティが存在するかどうかを確認するには、
in演算子を使用します。
