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

JavaScriptのMap（マップ）とは？基本構文とオブジェクトとの違いを実例で解説

Map（マップ）とは

Mapはキーと値のペアを保持できるデータ構造で、キーが挿入された実際の順序を正確に記憶するのが特徴です。また、Mapでは同じキーの重複が許されず、一意なキーのみを格納することができます。

構文：

new Map([iterable])

ケース1：Mapを使わない場合

Mapを使用しない場合、JavaScriptの通常のオブジェクトにはキーとして1つのオブジェクトしか対応できません。複数のオブジェクトをキーとして指定すると、それらはすべて「[object Object]」という同じ文字列に変換されるため、最後に設定したものだけが記憶されます。

次の例では、オブジェクトaとbをそれぞれ別々のキーとして設定しています。しかし、出力結果を見ると、bの値だけが表示されています。このような欠点を解消するために、JavaScriptにはMapが導入されました。

例

<html>
<body>
<script>
   const x = {};
   const a = {};
   const b = {
      num:3
   }
   x[a] = "a";
   x[b] = "b";
   document.write(JSON.stringify(x));
</script>
</body>
</html>

実行結果

{"[object Object]":"b"}

ケース2：Mapを使用した場合

Mapは定義のとおり、キーが挿入された実際の順序を記憶します。そのため、出力結果のように「{}」をキーとして「a」を値に持つペアや、「{"num":3}」をキーとして「b」を値に持つペアなど、設定したすべてのキーと値のペアが正しく保持・表示されます。オブジェクト型のキーも文字列化されずにそのまま扱えるのが大きな利点です。

例

<html>
<body>
<script>
   const a = {};
   const b = {
      num:3
   }
   const map = new Map();
   map.set(a, "a").set(b, "b");
   for(let[key, value] of map.entries()){
   document.write(JSON.stringify(key, value)); // Mapでキーを表示
   document.write((key, value));               // Mapで値を表示
}
</script>
</body>
</html>

実行結果

{}a {"num":3}b

  1. JavaScriptのMapオブジェクトとは？特徴と基本的な使い方を解説

    JavaScriptのMapオブジェクトとは MDNドキュメントによると、Mapオブジェクトは「キーと値のペア」を保持し、キーが挿入された元の順序を記憶するデータ構造です。任意の値（オブジェクトとプリミティブ値の両方）を、キーまたは値として自由に使用できます。 ここで特に重要なポイントは、オブジェクトそのものもMapのキーとして使えるという点です。これは通常のJavaScriptオブジェクトでは実現できない動作です。一般的なJSオブジェクトでは、キーとして使用できるのはプリミティブ値（文字列や数値など）のみに限られます。 さらに、Mapが特定の場面で役立つもう一つの大きな特徴は、反復可能（it

  2. JavaScriptでのSentryの使い方とは？主な機能をわかりやすく解説

    Sentryとは？JavaScript開発を支えるデバッグ・監視ツールSentryは、本番環境（プロダクション）で稼働しているコードを追跡できる、JavaScript向けの総合的なデバッグ・監視ツールパッケージです。開発環境では再現しないエラーや、ユーザーの端末上でのみ発生する不具合を効率的に把握できるため、Webアプリケーションの品質向上に欠かせない存在となっています。Sentryが提供する主な機能は以下の通りです。1. 環境情報と使用状況の記録によるバグ再現エラー発生時のOS、ブラウザ、デバイス、URLなどの環境情報やユーザーの操作状況を自動的に記録します。これにより、報告だけでは再現が難