頭脳一式 
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がオススメ！同僚に差をつけよう！
