JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで変数キーを使ってオブジェクトの値にアクセスする方法

JavaScriptでは、オブジェクトの値にアクセスする際、一般的にはドット記法（Dot notation）またはブラケット記法（Bracket notation）を使用します。しかし実は、変数キー（variable key）を使って値にアクセスすることも可能です。この記事では、それぞれの方法を具体例とともにわかりやすく解説します。

ドット記法とブラケット記法によるアクセス

まずは基本となる2つの記法を確認しましょう。ドット記法は「オブジェクト名.プロパティ名」の形式で記述し、ブラケット記法は「オブジェクト名['文字列キー']」のように文字列キーを角括弧で囲んで指定します。

サンプルコード

<html>
<body>
<script>
   let me = {
      name: 'javascript'
   };
   document.write(me.name);
   document.write("</br>");
   document.write(me['name']);
</script>
</body>
</html>

実行結果

javascript
javascript

上記の例では、同じオブジェクトの値に対して、ドット記法とブラケット記法の両方でアクセスしています。どちらの方法でも同じ結果が得られることが確認できます。

変数キーを使ったアクセス方法

次に、本題である変数キーを使ったアクセス方法を見ていきましょう。キーの名前が事前に分からない場合や、動的にキーを切り替えたい場合に、この手法が非常に役立ちます。

サンプルコード

<html>
<body>
<script>
   let me = {
      name: 'javascript'
   };
   let key = 'name';
   document.write(me[key]);
</script>
</body>
</html>

実行結果

javascript

この例では、変数keyに文字列'name'を代入し、その変数をブラケット記法の中で使用しています。これにより、プログラムの実行時に動的にプロパティを指定できるようになります。

まとめ

JavaScriptでオブジェクトの値にアクセスする方法は3つあります。静的なアクセスにはドット記法が便利ですが、変数を使って動的にキーを指定したい場合はブラケット記法と組み合わせる必要があります。APIレスポンスの処理やループ内でのプロパティ参照など、実務でも頻繁に使われるテクニックなので、しっかりと理解しておきましょう。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座