Set (initial support) | Frontend Practical Guide

概要

Set は一意な値のみを格納するコレクションです。重複排除に最適で、has() による存在確認は配列の includes() より高速です。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Set`	38	12	13	8	38	8
`Set.@@iterator` [Symbol.iterator]() は Set インスタンスのメソッドで、反復処理プロトコルを実装しており、 Set オブジェクトを、反復可能オブジェクトを期待するほとんどの構文、例えばスプレッド構文や Statements/for...of ループなどで利用できるようにします。これは、挿入順に集合の値を返す集合イテレーターオブジェクトを返します。	43	12	36	9	43	9
`Set.@@species` Set[Symbol.species] は静的アクセサープロパティで、Set オブジェクトのコピー方法を指定する未使用のアクセサープロパティです。	51	13	41	10	51	10
`Set.Set` Set() コンストラクターは Set オブジェクトを生成します。	38	12	13	8	38	8
`Set.Set.iterable allowed` `新しい Set(反復可能)`	38	12	13	9	38	9
`Set.Set.null allowed` `新しいセット(null)`	38	12	37	9	38	9
`Set.add` add() は Set インスタンスのメソッドで、この集合に同じ値を持つ要素がない場合、指定した値を持つ新しい要素をこの集合に追加します。	38	12	13	8	38	8
`Set.clear` clear() は Set インターフェイスのメソッドで、この集合からすべての要素を取り除きます。	38	12	19	8	38	8
`Set.delete` delete() は Set インターフェイスのメソッドで、指定された値がこの集合にあれば、取り除きます。	38	12	13	8	38	8
`Set.entries` entries() は Set インターフェイスのメソッドで、集合の新しいイテレーターオブジェクトを返します。これは [value, value] の配列の形で集合の各要素を挿入順に返します。 Set オブジェクトは、Map オブジェクトのように key を持つことはありません。しかしながら、Map オブジェクトと似た API をもつために、それぞれの項目は key と value に対して同じ値を持ちます。そのため、配列 [value, value] が返されます。	38	12	24	8	38	8
`Set.forEach` forEach() は Set インターフェイスのメソッドで、指定された関数をこの集合のそれぞれの値に対して一回ずつ、挿入順で実行します。	38	12	25	8	38	8
`Set.has` has() は Set インターフェイスのメソッドで、指定された値をもつ要素がこの集合内に存在するかどうかを示す論理値を返します。	38	12	13	8	38	8
`Set.key equality for zeros` -0 と 0 のキーの等価性	38	12	29	9	38	9
`Set.keys` keys() は Set インターフェイスのメソッドで、 values() メソッドの別名です。	38	12	24	8	38	8
`Set.size` size は Set インスタンスのアクセサープロパティで、この集合内の（固有の）要素の数を返します。	38	12	19	8	38	8
`Set.values` values() は Set インターフェイスのメソッドで、集合の新しいイテレーターオブジェクトを返します。これはこの集合のそれぞれの要素をの値を挿入順に返します。	38	12	24	8	38	8

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const set = new Set([1, 2, 3, 2, 1]);
console.log(set); // Set {1, 2, 3}

set.add(4);
set.has(3);    // true
set.delete(2);
set.size;      // 3

// Removing duplicates from an array
const unique = [...new Set([1, 1, 2, 3, 3])]; // [1, 2, 3]

ライブデモ

Uniqueness and basic methods

See how add(), has(), and delete() behave when duplicate values are inserted.

JavaScript

出力

「実行」ボタンを押してください

Simple set operations

Build intersection, union, and difference with familiar array helpers and Set.has().

JavaScript

出力

「実行」ボタンを押してください

実務での使いどころ

Set (initial support) の活用

一意な値のコレクション。重複を自動的に排除し、存在確認が高速。

注意点

特になし。すべての主要ブラウザで安定して動作する。

参考リンク

MDN Web Docs — Set (initial support)

Powered by web-features

概要