キーへの参照によるオブジェクトの値の取得

1. JavaScript でオブジェクトのプロパティにアクセスする
2. JavaScript で角かっこを使用して参照変数によってオブジェクトの値を取得する

JavaScript では、オブジェクトはキーと値のペアで記述されます。 キーによってオブジェクトの値を取得できます。

ただし、変数によってキーを参照し、変数を使用してオブジェクトの値にアクセスすることもできます。 この記事では、それを実現する方法を紹介します。

JavaScript でオブジェクトのプロパティにアクセスする

JavaScript には、オブジェクトのプロパティにアクセスするさまざまな方法があります。 プロパティでは、オブジェクトのキーを意味します。

角括弧[]、ドット演算子.、およびオブジェクトの分解を使用して、プロパティの値を取得できます。 それぞれについて見ていきましょう。

以下の例に示すように、値を取得するには、角括弧内のプロパティを参照する必要があります。

コード例:

var age = {Jack: 25, Danny: 23, Harry: 24}

          console.log(age['Jack']);

出力：

25

上記の例では、文字列のプロパティと数値の値を含むオブジェクト age があります。 角括弧を使用して、プロパティ Jack を呼び出して値 25 にアクセスしました。

これをドット演算子でやってみましょう。

console.log(age.Danny);  // 23

ドット演算子を使用してオブジェクトでプロパティを呼び出すことにより、値にアクセスできます。 角括弧表記を使用している場合の違いに注意してください。

私たちは見積もりの中に物件を書きました。 これは、プロパティが文字列であるためです。

ただし、プロパティが文字列であっても、ドット演算子を使用するときに引用符を使用する必要はありません。

それでは、オブジェクトを分解して値にアクセスしましょう。

var {Harry} = age
console.log(Harry)  // 24

ここでは、プロパティ Harry を波括弧 {} 内に配置しました。 これは変数のように機能し、age オブジェクトを値として保持します。

Harry プロパティの値にアクセスできます。 これは、オブジェクトの分解と呼ばれます。

JavaScript で角かっこを使用して参照変数によってオブジェクトの値を取得する

オブジェクトのプロパティを変数で参照し、それを使用してオブジェクトから値にアクセスすることもできます。 角括弧表記 [] を使用して実行できます。

たとえば、上で作成した age オブジェクトを考えてみましょう。 次に、変数 name を作成し、Jack に設定します。

次に、以下に示すように、角括弧表記を使用して name 変数にアクセスし、オブジェクトの値を取得します。

コード例:

var age = {Jack: 25, Danny: 23, Harry: 24}

var name = 'Jack';
console.log(age[name]);

出力：

25

これは、ドット演算子を使用している間は不可能です。

console.log(age.name);  // undefined

このように、角括弧を使用して、JavaScript のプロパティによって参照される変数を通じてオブジェクトの値にアクセスできます。