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

JavaScriptで連想配列（ハッシュ）を使う方法｜オブジェクトとMapの使い方を解説

JavaScriptの配列（Array）は、0から始まる数値インデックスでのみ要素へアクセスできます。そのため、PHPのような「連想配列」は標準ではサポートされていません。しかし、オブジェクトやMapを活用すれば、キーと値のペア（ハッシュ）と同じことを簡単に実現できます。本記事では、その具体的な方法をサンプルコード付きで解説します。

配列は数値インデックスで動作する

まず、通常のJavaScript配列の挙動を確認しましょう。以下の例では、数値インデックスを使って値を代入しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
var dept = [];
dept[0] = "Amit";
dept[1] = "Technical";
dept[2] = 45;

document.getElementById("test").innerHTML = dept[1] + " " + dept.length;
</script>
</body>
</html>

このコードの出力結果は「Technical 3」となります。このように、配列の要素はあくまで番号によって管理されており、名前などの文字列をキーとして使うことはできません。

オブジェクトで連想配列を実現する

文字列のキーで値を管理したい場合は、オブジェクト（Object）を使うのが最も一般的でシンプルな方法です。

サンプルコード

var dept = {
  name: "Amit",
  section: "Technical",
  id: 45
};

console.log(dept["name"]);   // Amit
console.log(dept.section);   // Technical

// 後からキーを追加することも可能
dept["salary"] = 50000;
console.log(dept.salary);    // 50000

ドット記法（dept.name）でもブラケット記法（dept["name"]）でもアクセスでき、キーの追加・参照が直感的に行えます。

Mapを使う方法

ES6（ECMAScript 2015）以降では、より柔軟な Map オブジェクトも利用できます。Mapは任意の型をキーにでき、要素数を size プロパティで取得できるなど、連想配列的な操作に適しています。

サンプルコード

var dept = new Map();
dept.set("name", "Amit");
dept.set("section", "Technical");
dept.set("id", 45);

console.log(dept.get("name")); // Amit
console.log(dept.size);        // 3

まとめ

  • JavaScriptの配列は数値インデックス専用であり、連想配列はネイティブにはサポートされていない
  • 文字列キーでデータを管理したい場合はオブジェクトを使うのが基本
  • キーの追加・削除やサイズ取得が多い処理ではMapが便利
  1. JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

    JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。 popメソッドの構文 popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。 let frozen = [ Anna, Elsa, Olaf, Kristoff, Sven ]

  2. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co