【JavaScript】Setオブジェクトとは?配列との違いや基本的な操作方法を解説!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年07月01日に投稿されました。)

JavaScriptでただ1つしかない複数のデータを管理するためにSetオブジェクトというものがあります。

Setオブジェクトとは一意性の値の集合を扱うためのデータ構造になります。

一意性の値の集合を扱うため、重複数値を格納しようとすると、読み捨てられるようになります。

そのため、一度格納した値が再び格納されることはなく、常に一意性を保つことができます。

そして、Setオブジェクト同士で和集合や差集合などの集合演算を行うこともできます。

そのため、複数あるデータを一意性のデータとして管理したい場合はSetオブジェクトを使用するようにしましょう。

今回はJavaScriptのSetオブジェクトの使い方について紹介していきます。

この記事はこんな方におすすめ
・一意性のデータを扱いたい人
・一意性のデータで管理したい人

Setオブジェクトとは

Setオブジェクトとは一意性の値の集合を扱うためのデータ構造になります。

値の集合であるため、配列と似ていますが一意性の値の集合を扱うので、重複する値は格納しないオブジェクトになります。

また、ネットで調べると順序を保持しないという内容が出てきますが、こちらはJavaScriptのECMAScript6(ES6)以降の仕様で改善されました。

しかし、それ以前のバージョンだと順序の保持が保証されていませんので注意が必要です。

Setオブジェクトの書き方

Setオブジェクトの書き方は下記のようになります。

定義をした後にnewとSet()を「イコール(=)」で繋ぐことでSetオブジェクトを作成することができます。

そして、作成したSetオブジェクトに対して値を追加していくようになります。

また、下記のようにSetオブジェクトを作成すると同時に値を格納することも可能です。

Setオブジェクトを使用する際の注意点

先ほどまでSetオブジェクトの使い方についてご紹介しましたが、使用する際に注意すべき点があります。

そのためここでは、Setオブジェクトを使用する際の注意点についてご紹介します。

格納する値は一意性である

1つ目は格納する値は一意性であるということです。

冒頭でもいいましたが、Setオブジェクトは一意性の値の集合を扱うためのデータ構造になります。

そのため重複する値は格納されず、読み捨てられるようになります。

⚫︎ Main.js

実行結果

Setオブジェクトに重複する値を追加した結果

Setオブジェクトの中に「12」が2つ格納されていますが、1つだけ表示されています。

値にインデックスが付与されない

2つ目は値にインデックスが付与されないということです。

Setオブジェクトは値にインデックスが付与されません。

その為、変数[0]のようにインデックスを指定して値を操作すると「undefined」が返されます。

⚫︎ Main.js

実行結果

etオブジェクトの値をインデックスで指定して取得した結果

Setオブジェクトに「[1]」を指定していますが、「35」ではなく、「undefined」が表示されています。

オブジェクトの参照による一意性

3つ目はオブジェクトの参照による一意性があるということです。

Setオブジェクトは、値の一意性を保持するためにオブジェクト型の値では参照の比較が行われます。

つまり、参照が同じであるオブジェクトは重複とみなされ、参照が異なるオブジェクトは重複とみなされなくなります。

⚫︎ Main.js

実行結果

Setオブジェクトの値に参照が同じオブジェクトと違うオブジェクトを格納した結果

obj1とobj2は同じオブジェクトですが違う値として認識するため、Setオブジェクトに2つの値が格納されています。

しかし、obj3から参照したobj4は同じ値として認識するため、Setオブジェクトには1つだけ値が格納されています。

Sossy

JavaScriptではオブジェクト型は参照渡しとなります。

NaNは区別されない

4つ目はNaNは区別されないということです。

Setオブジェクトでは、NaNは同じ値として扱われます。

つまり、非数AであるNaNと非数BであるNaNは同じ値と判断され、1つのNaNしか保持されません。

⚫︎ Main.js

実行結果

Setオブジェクトの値に複数のNaNを格納した結果

Setオブジェクトにそれぞれ別の非数を格納していますが、同じ非数であるため「NaN」が一つだけ表示されています。

Setオブジェクトの使い方

ここでは、Setオブジェクトの使い方についてご紹介します。

Setオブジェクトに値を追加

Setオブジェクトに値を追加するには、add()を使用します。

add()とは、オブジェクトに値を追加するメソッドになります。

そのため、値を引数にしてadd()を呼び出すことで、作成したSetオブジェクトに値を追加することができます。

また、add()で重複する値を追加すると、処理は行われますが、読み捨てられるようになります。

⚫︎ Main.js

実行結果

add()でSetオブジェクトに値を追加した結果

add()によってSetオブジェクトに値を追加しています。

そのため、Setオブジェクトに「値1」と「値2」が追加されています。

また、「値1」はすでに追加されているため重複として判断され、表示されていません。

Setオブジェクトの値を削除

Setオブジェクトの値を削除するには、delete()を使用します。

delete()とは、オブジェクトで指定した値を削除するメソッドになります。

そのため、値を引数にしてdelete()を呼び出すことで、指定した値を削除することができます。

⚫︎ Main.js

実行結果

delete()でSetオブジェクトの値を削除した結果

delete()によってSetオブジェクトの値を削除しています。

そのため、格納していた「値3」と「値2」がSetオブジェクトから削除されています。

Setオブジェクトの値の存在確認

Setオブジェクトの値の存在確認を行うには、has()を使用します。

has()とは、オブジェクトで指定した値が存在するかどうかを調べるメソッドになります。

そのため、has()を使用するとSetオブジェクトの値の存在を確認することができます。

値が存在する場合は「true」を返し、値が存在しない場合は「false」を返すようになります。

⚫︎ Main.js

実行結果

has()でSetオブジェクトの値の存在を確認した結果

has()によってSetオブジェクトの値の存在を確認しています。

そのため、「値2」は存在しているため「true」を、「値6」は存在しないため「false」が表示されています。

Setオブジェクトのサイズ取得

Setオブジェクトのサイズするには、sizeを使用します。

sizeとは、オブジェクトに格納されている値の数を数えるプロパティになります。

そのため、sizeを使用するとSetオブジェクトの大きさを取得することができます。

⚫︎ Main.js

実行結果

sizeでSetオブジェクトのサイズ取得した結果

sizeによってSetオブジェクトの大きさを取得しています。

そのため、Setオブジェクトの格納数である「3」と後かから追加され「4」が表示されています。

Setオブジェクトの値を全削除する

Setオブジェクトの値を全削除するには、clear()を使用します。

clear()とは、オブジェクトに格納されている値を全て削除するメソッドになります。

そのため、clear()を使用するとSetオブジェクトに格納されている値を全て削除することができます。

⚫︎ Main.js

実行結果

clear()でSetオブジェクトの値を全削除した結果

clear()によってSetオブジェクトの値を全て削除しています。

そのため、Setオブジェクトの中身が空となっています。

Setオブジェクトの値を全て取得する

Setオブジェクトの値を全て取得する場合はvalues()を使用します。

values()とはオブジェクトに格納されている値を全て取得するメソッドになります。

そのため、Setオブジェクトに使用すると、格納されている値を全て取得します。

⚫︎ Main.js

実行結果

values()でSetオブジェクトの値を全て取得した結果

values()によってSetオブジェクトの値を全て取得しています。

そのため、Setオブジェクトに格納されている「値1」、「値2」、「値3」がすべて表示されています。

Setオブジェクトでは使用できない操作

先ほどまで、Setオブジェクトの使い方についてご紹介しましたが、実はSetオブジェクトでは使用できない操作があります。

そのため、ここではSetオブジェクトでは使用できない操作についてご紹介します。

Setオブジェクトの特定の値を取り出す

Setオブジェクトは特定の値を取り出すことができません。

Setオブジェクトには、値を取り出すメソッドが準備されておらず、また先程も少し説明しましたが、値にインデックスを付与しません。

そのため、Setオブジェクトで値を取り出す場合は反復処理を使用します。

Setオブジェクトの値を更新する

Setオブジェクトは値を更新することができません。

Setオブジェクトは一意性の値を管理するため、一度格納した値を別の値に変更するような操作に対して不向きなオブジェクトです。

また、値を追加するadd()は1つの引数しか指定できないため、「Aの値をBにする」ような操作ができません。

そのため、Setオブジェクトで使用できる操作は「追加」か「削除」のみとなります。

Sossy

一度値を削除し、値を追加すると「更新」の操作はできますが、1回の操作で値を更新することはできません。

Setオブジェクトの反復処理

Setオブジェクトの反復処理についてご紹介します。

ここでは、下記の2つの方法で反復処理を行います。

  1. for-of文を使用する場合
  2. forEach()メソッドを使用する場合

for-ofを使用する場合

for-ofを使用してSetオブジェクトの反復処理を行います。

for-ofとはオブジェクトの値を取り出す文法になります。

そのため、Setオブジェクトにfor-of文を使用することで、値を取り出すことができます。

⚫︎ Main.js

実行結果

for-of文でSetオブジェクトの反復処理を行った結果

for-of文でSetオブジェクトの反復処理を行っています。

そのため、Setオブジェクトに格納されている「値1」、「値2」、「値3」がすべて表示されています。

また、for-ofで多次元のSetオブジェクトの値を取り出す場合は下記のようになります。

⚫︎ Main.js

実行結果

for-of文で多次元のSetオブジェクトの反復処理を行った結果

for-of文を多重にして多次元のSetオブジェクトの反復処理を行っています。

そのため、Setオブジェクトに格納されている「値1」から「値6」まですべて表示されています。

また、for-of文内で取り出した値にインデックスを指定して特定の値を取り出しています。

Sossy

通常のfor文だとインデックスを指定する必要があるため、Setオブジェクトでは取り出すことができません。
そのため、for-of文を使用しています。

forEach()を使用する場合

forEach()を使用してSetオブジェクトの反復処理を行います。

forEach()とはコールバック関数を使用して各値に一度ずつ処理を行うことができるメソッドになります。

そのため、SetオブジェクトにforEach()を使用することで、こちらでも値を取り出すことができます。

⚫︎ Main.js

実行結果

forEach()でSetオブジェクトの反復処理を行った結果

forEach()によってSetオブジェクトの値を全て取得しています。

そのため、Setオブジェクトに格納されている「値1」、「値2」、「値3」がすべて表示されています。

また、forEach()で多次元のSetオブジェクトの値を取り出す場合は下記のようになります。

⚫︎ Main.js

実行結果

forEach()で多次元のSetオブジェクトの反復処理を行った結果

forEach()を多重にして多次元のSetオブジェクトの反復処理を行っています。

そのため、Setオブジェクトに格納されている「値1」から「値6」まですべて表示されています。

また、forEach()内で取り出した値にインデックスを指定して特定の値を取り出しています。

もし、forEach()メソッドについて詳しく知りたい場合は下記の記事をご参考ください。

Set型オブジェクトで集合演算を行う場合

Setオブジェクトには用意されてはいませんが、Setオブジェクト同士で和集合や差集合などの様々な集合演算を行うことができます。

そのため、ここではSetオブジェクトで集合演算を行う方法についてご紹介します。

和集合の演算を行う場合

和集合とは2つの集合をたし合わせた集合となります。

和集合のイメージ図

そのため、Setオブジェクトで和集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで和集合の計算を行った結果

Setオブジェクトの和集合の演算を行っています。

そのため、Setオブジェクトに「12, 34, 56, 78」が表示されています。

差集合の演算を行う場合

差集合とは、ある集合の要素から別の集合の要素を取り除いて作る集合となります。

そのため、Setオブジェクトで差集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで差集合の計算を行った結果

Setオブジェクトで差集合の演算を行っています。

そのため、Setオブジェクトに「12」が追加されています。

積集合の演算を行う場合

積集合とは、2つの集合から共通部分を取り出す集合となります。

そのため、Setオブジェクトで積集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで積集合の計算を行った結果

Setオブジェクトで積集合の演算を行っています。

そのため、Setオブジェクトに「34, 56」が追加されています。

上位集合の演算を行う場合

上位集合とは、片方の集合がもう片方の集合を全て含む集合であり、含んでいるならtrue、含んでいないならfalseを返します。

そのため、Setオブジェクトで上位集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで上位集合の演算を行った結果

Setオブジェクトで上位集合の演算を行っています。

今回はset2がset1の中にすべて含まれているため、「true」が返されています。

部分集合の演算を行う場合

部分集合とは、片方の集合がもう片方の集合の一部を含む集合であり、含んでいるならtrue、含んでいないならfalseを返します。

そのため、Setオブジェクトで部分集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで部分集合の演算を行った結果

Setオブジェクトで部分集合の演算を行っています。

今回はset2の一部がset1の中に含まれているため、「true」が返されています。

対称差集合の演算を行う場合

対称差集合とは、2つの集合の内どちらか片方だけに含まれる要素の集合となります。

そのため、Setオブジェクトで対称差集合の計算を行う場合は下記のようなコードになります。

⚫︎ Main.js

実行結果

Setオブジェクトで対称差集合の計算を行った結果

Setオブジェクトで対称差集合の演算を行っています。

そのため、Setオブジェクトに「12, 78」が追加されています。

Setオブジェクトを使用する実際のケース

Setオブジェクトを使用する実際のケースについてご紹介します。

例えば、Setオブジェクトを使用してパラメータの桁数チェックと属性チェックを行い、エラーのパラメータを一覧で表示するようなコードを作成します。

⚫︎ Main.js

実行結果

Setオブジェクトで桁数チェックと属性チェックを行うコードを作成した結果

Setオブジェクトで桁数チェックと属性チェックでエラーになったパラメータを表示しています。

そのため、エラーになったパラメータを別のSetオブジェクトに格納し、最終的に1つのSetオブジェクトに結合しています。

また、「甲子園(全国高等学校野球選手権大会)」は桁数と属性のどちらともエラーになりますが、Setオブジェクトによって1つにしています。

Setオブジェクトと配列との違い

Setオブジェクトは配列ととてもよく似ていますが、特徴に大きな違いがあります。

そのため、ここでは配列とSetオブジェクトの違いについてご紹介します。

重複する値は管理される

1つ目は重複する値は管理されるということです。

冒頭でも言いましたが、Setオブジェクトは一意な値のみを保持し、重複する要素を自動的に除去します。

それに比べて、配列は>重複した要素を保持することができます。

⚫︎ Main.js

実行結果

Setオブジェクトと配列で重複する値を格納した結果

Setオブジェクトでは「78」は重複するため、2つ目の「78」は表示されていません。

それに比べて、配列は2つ目の「78」も表示されています。

指定した値へのアクセス方法が異なる

2つ目は、指定した値へのアクセス方法が異なるということです。

先ほども説明しましたが、Setオブジェクトは指定した値に直接アクセスする手段がありません。

それに比べて、配列は要素に対して数値のインデックスを使用してアクセスすることができます。

⚫︎ Main.js

実行結果

Setオブジェクトと配列で指定した値へアクセスした結果

Setオブジェクトでインデックスを指定すると「undifined」が表示されています。

それに比べて、配列は1番目の「13」と3番目「100」が表示されています。

Setオブジェクトと配列の相互変換を行う場合

Setオブジェクトは配列と相互変換を行うことができます。

相互変換を行うことでお互いに手間がかかる操作や処理が簡単にできるようになります。

そのため、ここではSetオブジェクトと配列の相互変換を行う方法についてご紹介します。

Setオブジェクトから配列へ変換する場合

Setオブジェクトから配列へ変換する場合はArray.from()を使用します。

Array.from()とは、指定したイテレータをベースに新しい配列を作成することができるメソッドになります。

つまり、Array.from()を使用することでSetオブジェクトから配列へ変換することができるようになります。

⚫︎ Main.js

実行結果

Array.from()でSetオブジェクトから配列へ変換した結果

Array.from()によってSetオブジェクトから配列に変換しています。

そのため、「’値100′, ‘値2’, ‘値3’, ‘値4’, ‘値5’, ‘値2’」が表示されています。

Sossy

重複する値を追加したり、インデックスを指定して値を更新できるため、配列に変換されていることがわかります。

配列からSetオブジェクトへ変換する場合

配列からSetオブジェクトへ変換する場合は、作成した配列をSetオブジェクトとしてインスタンス化します。

⚫︎ Main.js

実行結果

インスタンス化を行って配列からSetオブジェクトへ変換した結果

配列からSetオブジェクトへ変換しています。

そのため、 「’値100′, ‘値2’, ‘値3’, ‘値4’, ‘値5’」が表示されています。

Sossy

重複する値が削除されたり、重複する値を追加しても格納されないため、Setオブジェクトに変換されていることがわかります。

まとめ

⚫︎ Setオブジェクトとは一意性の値の集合を扱うためのデータ構造である

⚫︎ Setオブジェクトを使用する際の注意点として下記の4つがある
・格納する値は一意性である
・値にインデックスが付与されない
・オブジェクトの参照による一意性
・NaNは区別されない

⚫︎ Setオブジェクトに値を追加するには、add()を使用する

⚫︎ Setオブジェクトの値を削除するには、delete()を使用する

⚫︎ Setオブジェクトの値の存在確認を行うには、has()を使用する

⚫︎ Setオブジェクトのサイズするには、sizeを使用する

⚫︎ Setオブジェクトの値を全削除するには、clear()を使用する

⚫︎ Setオブジェクトで値をすべて取得するには、values()を使用する

⚫︎ Setオブジェクトでは下記の操作はできない
・Setオブジェクトの特定の値を取り出す
・Setオブジェクトの値を更新する

⚫︎ Setオブジェクトは下記のメソッドや文法を使用することで反復処理を行うことができる
・for-of文
・forEach()

⚫︎ Setオブジェクトは、Setオブジェクト同士で和集合や差集合などの様々な集合演算を行うことができる
(用意されていないため、メソッドを作成する必要がある)

⚫︎ Setオブジェクトと配列の違いは下記のような内容である
・重複する値は管理される
・指定した値へのアクセス方法が異なる

⚫︎ Setオブジェクトから配列へ変換するには、Array.from()を使用する

⚫︎ 配列からSetオブジェクトへ変換するには、作成した配列をSetオブジェクトとしてインスタンス化する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA