JavaScriptのMapオブジェクトに関して

2021 2/07

2020.12.31 2021.02.07

トモジ

Mapオブジェクトって何？
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、Mapオブジェクトに関して要点を
わかりやすく説明しております。

記事の内容

JavaScriptのMapオブジェクト

Mapオブジェクトは、
連想配列を管理するためのオブジェクトで
ES2015でようやく専用オブジェクトとして
提供されました。

size

sizeとは、
Mapオブジェクトにある要素数を返します。

例

sizeに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'フランケンおじさん');
map.set('birth', '1818年3月11日');
map.set('mail', 'franken311@st.com');

console.log('size : ' + map.size);

出力結果

size : 3

set

setはキー(key)と値(value)の要素を追加して、
重複時は上書きします。

例

setに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');

get

getは、指定したキーの要素を取得します。

例

getに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');

console.log('get : ' + map.get('name'));

出力結果

get : tomoji

has

hasは、
指定したキーの要素が存在するかを確認します。

例

hasに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');

console.log('has(name) : ' + map.has('name'));
console.log('has(age) : ' + map.has('age'));

出力結果

has(name) : true
has(age) : false

delete

deleteは、指定したキーの要素を削除します。

例

deleteに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
console.log('delete(前) : ' + map.has('name'));

map.delete('name');
console.log('delete(後) : ' + map.has('name'));

出力結果

delete(前) : true
delete(後) : false

clear

clearは、全ての要素を削除します。

例

clearに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
map.set('age', 34);
console.log('clear(前) : ' + map.size);

map.clear();
console.log('clear(後) : ' + map.size);

出力結果

clear(前) : 2
clear(後) : 0

keys

keysは、全てのキーを取得します。

例

keysに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
map.set('age', 34);
map.set('gender', 'male');

for(var key of map.keys()) {
    console.log('key : ' + key);
}

出力結果

key : name
key : age
key : gender

values

valuesは、全ての値の要素を取得します。

例

valuesに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
map.set('age', 34);
map.set('gender', 'male');

for(var value of map.values()) {
    console.log('value : ' + value);
}

出力結果

value : tomoji
value : 34
value : male

entries

entriesは、全てのキーと値の要素を取得します。

例

entriesに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
map.set('age', 34);
map.set('gender', 'male');

for(var [key,value] of map.entries()) {
    console.log('entries : ' + key + ',' + value);
}

出力結果

entries : name,tomoji
entries : age,34
entries : gender,male

forEach

forEachは、マップ内の要素を順番に処理します。

例

forEachに関して

// Mapオブジェクトの生成
var map = new Map();

map.set('name', 'tomoji');
map.set('age', 34);
map.set('gender', 'male');

map.forEach(function(value, key, map){
    console.log('key : ' + key);
        if(map.get(key) == 'tomoji'){
            console.log('value : ' + value + 'さん');
        }else{
            console.log('value : ' + value);
        }
    console.log('===================');
});

出力結果

key : name
value : tomojiさん
===================
key : age
value : 34
===================
key : gender
value : male
===================