JavaScript Setを使用するサンプル

JavaScriptのSetを使用するサンプルです。

確認環境
・Google Chrome

仕組み	Setオブジェクト
	for文のループで要素を取得する
	要素を順番に処理する(forEach文)
	値が存在するか確認する(has)
	要素数を取得する(size)
更新する	要素を追加する(add)
	要素を削除する(delete)
	すべての要素を削除する(clear)

Setオブジェクト

変数 = new Set (値, ... ]);

ひとつの変数に複数の値を設定できます。
値の重複は不可です。代入しようとしても追加されません。
→ユニークな値のみになります。Setの特徴です。
ECMAScript 2015(ES6)で導入されました。
以下は、MDNのSetのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

for文のループで要素を取得する

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  for (let c1 of color1) {
  //for (let c1 of color1.values()) {
    console.log(c1); //赤 黄 青
  }
</script>

3行目は、for～of文でループさせて値を取得しています。
4行目も3行目と同じ結果になります。

要素を順番に処理する(forEach文)

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  color1.forEach(function (a) {
    console.log(a); //赤 黄 青が出力される
  });
</script>

3行目は、forEach文で値を取得しています。

値が存在するか確認する(has)

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  console.log(color1.has("黄")); //true
  console.log(color1.has("オレンジ")); //false
</script>

3行目は、hasメソッドで存在を確認しています。存在するのでtrueです。
4行目も、hasメソッドで確認していますが、存在しないのでfalseです。

要素数を取得する(size)

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  console.log(color1.size); // 3が出力される
</script>

要素を追加する(add)

<script>
  const color1 = new Set();
  color1.add("赤");
  console.log(color1); //{"赤"}
  color1.add("赤");
  console.log(color1); //{"赤"}
</script>

2行目は、セットを作成しています。
3行目は、addメソッドで値を追加しています。
5行目は、同じ値を追加しようとしていますが追加されません。

要素を削除する(delete)

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  color1.delete("黄");
  console.log(color1); //{"赤", "青"}
</script>

3行目は、値を削除しています。

すべての要素を削除する(clear)

<script>
  const color1 = new Set(["赤", "黄", "青"]);
  color1.clear();
  console.log(color1); // Set(0) {} 　空のSet
</script>

3行目は、clearメソッドですべての要素を削除しています。