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

投稿日: 2019-11-08 2022-10-10
タグ: Development, 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"、文字列。 1つのメソッドがあり、メソッド名は次のとおりです。 greet 関数の内容で構成されるメソッド値。

内部 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ペアを追加するか、既存のペアを変更して、オブジェクトプロパティの変更に進むことができます。

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

オブジェクトに新しいプロパティを追加するには、代入演算子（（=).

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

// 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 オブジェクトからプロパティを削除する演算子です。

以下の例では、 weapon からのプロパティ gimli を使用して delete.

// Remove weapon from gimli
delete gimli.weapon;

Outputtrue

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

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

gimli;

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

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

次のセクションでは、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

The for...in ループをと混同しないでください for...of ループ。これは、Arrayオブジェクトタイプでのみ使用されます。配列の反復処理について詳しくは、「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のオブジェクトの操作を参照してください。

getdocs

13036