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

JavaScriptの連想配列とは？基本的な仕組みと使い方を解説

JavaScriptにおける「連想配列（Associative Array）」とは、数値のインデックスの代わりに、ユーザーが自由に定義した文字列キーを使って値にアクセスできるデータ構造のことです。厳密に言えば、JavaScriptの連想配列の正体はオブジェクトであり、他の言語にあるような専用の連想配列型は存在しません。

通常の配列と比べると、連想配列には次のような特徴があります。

  • lengthプロパティを持たない：要素数を取得する機能がありません。
  • 通常のforループでは走査できない：インデックスが存在しないため、for...in文などを使って反復処理を行います。

JavaScriptの連想配列のサンプルコード

以下は、連想配列（オブジェクト）を作成し、「CLICK HERE」ボタンのクリックをきっかけにfor...in文ですべてのキーと値を画面に表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptの連想配列</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、連想配列を作成して内容を表示します
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        let arr = { Name: "Rohan", Class: 9, Age: 16 };
        for (i in arr) {
            resEle.innerHTML += "Key = " + i + " : Value = " + arr[i] + "<br>";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、最初に次のような画面が表示されます。

JavaScriptの連想配列とは？基本的な仕組みと使い方を解説

「CLICK HERE」ボタンをクリックすると、連想配列の各キーと対応する値が順番に出力されます。

JavaScriptの連想配列とは？基本的な仕組みと使い方を解説

まとめ

JavaScriptで連想配列を実現するには、オブジェクトを利用します。キーを指定して直感的にデータを管理できるのが大きな利点ですが、lengthプロパティが使えない点や、走査にはfor...in文やObject.keys()などのメソッドを利用する点に注意が必要です。用途に応じて通常の配列とオブジェクトを適切に使い分けましょう。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2