JavaScriptのmapオブジェクトのnew Map()について記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。
JavaScriptのMapオブジェクトとは？
キー（key）とキーに対応する値（value）を対応させて保持するオブジェクトで、Setオブジェクトと併せて、ES6(ES2015)から追加された比較的新しいデータタイプです。
配列に似ており、Javascript でデータを扱う上でよく使うデータ型として知られています。
またJSのオブジェクト型とも非常に似ておりますが、文字列や数値、真偽値（Boolean）をキーとなる値に対して自由に設定できる違いがあります。
JS,TypeScript,Node.jsなどで開発していくうえで重要なデータタイプとなっています。
それでは、次に本題の説明に移ります。
JavaScriptのmapオブジェクトのnew Map()概要
new Map()は、キーと値の組み合わせを格納するJavaScriptのオブジェクトです。
キーと値は任意の型を持つことができ、複数のキーと値を格納して管理することができます。
構文、使い方
new Map()は、キーと値をペアにしたオブジェクトを作成するための構文です。
使い方は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
// 新しいMapオブジェクトを作成 const myMap = new Map(); // キーと値を追加 myMap.set('name', 'John'); myMap.set('age', 30); // キーと値を取得 console.log(myMap.get('name')); // John console.log(myMap.get('age')); // 30 |
引数について
new Map()の引数は、配列や他のMapオブジェクトを指定することができます。
引数が指定されていない場合は、空のMapオブジェクトが作成されます。
返り値について
new Map()は、キーと値のペアを格納するJavaScriptのオブジェクトです。
返り値として、新しいMapオブジェクトが返されます。
このメソッドを利用した便利なテクニック
Mapオブジェクトを使うと、キーと値をペアにして管理することができます。
これを使って、オブジェクトのプロパティを簡単に取得したり、オブジェクトを簡潔に表現したりすることができます。
また、Mapオブジェクトを使って、オブジェクトのプロパティを効率的に検索したり、オブジェクトを効率的に処理したりすることも可能です。
現場で実際にどのように使われているか
JavaScriptのmapオブジェクトのnew Map()は、キーと値のペアを格納するために使用されます。
例えば、以下のようなコードを使用して、オブジェクトのキーと値をマップに格納できます。
|
1 2 3 |
let myMap = new Map(); myMap.set('name', 'John'); myMap.set('age', 25); |
JavaScriptのmapオブジェクトのnew Map()と一緒によく使われる処理
set()メソッドを使用して、キーと値をマップに追加する処理がよく使われます。
なぜなら、mapオブジェクトを使用すると、キーと値を簡単に関連付けることができるからです。
使用する上での注意点
– Mapオブジェクトは、キーと値のペアを保持するためのオブジェクトです。
– 同じキーを複数回使用することはできません。
– キーと値のペアを追加するには、set()メソッドを使用する必要があります。
– キーを使用して値を取得するには、get()メソッドを使用する必要があります。
JavaScriptのmapオブジェクトのnew Map()と似た処理のJSメソッド、違い
Object.assign()メソッドと似ていますが、下記の違いがあります。
- Object.assign()：オブジェクトのプロパティをコピーするメソッドです。
- new Map()：キーと値のペアを保持するオブジェクトを作成するメソッドです。
JavaScriptのmapオブジェクトのnew Map()を使ったサンプルコードの紹介
Mapオブジェクトを使ったサンプルコード1
|
1 2 3 4 5 6 7 8 9 |
// Mapオブジェクトを作成 let myMap = new Map(); // Mapオブジェクトに値を追加 myMap.set('name', 'John'); myMap.set('age', 20); // Mapオブジェクトから値を取得 console.log(myMap.get('name')); |
Mapオブジェクトを使ったサンプルコード2
|
1 2 3 4 5 6 7 8 9 |
// Mapオブジェクトを作成 let myMap = new Map(); // Mapオブジェクトに値を追加 myMap.set('name', 'John'); myMap.set('age', 20); // Mapオブジェクトのサイズを取得 console.log(myMap.size); |
また、JavaScriptの公式ドキュメントであるMDNで記載されているMapメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。
JavaScript mapオブジェクトの他メソッドについて
JavaScriptのmapオブジェクトの他メソッドについては、下記記事にもまとめていますので参考にしてみてください
| メソッド名 | 機能 | リンク |
| map new Map() | 新しいマップオブジェクトを作成します | JavaScript mapオブジェクト newMapメソッドの使い方 |
| map.prototype.set() | マップ内のキーの値を設定します | JavaScript mapオブジェクト setメソッドの使い方 |
| map.prototype.get() | マップ内のキーの値を取得します | JavaScript mapオブジェクト getメソッドの使い方 |
| map.prototype.clear() | マップからすべての要素を削除します | JavaScript mapオブジェクト clearメソッドの使い方 |
| map.prototype.delete() | キーで指定されたマップ要素を削除します | JavaScript mapオブジェクト deleteメソッドの使い方 |
| map.prototype.has() | キーがマップに存在する場合、trueを返します | JavaScript mapオブジェクト hasメソッドの使い方 |
| map.prototype.forEach() | マップ内の各キー/値ペアのコールバックを呼び出す | JavaScript mapオブジェクト foreachメソッドの使い方 |
| map.prototype.entries() | マップ内の[key、value]ペアを持つイテレーターオブジェクトを返します | JavaScript mapオブジェクト entriesメソッドの使い方 |
| map.prototype.keys() | マップ内にキーを含むイテレーターオブジェクトを返します | JavaScript mapオブジェクト keysメソッドの使い方 |
| map.prototype.values() | マップ内の値のイテレーターオブジェクトを返します | JavaScript mapオブジェクト valuesメソッドの使い方 |
| map size property | マップ要素の数を返します | JavaScript mapオブジェクト sizeプロパティの使い方 |
また、JavaScriptの公式ドキュメントであるMDNで記載されているmapオブジェクトについても補足としてリンクを貼っておきます。
参考にしてみてください。
