JavaScriptでは文字列や数字の他に、配列やオブジェクトと言った型があります。おそらく利用した経験がある方も多いでしょう。この配列とオブジェクトに対して、より便利な機能を提供するのがSetオブジェクトとMapオブジェクトです。
この記事では配列やオブジェクトとの違いを、コードで解説していきます。
Setオブジェクト
Setオブジェクトは配列(Array)に相当するものだと言えます。
一番大きな違いとして、Setは同じ値が追加できないという点が挙げられます。
もちろん配列の場合は、同じ値も追加できます。
このユニークな値しか追加できないという点がメリットになる場合もあるでしょう。
Setオブジェクトのメソッドは基本的に配列と同じように操作できるものが揃っています。
要素を追加する
要素を追加するのは add
メソッドです。
要素を削除する
delete
メソッドで値を指定して削除できます。
すべて削除して空にする場合には clear
メソッドを使います。
値が存在するか確認する
has
メソッドを使って値の存在を確認します。
イテレーションを使ったループ処理
Setオブジェクトでは for of
を使った各種イテレーションが利用できます。たとえば、以下のようなオブジェクトを定義します。
この時、setだけでイテレーションができます。keys
や values
といったメソッドもありますが、同じデータが返ってきます。
forEach
メソッドも利用できます。
配列への変換
Setオブジェクトから配列にする際には Array.from
を利用します。
Mapオブジェクト
Mapオブジェクトはオブジェクト型に相当するものになります。
初期化する際に2次元配列を渡すことで、データを含めたMapオブジェクトを作成できます。入れ子になっている配列の1つめの値がキー、2つめが値になります。
Mapの特徴としては、キーの型が自由である点が挙げられます。オブジェクト型は文字列またはシンボルしかキーに使えませんが、Mapは関数やオブジェクトなどもキーにできます。
データの追加と取得
データの追加は set
、取得は get
メソッドを使います。キーを使って追加もできますが、正しく動作しなくなるので注意してください。
データの削除
データの削除は delete
メソッドを使って行います。
データをすべて削除する場合は clear
メソッドを使います。
データの数を取得
Mapオブジェクトには size
プロパティが用意されており、簡単にデータの個数を取得できます。オブジェクトの場合は Object.keys
を使っていたでしょう。
キーの存在を確認
指定したキーが存在するかどうかは has
メソッドで確認できます。
イテレーションを使ったループ処理
Mapオブジェクトでは for of
を使った各種イテレーションが利用できます。たとえば、以下のようなオブジェクトを定義します。
この時、mapだけでイテレーションできます。キーと値が配列で取得できます。これは entries
メソッドと同じです。
キーを取得してイテレーションを行う場合には keys
メソッドを使います。
逆に値を使う場合には values
メソッドを使います。
forEach
メソッドも利用できます。
まとめ
SetオブジェクトやMapオブジェクトは配列やオブジェクトで代替が効くケースも多いので、あまり利用されていないかも知れません。しかしfor文よりもforEachなどが使われることが増えている現在、使い方を覚えておくと便利に使える場面も多いでしょう。
ぜひ使いこなしてください。