Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

Set対応: ES6（ECMAScript 2015）

一意な値のみを格納するコレクションです。同じ値を重複して追加することはできず、挿入順序が保持されます。

構文

// 新しいSetを作成します。
var set = new Set();

// 初期値を配列で指定して作成することもできます。
var set = new Set(["値1", "値2", "値3"]);

メソッド・プロパティ一覧

メソッド / プロパティ	概要
add(値)	値を追加します。すでに同じ値が存在する場合は無視され、重複しません。
has(値)	指定した値が存在するかどうかを『true』または『false』で返します。
delete(値)	指定した値を削除します。削除に成功した場合は『true』、値が存在しなかった場合は『false』を返します。
clear()	すべての値を削除します。
size	格納されている値の数を返します。
forEach(関数)	すべての値に対して関数を実行します。

サンプルコード

// Setの基本操作
var colorSet = new Set();

// 値を追加します。
colorSet.add("赤");
colorSet.add("青");
colorSet.add("緑");
colorSet.add("赤"); // すでに存在するため追加されません。

console.log(colorSet.size); // 『3』と出力されます。重複は無視されます。

// 値の存在を確認します。
console.log(colorSet.has("青")); // 『true』と出力されます。
console.log(colorSet.has("黄")); // 『false』と出力されます。

// すべての値を順番に処理します。
colorSet.forEach(function(value) {
	console.log(value);
});

// 値を削除します。
colorSet.delete("緑");
console.log(colorSet.size); // 『2』と出力されます。

// 配列の重複を除去する例
var numbers = [1, 2, 3, 2, 1, 4, 3, 5];
var uniqueNumbers = new Set(numbers);
var result = Array.from(uniqueNumbers); // Setを配列に変換します。
console.log(result); // 『[1, 2, 3, 4, 5]』と出力されます。

// スプレッド構文を使った短い書き方
var unique = [...new Set([1, 2, 3, 2, 1])];
console.log(unique); // 『[1, 2, 3]』と出力されます。

実行結果

上記のコードを実行すると、コンソールには以下のように出力されます。

3
true
false
"赤"
"青"
"緑"
2
[1, 2, 3, 4, 5]
[1, 2, 3]

SetとMapの違い

特徴	Set	Map
格納するもの	値のみを格納します。	キーと値のペアを格納します。
重複	同じ値は1つしか格納されません。	同じキーは1つしか格納されませんが、値は重複可能です。
主な用途	一意なリストの管理、重複の除去に使用します。	キーで値を検索する辞書的な用途に使用します。

概要

『Set』は一意な値のみを格納するコレクションで、ES6で追加されたデータ構造です。配列と異なり同じ値を重複して格納できないため、配列の重複除去や、値の存在確認を高速に行いたい場面に最適です。

最もよく使われるパターンは配列の重複除去です。『new Set(配列)』で重複を除去し、『Array.from()』やスプレッド構文で配列に戻すことで、簡潔に重複なしの配列を作成できます。

キーと値のペアで管理したい場合は『Map』を使用してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス