ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

宣言と初期化
割り当てセット
キー値を取得する
キー値を削除削除
キー値が存在するかどうかを判定する
すべてのキー値を取得する()
キー/値イテレータエントリ()
すべてのキー値を反復処理する forEach(callback)
マップ内のすべてのキー値をクリアするclear()

他のデータ構造との変換

配列にマップ
オブジェクトへのマッピング
配列からマップへ
マップするオブジェクト
JSONにマップ

要約する

Map は、ECMAScript 6 仕様で導入されたデータ構造です。これは、他のプログラミング言語の辞書やハッシュテーブルと同様に、キーと値のペアのリストを保存する便利な方法です。

マッピングとは何か

Javascript オブジェクトは基本的にキーと値のペア (ハッシュ構造) のコレクションですが、従来はキーとして使用できるのは文字列のみであるため、その使用は大きく制限されます。この問題を解決するために、ECMAScript 6 では Map データ構造が導入されました。オブジェクトに似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、あらゆるタイプの値（オブジェクトを含む）をキーとして使用できます。つまり、オブジェクト構造は「文字列と値」の対応を提供し、マップ構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。

Map の基本的な使い方を理解するために、簡単な例を見てみましょう。

//マップインスタンスを宣言する const page_info = new Map()
// マップに要素を追加する page_info.set("seo", {
    "キーワード": "devpoint、マップ",
    "description":"Map オブジェクトは単純なキー/値マッピングであり、キーと値は何でも (プリミティブまたはオブジェクト) にすることができます。"
})
page_info.set("タイトル", "javascript es6 マップ")
コンソール.log(ページ情報) 
console.log(typeof page_info) // オブジェクト

出力は次のようになります。

地図 {
  'seo' => {
    キーワード: 'devpoint、Map'、
    説明: 「Map オブジェクトは、キーと値が何でも (プリミティブ値またはオブジェクト値) になる単純なキー/値マッピングです。」
  },
  'title' => 'JavaScript ES6 のマップ マッピング'
}
物体

出力結果から判断すると、Map は本質的にオブジェクトです。

オブジェクトとマップの違い

Object と Map の類似点は、どちらもキーによって値を保存および取得し、キーを削除できることです。両者は非常によく似ていますが、違いは次のとおりです。

マップの共通メソッド

よく使用される Map メソッドには、set(key, value) の割り当て、get(key) の取得、指定されたキー名とそれに対応する値の削除 (delete(key))、has(key) の存在の確認、すべての値の取得 (values())、キー/値の反復子 (entries())、トラバーサル (forEach())、すべてのキー/値のペアのクリア (clear()) などがあります。

宣言と初期化

新しい Map を作成します。
console.log(new_map); //出力: Map {}

割り当てセット

割り当てでは map.set(key,value) を使用します。これを使用して、新しいキー/値のペアを追加したり、キー/値のペアを変更したり、Map オブジェクト全体を返したりできます。

const page_info = 新しいマップ()
// 値を設定する page_info.set("seo", {
    "キーワード": "devpoint、マップ",
    "description":"Map オブジェクトは単純なキー/値マッピングであり、キーと値は何でも (プリミティブまたはオブジェクト) にすることができます。"
});
コンソールログ(ページ情報);
page_info.set("seo", "seo情報");
コンソールログ(ページ情報);

上記の例では、値を増分し、値を変更します。

地図 {
  'seo' => {
    キーワード: 'devpoint、Map'、
    説明: 「Map オブジェクトは、キーと値が何でも (プリミティブ値またはオブジェクト値) になる単純なキー/値マッピングです。」
  }
}
マップ { 'seo' => 'seo 情報' }

キー値を取得する

キー値を取得するには、get(key) を使用します。取得した key->value が存在しない場合は、undefined を返します。

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
定数title = page_info.get("title");
seo_info は page_info.get("seo");
console.log(title); //javascript es6 マップ マッピング console.log(seo_info); //未定義

キー値を削除削除

map.delete(key) は、指定されたキーのキーと値のペアを削除し、成功または失敗の結果を返します。削除が成功した場合は true が返され、それ以外の場合は false が返されます。

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
console.log(page_info); // マップ { 'title' => 'javascript es6 マップ マッピング', 'author' => 'devpoint' }

const delete_author = page_info.delete("author");
seo を削除します。
console.log(deleted_author); // 真
console.log(deleted_seo); // 偽
console.log(page_info); // マップ { 'title' => 'javascript es6 マップ マッピング' }

キー値が存在するかどうかを判定する

指定されたキーが存在するかどうかを確認するには、map.has(key) を使用します。

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
console.log(page_info); // マップ { 'title' => 'javascript es6 マップ マッピング' }

console.log(page_info.has("title")); // 真
console.log(page_info.has("seo")); // 偽

すべてのキー値を取得する()

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
console.log(page_info.values()); // [マップイテレータ] { 'javascript es6 マップマッピング', 'devpoint' }

キー/値イテレータエントリ()

map.entries() を使用して、Map オブジェクト内の各 [key, value] 配列を含む Iterator を返します。

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
console.log(page_info.entries());

出力は次のようになります。

[マップエントリ] {
['title', 'JavaScript ES6 のマップマッピング'],
[ '著者', 'devpoint' ]
}

すべてのキー値を反復処理する forEach(callback)

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
page_info.forEach((値,キー)=>{
    console.log(キー、値);
});

出力は次のようになります。

タイトル javascript es6 マップマッピング
著者 devpoint

マップ内のすべてのキー値をクリアするclear()

マップ内のすべてのキーと値のペアをクリアするには、map.clear() を使用します。

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
ページ情報をクリアします。
console.log(page_info); // マップ {}

他のデータ構造との変換

配列にマップ

マップを配列に変換する最も便利な方法は、スプレッド演算子を使用することです...

const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
console.log([...page_info]); // [ [ 'title', 'javascript es6 マップ マッピング' ], [ 'author', 'devpoint' ] ]

オブジェクトへのマッピング

関数 mapToObj(map) {
    オブジェクトを作成します。
    map.forEach((v,k)=>{
        定数vは、
    });
    obj を返します。
}
const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");

console.log( mapToObj(page_info));

出力は次のようになります。

[オブジェクト: null プロトタイプ] {
タイトル: 「JavaScript ES6 のマップマッピング」
著者: 'devpoint'
}

配列からマップへ

配列を Map コンストラクターに渡すだけです (つまり、new Map(array))。

定数ページ情報 = [
    ["title","JavaScript ES6 のマップ マッピング"],
    ["著者","開発ポイント"]
];
console.log(new Map(page_info)); // Map { 'title' => 'javascript es6 map マッピング', 'author' => 'devpoint' }

マップするオブジェクト

オブジェクトは Object.entries() を通じてマップに変換されます。

定数ページ情報 = {
    タイトル:"JavaScript ES6 のマップ マッピング",
    著者:"devpoint"
};
console.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6 map マッピング', 'author' => 'devpoint' }

JSONにマップ

マップをJSONに変換するには、まずマップをオブジェクトに変換し（上記のmapToObj）、次にJSON.stringifyメソッドを使用します。

関数 mapToObj(map) {
    オブジェクトを作成します。
    map.forEach((v,k)=>{
        定数vは、
    });
    obj を返します。
}
関数 mapToJson(map){
    JSON.stringify(mapToObj(map)) を返します。
}
const page_info = 新しい Map();
page_info.set("title", "javascript es6 マップ マッピング");
page_info.set("author", "devpoint");
console.log( mapToJson(page_info)); // {"title":"javascript es6 マップ マッピング","author":"devpoint"}

要約する

これで、ECMAScript6 の Map マッピングの基本概念と一般的な方法についての記事は終了です。ECMAScript6 の Map マッピングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: