JavaScriptでオブジェクトを理解する

序章

JavaScriptのオブジェクトは、名前またはキーと値のコレクションで構成されるデータ型です。、 name：valuepairで表されます。名前：値のペアは、文字列、数値、ブール値などの任意のデータ型を含むプロパティと、オブジェクト内に含まれる関数であるメソッドで構成できます。

JavaScriptのオブジェクトは、実際のオブジェクトに例えることができるスタンドアロンのエンティティです。たとえば、本は、タイトル、著者、ページ数、およびジャンルで説明するオブジェクトである場合があります。同様に、車は、色、メーカー、モデル、および馬力で説明するオブジェクトである可能性があります。 JavaScript配列もオブジェクトの一種です。

オブジェクトは、ほとんどのJavaScriptプログラムの不可欠で基本的な側面です。たとえば、ユーザーアカウントオブジェクトには、ユーザー名、パスワード、電子メールアドレスなどのデータが含まれている場合があります。もう1つの一般的な使用例は、Webショッピングプラットフォームのショッピングカートです。これは、名前、価格、配送情報の重量など、各アイテムに関連するすべての情報を含む多数のオブジェクトの配列で構成できます。やることリストは、オブジェクトで構成される可能性のあるもう1つの一般的なアプリケーションです。

このチュートリアルでは、オブジェクトの作成方法、オブジェクトのプロパティとメソッド、およびオブジェクトのプロパティへのアクセス、追加、削除、変更、ループの方法を確認します。

オブジェクトの作成

オブジェクトはJavaScriptデータ型であり、数値または文字列もデータ型であるのと同じです。データ型として、オブジェクトを変数に含めることができます。

JavaScriptでオブジェクトを作成する方法は2つあります。

中括弧を使用するオブジェクトリテラル：{}
newキーワードを使用するオブジェクトコンストラクター

デモンストレーションの目的で、両方のメソッドを使用して空のオブジェクトの例を作成できます。

まず、オブジェクトリテラル。

// Initialize object literal with curly brackets
const objectLiteral = {};

オブジェクトリテラルは、中括弧でオブジェクトを初期化します。

この次の例では、オブジェクトコンストラクターを使用します。

// Initialize object constructor with new Object
const objectConstructor = new Object();

new Object()で初期化されたオブジェクトコンストラクターメソッドを使用して同じデータが作成されました。

これらのアプローチは両方とも、空のオブジェクトを作成します。オブジェクトリテラルの使用は、不整合や予期しない結果が発生する可能性が少ないため、より一般的で推奨される方法です。

変数gimliに含まれるサンプルオブジェクトを作成して、キャラクターを説明することができます。

// Initialize gimli object
const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

新しいオブジェクトはgimliで、これには3つのプロパティがあります。各プロパティは、 name：value ペアで構成され、 key：valueペアとも呼ばれます。 weaponは、プロパティ名の1つであり、文字列であるプロパティ値"axe"にリンクされています。メソッド名はgreetで、メソッド値は関数の内容で構成されたメソッドが1つあります。

greet内で、thisキーワードに気付くかもしれません。オブジェクト内でthisを使用する場合、現在のオブジェクト（この場合はgimli）を参照します。

gimliをコンソールに送信すると、オブジェクト全体が印刷されます。

gimli;

Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

この出力は、使用しているコンソールによってレンダリングが異なる場合がありますが、オブジェクトに渡されたすべての値が出力に表示されることに注意してください。

次に、JavaScriptオブジェクトのプロパティとメソッドを確認します。

プロパティとメソッド

オブジェクトは、プロパティおよびメソッドを持つことができます。

プロパティは、オブジェクト内の名前（キー）と値の間の関連付けであり、任意のデータ型を含めることができます。プロパティは通常、オブジェクトの特性を指します。

メソッドは、オブジェクトプロパティの値である関数であるため、オブジェクトが実行できるタスクです。

オブジェクトのプロパティとメソッドの違いを覚える簡単な方法は、プロパティを名詞、メソッドを動詞と考えることです。 name、race、weaponはすべてオブジェクトに関連付けられた名詞であり、プロパティです。 fight()またはtalk()は、メソッド関数定義として使用される可能性のある動詞です。

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

オブジェクトのプロパティにアクセスするには、2つの方法があります。

ドット表記：.
括弧表記：[]

元のサンプルオブジェクトgimliをもう一度見てみましょう。

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

weaponのプロパティ値を取得する場合は、オブジェクトの変数名に続けてドット（.）とプロパティまたはメソッドを入力することにより、オブジェクトのドット表記で取得できます。名前。

// Retrieve the value of the weapon property
gimli.weapon;

Output"axe"

gimli.weaponは、プロパティ値"axe"を出力します。オブジェクトブラケット表記を使用して同じデータを取得することもできます。インデックスを作成して文字列にアクセスする方法と同様に、角かっこ表記の構文は、プロパティ名を囲む2つの角かっこ（[]）です。

// Retrieve the value of the weapon property
gimli["weapon"];

Output"axe"

ドット表記とブラケット表記の両方が定期的に使用されます。ドット表記はより速く、より読みやすくなりますが、より多くの制限があります。角かっこ表記は、変数に格納されているプロパティ名へのアクセスを許可し、オブジェクトのプロパティに何らかの特殊文字が含まれている場合に使用する必要があります。

オブジェクトメソッドを取得するには、オブジェクト変数にアタッチされた通常の関数を呼び出すのとほとんど同じ方法でメソッドを呼び出します。

gimli.greet();

Output"Hi, my name is Gimli!"

上記の例では、オブジェクトメソッドgreet()の文字列値が返されることがわかります。

これで、name：valueペアを追加するか、既存のペアを変更して、オブジェクトプロパティの変更に進むことができます。

オブジェクトプロパティの追加と変更

オブジェクトに新しいプロパティを追加するには、代入演算子（=）を使用してプロパティに新しい値を割り当てます。

たとえば、新しいageプロパティとしてgimliオブジェクトに数値データ型を追加できます。ドット表記と角かっこ表記の両方を使用して、新しいオブジェクトプロパティを追加できます。

// Add new age property to gimli
gimli.age = 139;

// Add new age property to gimli
gimli["age"] = 139;

ドット表記またはブラケット表記のいずれかを使用して、上記と同じようにその値にアクセスできます。

gimli.age;

Output139

同じプロセスを使用して、メソッドをオブジェクトに追加することもできます。

// Add new fight method to gimli
gimli.fight = function() {
    return `Gimli attacks with an ${this.weapon}.`;
}

この新しいオブジェクトメソッドを作成したら、上記のように呼び出すことができます。

gimli.fight();

Output"Gimli attacks with an axe."

同じメソッドを使用して、既存のプロパティに新しい値を割り当てることにより、オブジェクトのプロパティを変更できます。

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

この時点で、オブジェクトを呼び出すと、すべての追加と変更が表示されます。

gimli;

Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

代入操作により、JavaScriptオブジェクトのプロパティとメソッドを変更できます。

オブジェクトプロパティの削除

オブジェクトからプロパティを削除するには、deleteキーワードを使用します。 deleteは、オブジェクトからプロパティを削除する演算子です。

以下の例では、deleteを使用して、gimliからweaponプロパティを削除します。

// Remove weapon from gimli
delete gimli.weapon;

Outputtrue

delete操作は、プロパティが正常に削除された場合、または存在しないプロパティで使用された場合、trueと評価されます。

gimliの出力をテストして、成功したかどうかを確認できます。

gimli;

Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

上記の出力では、weaponの名前とそれに関連する値は使用できなくなり、プロパティが正常に削除されたことを示しています。

次のセクションでは、JavaScriptでオブジェクトを反復処理する方法について説明します。

オブジェクトプロパティのループ

JavaScriptには、オブジェクトのプロパティを反復処理するためのforループが組み込まれています。これは、for...inループとして知られています。

これは、メインオブジェクトの例gimliの簡略版です。

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "battle axe",
};

for...inを使用して、gimliのすべてのプロパティをトラバースし、それらをコンソールに出力できます。角かっこ表記を使用して、プロパティ値を変数として取得できます。この場合はkeyです。

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}

OutputGimli
dwarf
battle axe

for...inループの最初の変数だけを使用して、プロパティ名自体を取得することもできます。文字列メソッドを使用して、キー値を大文字に変換しました。

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}

OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

for...inループは、Arrayオブジェクトタイプでのみ使用されるfor...ofループと混同しないでください。配列の反復処理について詳しくは、「JavaScriptでの配列の理解」チュートリアルをご覧ください。

もう1つの便利な列挙メソッドは、Object.keys()メソッドです。これは、オブジェクトのキーの配列を返します。

// Initialize method on gimli object to return property keys
Object.keys(gimli);

Output["name", "race", "weapon"]

このメソッドを使用すると、オブジェクトのキーまたは名前を配列として操作できるため、JavaScript配列で使用できるすべてのメソッドを活用できます。

結論

オブジェクトは、JavaScriptプログラミング言語の非常に便利で用途の広い機能です。これらは、JavaScriptでコードを記述するための主要な構成要素の一部であり、関連するデータと機能を整理するための実用的な方法です。 To Doリスト、ショッピングカート、ユーザーアカウント、およびWebマップ上の場所はすべて、実際に遭遇する可能性のあるJavaScriptオブジェクトの多くの例の一部です。

このチュートリアルでは、プロパティとメソッドの違い、オブジェクトの作成方法、およびオブジェクトプロパティの追加、削除、変更、ループの方法について学習しました。 JavaScriptオブジェクトの詳細については、MozillaDeveloperNetworkのオブジェクトの操作を参照してください。