6.1 オブジェクトの作成
オブジェクトはJavaScriptの基本的なデータ型の一つで、データの保存や管理に広く使われてる。オブジェクトはプロパティのコレクションで、各プロパティはキー（名前）と値から成り立ってる。この講義では、オブジェクトの作成、プロパティやメソッドのアクセスについて見ていくよ。
1. オブジェクトリテラル
JavaScriptでオブジェクトを作成する最も一般的な方法は、オブジェクトリテラルを使うこと。
この例では、4つのプロパティを持つpersonオブジェクトを作ったよ: name, age, isStudentとgreet。
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Objectコンストラクター
オブジェクトはObject()コンストラクターを使って作成することもできる。
この方法はオブジェクトリテラルを使うのと同等だけど、もっと冗長になるよ:
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. コンストラクタ関数
コンストラクタ関数を使うと、同じプロパティやメソッドを持つ複数のオブジェクトのインスタンスを作成できる。
この例では、コンストラクタ関数Person()を使って、john
とjaneオブジェクトを同じプロパティとメソッドで作ってる:
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Object.create()メソッド
Object.create()メソッドは、指定されたプロトタイプとプロパティを持つ新しいオブジェクトを作成する。
この例では、johnオブジェクトがpersonPrototypeプロトタイプに基づいて作成される:
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
6.2 プロパティとメソッドへのアクセス
1. ドットによるアクセス
プロパティとメソッドへのアクセスで一番よく使うのはドット記法:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // 出力: John
console.log(person.age); // 出力: 30
console.log(person.greet()); // 出力: Hello!
2. 角括弧によるアクセス
オブジェクトのプロパティは角括弧を使ってもアクセスできる。この方法はプロパティ名が変数に格納されている場合や、空白や特殊文字が含まれている場合に便利:
let person = {
'first name': 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // 出力: John
console.log(person['age']); // 出力: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // 出力: Hello!
3. プロパティの変更と追加
オブジェクトのプロパティはいつでも変更や追加ができる:
let person = {
name: 'John',
age: 30
};
// 既存のプロパティを変更
person.age = 31;
console.log(person.age); // 出力: 31
// 新しいプロパティを追加
person.isStudent = false;
console.log(person.isStudent); // 出力: false
4. プロパティの削除
オブジェクトのプロパティはdelete演算子を使って削除できる:
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // 出力: undefined
6.3 オブジェクトのプロパティの反復
1. for...inループ
for...inループは、オブジェクトのすべての列挙可能なプロパティを繰り返すことができる:
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// 出力:
// name: John
// age: 30
// isStudent: false
2. Object.keys()メソッド
Object.keys()メソッドは、オブジェクトのすべての列挙可能なプロパティの配列を返す:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // 出力: ['name', 'age', 'isStudent']
3. Object.values()メソッド
Object.values()メソッドは、オブジェクトのすべての列挙可能なプロパティの値の配列を返す:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // 出力: ['John', 30, false]
4. Object.entries()メソッド
Object.entries()メソッドは、オブジェクトのすべての列挙可能なプロパティの[キー、値]のペアの配列を返す:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // 出力: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 プロパティの存在確認
1. in演算子
in演算子は、オブジェクトにプロパティが存在するかどうかを確認できる:
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // 出力: true
console.log('isStudent' in person); // 出力: false
2. hasOwnProperty()メソッド
hasOwnProperty()メソッドは、オブジェクトに指定されたプロパティがそのオブジェクト固有のものであるかどうか（継承されていないかどうか）を確認する:
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // 出力: true
console.log(person.hasOwnProperty('isStudent')); // 出力: false
GO TO FULL VERSION