JavaScript Setを使用するサンプル

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

確認環境
・Google Chrome

目次

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

Setオブジェクト

変数 = new 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メソッドですべての要素を削除しています。

関連の記事

JavaScript for...in文とfor...of文のサンプル
JavaScript Mapを使用するサンプル

△上に戻る