6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年3月11日 [ES2015] Map/Set - Set (JavaScript Primer) 値の追加と取り出し

値の追加と取り出し

  • 作成したセットに値を追加するにはaddメソッドを使います。
  • 重複する値は持たないので、既存の値にaddメソッドを使っても無視されます。
  • セットが特定の値を持っているかの真偽値を得るのにhasメソッドがあります。  
const set = new Set();
// 値の追加
set.add("a");
console.log(set.size); // => 1
// 重複する値は追加されない
set.add("a");
console.log(set.size); // => 1
// 値の存在確認
console.log(set.has("a")); // => true
console.log(set.has("b")); // => false

Setの値を削除する

  • deleteメソッドに渡された値がセットから削除されます。
  • 全ての値を削除するためのclearメソッドがあります。
const set = new Set();
set.add("yano");
set.add("yano2");
console.log(set.size); // => 2
set.delete("yano");
console.log(set.size); // => 1
set.clear();
console.log(set.size); // => 0

セットの反復処理

セットが持つ値を反復処理する例です。

  • setが持つ要素を一つずつresultsに追加しています。
const set = new Set(["やの", "やの2"]);
const results = [];
set.forEach((value) => {
    results.push(value);
});
console.log(results); // => ["やの","やの2"]

セット自身がIteratorオブジェクトのため必要ありませんがMapとの類似性のためにkeys、values、entriesメソッドがあります。(使われることはほぼないでしょう)

const set = new Set(["a", "b"]);
// keysで列挙
const keysResults = [];
for (const value of set.keys()) {
    keysResults.push(value);
}
console.log(keysResults); // => ["a","b"]
// entriesで列挙
const entryResults = [];
for (const entry of set.entries()) {
    // entryは[値, 値]という配列
    entryResults.push(entry);
}
console.log(entryResults); // => [["a","a"], ["b", "b"]]
  • セットはキーを持っていませんがkeysメソッドは存在します。
  • keysメソッドとvaluesメソッドはエイリアスでSetが持つ全ての値を持つIteratorオブジェクトを返します。
  • entriesメソッドはSetにキーとバリューという概念がないにも関わらずentriesメソッドを使うとキーとバリューとして同じ値が出力されます。

Setオブジェクト自身もiterableなオブジェクトのため、反復処理することができます。

const yano = new Set(["touhu", "nattou", "kimuti"]);
const reizouko = [];
for (const meshi of yano) {
  reizouko.push(meshi);
}
console.log(reizouko); // => [ 'touhu', 'nattou', 'kimuti' ]
  • Setがiterableなオブジェクトのためfor...of文をsetに直接使っています。
  • これができるため、先述した3つのメソッドは必要ありません。

WeakSet

特徴

  • オブジェクトしか渡せません。
  • iterableではないので追加した値を反復処理できません。
  • WeakSetは値の追加と削除、存在確認以外のことができません。
  • 同じ要素を省いて保存するため、データの一意性を確認することに特化したセットです。
const set = new WeakSet();

const yuhan = { meshi: "nabe" };

set.add(yuhan);

console.log(set); // => WeakSet { <items unknown> }

結果は出力されませんでしたが、検証ツールでentries内部プロパティの中身を見たら値がありました。

  • WeakSetの用途は循環参照を検出する際に使われるようです。

まとめ

この章ではMapとSetについて学びました。

  • Mapはキーと値の組み合わせからなるコレクションを扱うビルトインオブジェクト
  • Mapのキーはプロトタイプオブジェクトのプロパティと名前が衝突しないため意図しないマッピングを避けられる
  • WeakMapはキーを弱い参照で持つMapと同様のビルトインオブジェクト
  • Setは重複する値がないことを保証した順序を持たないコレクションを扱うビルトインオブジェクト
  • WeakSetは値を弱い参照で持つSetと同様のビルトインオブジェクト

参考

Set - 値の追加と取り出し(JavaScript Primer)