JavaScript マップ
Map はキーと値のペアを保持し、キーは任意のデータ型にすることができます。
Map は、キーの元の挿入順序を記憶しています。
Map には、マップのサイズを表すプロパティがあります。
マップ方法
| 方法 | 説明 |
|---|---|
| new Map() | 新しい Map オブジェクトを作成します |
| set() | Map のキーの値を設定します |
| get() | Map のキーの値を取得します |
| clear() | Map からすべての要素を削除します |
| delete() | キーで指定された Map 要素を削除します |
| has() | キーが Map に存在する場合は true を返します |
| forEach() | Map 内の各キーと値のペアに対してコールバックを呼び出します |
| entries() | Map 内の [key, value] のペアを持つ iterator オブジェクトを返します |
| keys() | Map 内のキーを持つ反復子オブジェクトを返します |
| values() | Map の値の反復子オブジェクトを返します |
| プロパティ | 説明 |
|---|---|
| size | Map 要素の数を返します |
How to Create a Map
次の方法で JavaScript マップを作成できます。
- 配列を
new Map()に渡す - マップを作成して
Map.set()を使用する
new Map()
配列をnew Map()コンストラクターに渡すことで、マップを作成できます。
例
// 地図を作成する
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Map.set()
set()メソッドを使用して要素を Map に追加できます。
例
// 地図を作成する
const fruits = new Map();
// マップ値の設定
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
set()メソッドを使用して、既存の Map 値を変更することもできます。
Map.get()
get()メソッドは、Map 内のキーの値を取得します。
Map.size
sizeプロパティは、Map 内の要素の数を返します。
Map.delete()
delete()メソッドは Map 要素を削除します。
Map.clear()
clear()メソッドは、Map からすべての要素を削除します。
Map.has()
Map にキーが存在する場合、 has()メソッドは true を返します。
Maps are Objects
typeof はオブジェクトを返します:
instanceofMap は true を返します
JavaScript オブジェクトとマップ
JavaScript オブジェクトとマップの違い:
| Object | Map |
|---|---|
| 直接反復可能ではない | 直接反復可能 |
| サイズ プロパティがありません | サイズ プロパティを持つ |
| キーは文字列 (またはシンボル) である必要があります | キーには任意のデータ型を使用できます |
| キーの順序が正しくありません | キーは挿入順に並べられます |
| デフォルトのキーがある | デフォルトのキーがない |
Map.forEach()
forEach()メソッドは、Map 内のキーと値のペアごとにコールバックを呼び出します。
例
// すべてのエントリをリストする
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.entries()
entries()メソッドは、Map 内の [key,values] を含むイテレータ オブジェクトを返します。
Map.keys()
keys()メソッドは、Map 内のキーを含む反復子オブジェクトを返します。
Map.values()
values()メソッドは、Map 内の値を含む反復子オブジェクトを返します。
values()メソッドを使用して、Map 内の値を合計できます。
Objects as Keys
オブジェクトをキーとして使用できることは、Map の重要な機能です。
例
// オブジェクトの作成
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 地図を作成する
const fruits = new Map();
// 新しい要素をマップに追加する
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
注意: キーは文字列 ("apples") ではなく、オブジェクト (apples) です。
ブラウザのサポート
JavaScript マップは、Internet Explorer を除くすべてのブラウザーでサポートされています。
| Chrome | Edge | Firefox | Safari | Opera |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。