JavaScript の Set で遊んでみよう

Set で少し遊んでみます。

そもそも Set とは

重複を許さないコレクションのことです。コレクションとはデータの集まりのようなイメージです。

公式のURLは以下です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

重複を許さない、というところが重要です。つまり Set を使うと自動的に以下のようなコレクションはつくれなくなります

[1,1,2]

実際に使ってみる

実際に使ってみましょう。

以下で空のSetが作成されます。

const mySet = new Set();

中のデータみる場合は、以下を実行します。まだ空なので何も出力されないはずです。

mySet.forEach(v => console.log(v));

では、このmySetにデータを入れていきます。add() を使います。

const mySet = new Set();
mySet.add(1);
mySet.forEach(v => console.log(v)); //1

コンソールに1と表示されるはずです。

2も追加してみます。

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.forEach(v => console.log(v)); //1, 2

1,2と出力されると思います。

ちなみに、以下のようにチェーンにして書くこともできます。

const mySet = new Set();
mySet.add(1).add(2);
mySet.forEach(v => console.log(v)); //1, 2

重複させてみる

それでは、わざと同じ値をaddしてみます。

const mySet = new Set();
mySet.add(1).add(2).add(1);
mySet.forEach(v => console.log(v)); //1, 2

1, 2 と出力されます。最後に add されている 1 は無視されていることが分かります。

すべての値をクリアする

すべての値をクリアする場合は、clear() を使います。

const mySet = new Set();
mySet.add(1).add(2);
mySet.clear();
mySet.forEach(v => console.log(v)); // 何も出力されない

上記は何も出力されません。

特定の値があるかをチェックする

Set 内に特定の値があるかをチェックする場合は、has() を使います。

const mySet = new Set();
mySet.add(1).add(2);
console.log(mySet.has(2)); //true
console.log(mySet.has(3)); //false

2はあるので true、 3はないので false になります。

特定の値を削除する

Set から特定の値を削除する場合は、delete() を使います。

const mySet = new Set();
mySet.add(1).add(2);
console.log(mySet.delete(2)); //true (消す対象があるので true)
console.log(mySet.has(2)); //false (2はなくなったので false)

ちなみに、delete で消す対象があった場合は true を返しますが、もし消す対象がない場合は false を返します。

JavaScript, プログラミング入門

Posted by たみぼうず