JavaScript Map&Setオブジェクトのいろいろ

JavaScript Map&Setオブジェクトのいろいろ:

Mapオブジェクト

Mapオブジェクトは一意のキーを持ち、連想配列として表現することができる。Mapオブジェクトのメソッドを使用し要素の追加、削除、取得等が可能。

要素の操作

let map = new Map(); 
 
// setでキーに値を設定する。キーには文字列も数値も使える。 
map.set(1, "one"); 
map.set("2", "two"); 
map.set("three", 3); 
console.log(map); 
// Map(3) {1 => "one", "2" => "two", "three" => 3} 
 
// sizeで要素数を返す。 
map.size; // 3 
 
// getでキーに関連した値を取り出す。 
map.get(1); // "one" 
 
// 既存のキーをsetした場合、値が上書きされる。 
map.set(1, "first"); 
map.get(1); // "first" 
 
// hasで真偽値を返す。存在すればtrue、存在しなければfalseを返す。 
map.has(1) // true 
map.has(2) // false 
 
// deleteで値を削除できる。削除すればtrue、もともと存在しなかった場合falseを返す。 
 
map.set(1, "first"); 
console.log(map); 
// Map(3) {1 => "first", "2" => "two", "three" => 3} 
 
map.delete(1) // true 
 
console.log(map); 
// Map(2) {"2" => "two", "three" => 3} 
 
map.delete(1) // false 

繰り返し処理

let map = new Map(); 
map.set(1, "one"); 
map.set(2, "two"); 
map.set(3, "three"); 
 
//forEachで繰り返し処理できる。 
map.forEach((value, key) => { 
  console.log(`${key} = ${value}`); 
}); 
 
// 1 = one 
// 2 = two 
// 3 = three 
 
// for..ofループでも繰り返し可能 
for (let [key, value] of map) { 
    console.log(`${key} = ${value}`); 
} 
 
// 1 = one 
// 2 = two 
// 3 = three 

Setオブジェクト

Setオブジェクトは一意の値を持つ要素の集合。Setオブジェクトのメソッドを使用し要素の追加、削除、取得等が可能。キーを持たないMapのようなもの。setではなくaddで値の追加を行う。他のメソッドはMapとほぼ同じ。Setを使用すればユニークな配列を簡単に作れます。

let set = new Set(); 
 
// addでキーに値を設定する。キーには文字列も数値も使える。 
set.add(1); 
set.add(2); 
set.add(3); 
console.log(set); 
// Set(3) {1, 2, 3} 
 
// sizeで要素数を返す。 
set.size; // 3 
 
// hasで真偽値を返す。存在すればtrue、存在しなければfalseを返す。 
set.has(1) // true 
set.has(2) // false 
 
// deleteで値を削除できる。削除すればtrue、もともと存在しなかった場合falseを返す。 
 
set.delete(1) // true 
 
console.log(set); 
// Set(2) {2, 3} 
 
set.delete(1) // false 

繰り返し処理

こちらもMapとほぼ同じ。

let set = new Set(); 
set.add(1); 
set.add(2); 
set.add(3); 
 
//forEachで繰り返し処理できる。 
set.forEach((item) => { 
  console.log(item); 
}); 
 
// 1 
// 2 
// 3 
 
// for..ofループでも繰り返し可能 
for (let item of set) { 
    console.log(item); 
} 
 
// 1 
// 2 
// 3 

Setでユニークな配列を生成する

// ...はスプレッド演算子。反復可能オブジェクトを分割展開し、値を渡して配列化している。 
let array1 = [1, 2, 3, 2, 3] 
let array2 = [...new Set(array1)]; 
console.log(array2); 
// [1, 2, 3] 

まとめ

Mapは一意なキーを用いて値を管理する。

Setは一意な値を管理する。

どちらも追加、削除、取得等のメソッドで操作が行える。

参考

Map - JavaScript | MDN
Set - JavaScript | MDN
スプレッド構文 - JavaScript | MDN