JavaScript のオブジェクト

JavaScript では、オブジェクトはキーと値のペアのコレクションであり、値はデータ (プロパティ) または関数 (メソッド) になります。 JavaScript では、配列、関数、さらには他のオブジェクトも含め、ほぼすべてがオブジェクトであるため、オブジェクトは JavaScript の基礎です。

1.オブジェクトの作成

A.オブジェクトリテラル

オブジェクトを作成する最も簡単な方法は、中括弧 {} を使用することです。

例：

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

B.オブジェクトコンストラクター

Object コンストラクターを使用すると、空のオブジェクトが作成されます。

例：

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

C. Object.create()の使用

このメソッドは、指定されたプロトタイプを使用して新しいオブジェクトを作成します。

例：

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

2.オブジェクトのプロパティへのアクセス

A.ドット表記

ドット (.) を使用してプロパティにアクセスします。

例：

console.log(person.name); // Output: Alice

B.括弧表記

角括弧 ([]) を使用してプロパティにアクセスします。動的なプロパティ名に役立ちます。

例：

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

3.プロパティの追加、変更、削除

• 追加:

person.country = "USA";
console.log(person.country); // Output: USA

• 変更中:

person.age = 26;
console.log(person.age); // Output: 26

• 削除:

delete person.age;
console.log(person.age); // Output: undefined

4.オブジェクト内のメソッド

関数がオブジェクトのプロパティである場合、その関数は メソッドと呼ばれます。

例：

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!

5.オブジェクトのプロパティの反復

A. for...in を使用する

オブジェクトの列挙可能なすべてのプロパティを反復処理します。

例：

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

B. Object.keys()の使用

オブジェクトのキーの配列を返します。

例：

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});

C. Object.entries() の使用

[キー、値] ペアの配列を返します。

例：

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

6.オブジェクトメソッド

JavaScript には、オブジェクトを操作するためのいくつかの組み込みメソッドが用意されています。

• Object.assign(): あるオブジェクトから別のオブジェクトにプロパティをコピーします。

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // Output: { a: 1, b: 2 }

• Object.freeze(): オブジェクトの変更を禁止します。

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No effect
console.log(obj.a); // Output: 1

• Object.seal(): プロパティの追加または削除を禁止しますが、既存のプロパティの変更は許可します。

const obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // No effect
obj.a = 3; // Works
console.log(obj); // Output: { a: 3 }

7.プロトタイプと継承

JavaScript のオブジェクトにはプロトタイプがあり、これはプロパティとメソッドを継承する別のオブジェクトです。

例：

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // Output: true (inherited)
console.log(dog.barks); // Output: true

8.オブジェクトの分割

構造を分割すると、オブジェクトからプロパティを抽出して変数に入れることができます。

例：

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 25

9.まとめ

• オブジェクトは、プロパティとメソッドを格納できるキーと値のペアです。
• 単純なオブジェクトの作成にはオブジェクト リテラルを使用します。
• ドットまたは括弧表記を使用してオブジェクトのプロパティにアクセスします。
• オブジェクトを効果的に操作するには、Object.keys()、Object.assign()、Object.freeze() などの組み込みメソッドを使用します。
• オブジェクトをマスターすることは、プロトタイプや継承などの高度な JavaScript の概念を理解するために非常に重要です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレスまでお気軽にご連絡ください: [email protected].