JavaScriptでオブジェクトを作成する方法

プログラミング言語でコードを書いている間、私たちは皆、何らかの方法でオブジェクトを扱います。JavaScriptでは、オブジェクトは、ネットワークを介してデータを保存、操作、および送信する方法を提供します。

JavaScriptのオブジェクトが、Javaなどの他の主流のプログラミング言語のオブジェクトと異なる点はたくさんあります。それについては別のトピックで取り上げます。ここでは、JavaScriptでオブジェクトを作成できるさまざまな方法にのみ焦点を当てましょう。

JavaScriptでは、オブジェクトを「key:value」ペアのコレクションと考えてください。これにより、JavaScriptでオブジェクトを作成する最初で最も一般的な方法がもたらされます。

これを始めましょう。

1.オブジェクトリテラル構文を使用してオブジェクトを作成する

これは本当に簡単です。あなたがしなければならないのは、中括弧({})のセットの中に ':'で区切られたキーと値のペアを投げるだけで、オブジェクトは以下のように提供(または消費)される準備ができています:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

これは、JavaScriptでオブジェクトを作成するための最も簡単で最も一般的な方法です。

2.「new」キーワードを使用してオブジェクトを作成する

このオブジェクト作成方法は、Javaなどのクラスベース言語でオブジェクトを作成する方法に似ています。ちなみに、ES6以降、クラスはJavaScriptにもネイティブであり、この記事の終わりに向かってクラスを定義してオブジェクトを作成する方法を見ていきます。したがって、「new」キーワードを使用してオブジェクトを作成するには、コンストラクター関数が必要です。

'new'キーワードパターンを使用する2つの方法があります—

a)「組み込みオブジェクトコンストラクター関数」で「new」キーワードを使用する

オブジェクトを作成するにはObject()、次のようにコンストラクターで新しいキーワードを使用します。

const person = new Object();

ここで、このオブジェクトにプロパティを追加するには、次のような操作を行う必要があります。

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

このメソッドは入力に少し時間がかかることをご存知かもしれません。また、コンストラクター関数が組み込みであるかユーザー定義であるかを見つけるためにバックグラウンドでスコープ解決が行われるため、この方法はお勧めしません。

b)ユーザー定義のコンストラクター関数で「new」を使用する

'Object'コンストラクター関数を使用するアプローチのもう1つの問題は、オブジェクトを作成するたびに、作成したオブジェクトにプロパティを手動で追加する必要があるという事実に起因します。

何百もの人物オブジェクトを作成する必要がある場合はどうなりますか?あなたは今痛みを想像することができます。そのため、オブジェクトにプロパティを手動で追加する必要がないように、カスタム(またはユーザー定義)関数を作成します。最初にコンストラクター関数を作成し、次に「new」キーワードを使用してオブジェクトを取得します。

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

これで、「Person」オブジェクトが必要なときはいつでも、次のようにするだけです。

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Object.create()を使用して新しいオブジェクトを作成します

このパターンは、「new」キーワード構文を直接使用せずに、他の既存のオブジェクトからオブジェクトを作成するように求められた場合に非常に便利です。このパターンの使い方を見てみましょう。MDNで述べられているように:

このObject.create()メソッドは、既存のオブジェクトを新しく作成されたオブジェクトのプロトタイプとして使用して、新しいオブジェクトを作成します。

このObject.create方法を理解するには、2つのパラメーターが必要であることを覚えておいてください。最初のパラメーターは、作成される新しいオブジェクトのプロトタイプとして機能する必須オブジェクトです。2番目のパラメーターは、新しいオブジェクトに追加されるプロパティを含むオプションのオブジェクトです。

このトピックに焦点を合わせ続けるために、プロトタイプと継承チェーンについては詳しく説明しません。しかし、簡単なポイントとして、プロトタイプは、他のオブジェクトが必要なプロパティ/メソッドを借用できるオブジェクトと考えることができます。

によって表される組織があると想像してください orgObject

const orgObject = { company: 'ABC Corp' };

そして、この組織の従業員を作成したいとします。明らかに、すべての従業員オブジェクトが必要です。

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Object.assign()を使用して新しいオブジェクトを作成します

複数のオブジェクトのプロパティが必要なオブジェクトを作成する場合はどうなりますか?Object.assign()私たちの助けになります。

MDNで述べられているように:

このメソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。Object.assign()

Object.assignメソッドは、任意の数のオブジェクトをパラメーターとして受け取ることができます。最初のパラメーターは、作成して返すオブジェクトです。渡された残りのオブジェクトは、プロパティを新しいオブジェクトにコピーするために使用されます。前に見た例を拡張して理解しましょう。

以下のように2つのオブジェクトがあると仮定します。

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

ここで、「フォード」車を運転する「ABCCorp」の従業員オブジェクトが必要です。あなたはObject.assign以下の助けを借りてそれを行うことができます:

const employee = Object.assign({}, orgObject, carObject);

これで、とをプロパティとしてemployee持つオブジェクトを取得できます。companycarName

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5.ES6クラスを使用してオブジェクトを作成する

You will notice that this method is similar to using ‘new’ with user defined constructor function. The constructor functions are now replaced by classes as they are supported through ES6 specifications. Let’s see the code now.

class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName 

These are all the ways I know to create objects in JavaScript. I hope you enjoyed this post and now understand how to create objects.

Thanks for your time for reading this article. If you liked this post and it was helpful to you, please click the clap ? button to show your support. Keep learning more!