JavaScriptで「new Map();」とオブジェクトの違いを簡単なサンプルコードで解説
5 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのオブジェクトと「new Map();」の違いを簡単なサンプルコードで解説します。
目次
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
「new Map();」とは
簡単に言うと「連想配列みたいなオブジェクト」です。
例えば下記のコードを書いたとします。(とりあえずそう書くんだ〜と思っていいです。)
const scores = new Map();
scores.set('Aさん', 85);
scores.set('Bさん', 92);結果は下記の表示になります。
Map {
'Aさん' => 85,
'Bさん' => 92
}要素が連想配列のオブジェクトになっているのが分かります。
ですがオブジェクトとは扱いが違いますので違いを説明します。
その前にまずは「new Map();」でのコードの書き方について解説します。
new Map()の要素をセットする方法
サンプルで見せた下記のコードで解説します。
const scores = new Map();
scores.set('Aさん', 85);
scores.set('Bさん', 92);1行目の記述で下記を作ります。
Map {
}3行目・4行目の「.set()」でkeyとvalueのセットをしています。
第一引数がkeyで第二引数がvalueです。
それではオブジェクトとの違いを説明します。
要素の取得
オブジェクトの場合とMapの場合で挙動は違います。
まずはオブジェクトの場合から説明します。
オブジェクトの場合
オブジェクトを使う場合は「’ ‘」の中が数値のキーの場合は昇順で表示されて文字がキーの場合は定義順で表示されます。(下記参照)
const obj = {
'100': 'a',
'2': 'b',
'7': 'c',
'name': 'd',
'1': 'e',
'age': '25'
};
console.log(Object.keys(obj));
// 結果は以下
['1', '2', '7', '100', 'name', 'age']また配列の要素は数値がキーの物から先に並びます。
次はMapの場合です。
Mapの場合
Mの場合は「’ ‘」の中のkeyが数値であろうと文字であろうと定義順に表示します。(下記参照)
const map = new Map();
map.set('100', 'a');
map.set('2', 'b');
map.set('7', 'c');
map.set('name', 'd');
map.set('1', 'e');
map.set('age', '25');
console.log([...map.keys()]);
// 結果は以下
['100', '2', '7', 'name', '1', 'age']オブジェクトをキーにする
オブジェクトの場合はこれができませんがMapの場合はできます。
const user1 = { id: 1 };
const user2 = { id: 2 };
const loginMap = new Map();
loginMap.set(user1, 'ログイン中');
loginMap.set(user2, 'ログアウト');
console.log(loginMap.get(user1));
// 結果は以下
ログイン中共通点
共通するのは同じキーが2つ以上ある場合は最後のキーで上書きする点です。
const obj = {
'100': 'a',
'2': 'b',
'7': 'c',
'name': 'd',
'100': 'e',
'7': '25'
};
console.log(Object.keys(obj));
// 結果は以下
['100', '2', '7', 'name', 'age']←'7'は「'7': '25'」が適用される
const map = new Map();
map.set('100', 'a');
map.set('2', 'b');
map.set('7', 'c');
map.set('name', 'd');
map.set('1', 'e');
map.set('7', '25');
console.log([...map.keys()]);
// 結果は以下
['100', '2', '7', 'name', 'age', '1']←'7'は「'7': '25'」が適用される要素の個数(サイズ)を取得
オブジェクトの場合とMapの場合で取得方法は違います。
まずはオブジェクトの場合から説明します。
オブジェクトの場合
そのままでサイズの取得ができなく一旦配列にしないといけません。
const obj = {
'100': 'a',
'2': 'b',
'7': 'c',
'name': 'd',
'1': 'e',
'age': '25'
};
console.log(Object.keys(obj).length);
// 結果は以下
6Mapの場合
直接サイズの取得ができます。
const map = new Map();
map.set('100', 'a');
map.set('2', 'b');
map.set('7', 'c');
map.set('name', 'd');
map.set('1', 'e');
map.set('7', '25');
console.log(map.size);
// 結果は以下
6