Categories: JavaScript

【JavaScript入門】Mapの使い方

Mapの生成

Mapを生成するには以下のように記述します。

js

let testMap= new Map();

Mapに要素を追加する(set)

要素を追加するにはsetメソッドを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

keyが重複した場合

keyが重複した場合は、最後に格納した値で上書きされます。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');
extension.set('xls', 'Excel2003');
for (let [key,val] of extension){
    console.log(key + ":" + val);
}

実行結果は以下のとおりです。

実行結果

xls:Excel2003
js:Javascript
md:markdown
html:hyper-text-markup-language

Mapのサイズを取得する(size)

Mapのサイズを取得するにはsizeを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

console.log(extension.size);//4

指定したキーに紐づく値を取得する(get)

指定したキーに紐づく値を取得するgetを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

console.log(extension.get('js'));//Javascript
console.log(extension.get('java'))//undefined

指定したキーが存在するかを判定する(has)

指定したキーが存在するかを判定するにはhasを使用します。
存在する場合はtrueが返ります。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

console.log(extension.has('js'));//true
console.log(extension.has('java'))//false

指定したキーと値のペアを削除する(delete)

指定したキーと値のペアを削除するにはdeleteを使用します。
削除に成功するとtrueを返します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

console.log('削除前のMapの中身は以下のとおり。');
for (let [key,val] of extension.entries()){
    console.log(key + ":" + val);
}


//jsを削除
console.log(extension.delete('js'));//true

console.log('削除後のMapの中身は以下のとおり。');
for (let [key,val] of extension.entries()){
    console.log(key + ":" + val);
}

実行結果は以下のとおり。

実行結果

削除前のMapの中身は以下のとおり。
xls:Excel
js:Javascript
md:markdown
html:hyper-text-markup-language
true
削除後のMapの中身は以下のとおり。
xls:Excel
md:markdown
html:hyper-text-markup-language

すべてキーと値のペアを削除する(clear)

すべてのキーと値のペアを削除するにはclearを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

console.log('削除前');
for (let [key,val] of extension.entries()){
    console.log(key + ":" + val);
}

//すべて削除
extension.clear();

console.log('削除後');
for (let [key,val] of extension.entries()){
    console.log(key + ":" + val);
}

実行結果は以下のとおり。

実行結果

削除前
xls:Excel
js:Javascript
md:markdown
html:hyper-text-markup-language
undefined
削除後

Map内のすべてのキーを取得する(ループ処理)(keys)

Map内のすべてのキーを取得するにはkeysを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

for (let key of extension.keys()){
    console.log(key);
}

実行結果は以下のとおり。

実行結果

xls
js
md
html

Map内のすべての値を取得する(ループ処理)(values)

Map内のすべての値を取得するにはvaluesを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

for (let key of extension.values()){
    console.log(key);
}

実行結果は以下のとおり。

実行結果

Excel
Javascript
markdown
hyper-text-markup-language

Map内のすべてのキーと値を取得する(ループ処理)(entries)

Map内のすべてのキーと値を取得するにはentriesを使用します。

js

let extension = new Map();

extension.set('xls', 'Excel');
extension.set('js', 'Javascript');
extension.set('md', 'markdown');
extension.set('html', 'hyper-text-markup-language');

for (let [key,val] of extension.entries()){
    console.log(key + ":" + val);
}

実行結果は以下のとおり。

実行結果

xls:Excel
js:Javascript
md:markdown
html:hyper-text-markup-language

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp