ES6におけるJavaScriptセットタイプ入門

概要このチュートリアルでは、任意のタイプのユニークな値のコレクションを効果的に管理できるJavaScript Setオブジェクトについて説明します。

JavaScript Setオブジェクトの導入

ES6には、任意のタイプのユニークな値のコレクションを格納する新しいタイプSetが用意されています。新しい空のSetを作成するには、次の構文を使用します

let setObject = new Set();Code language: JavaScript (javascript)

また、Setコンストラクタはオプションの反復可能オブジェクトも受け入れます。Setコンストラクタに反復可能オブジェクトを渡すと、反復可能オブジェクトのすべての要素が新しいセットに追加されます

let setObject = new Set(iterableObject);Code language: JavaScript (javascript)

便利なセットメソッド

Setオブジェクトは、以下の便利なメソッドを提供します

add(value) – セットに指定された値を持つ新しい要素を追加します。Setオブジェクトを返します。そのため、このメソッドを別のSetメソッドとチェーンできます。
clear() – Setオブジェクトからすべての要素を削除します。
delete(value) – 値で指定された要素を削除します。
entries()– [value, value]の配列を含む新しい反復子を返します。
forEach(callback [, thisArg]) – Setの各要素でコールバックを呼び出し、各呼び出しでthis値をthisArgに設定します。
has(value) – 指定された値を持つ要素がセット内にある場合はtrueを返し、ない場合はfalseを返します。
keys() – values()関数と同じです。
[@@iterator] – 挿入順序で格納されたすべての要素の値を含む新しい反復子オブジェクトを返します。

JavaScriptのセット例

配列から新しいセットを作成する

次の例では、配列から新しいSetを作成する方法を示します。

let chars = new Set(['a', 'a', 'b', 'c', 'c']);Code language: JavaScript (javascript)

セット内のすべての要素はユニークである必要があり、そのためcharsには3つの個々の要素a、b、cのみが含まれます。

console.log(chars);Code language: JavaScript (javascript)

出力

Set { 'a', 'b', 'c' }Code language: JavaScript (javascript)

charsにtypeof演算子を使用すると、objectを返します。

console.log(typeof(chars));Code language: JavaScript (javascript)

出力

object

charsセットはSetタイプのインスタンスであるため、次のステートメントはtrueを返します。

let result = chars instanceof Set;
console.log(result);Code language: JavaScript (javascript)

セットのサイズを取得する

セットが保持する要素の数を取得するには、Setオブジェクトのsizeプロパティを使用します。

let size = chars.size;
console.log(size);//  3
Code language: JavaScript (javascript)

セットに要素を追加する

セットに要素を追加するには、add()メソッドを使用します。

chars.add('d');
console.log(chars);Code language: JavaScript (javascript)

出力

Set { 'a', 'b', 'c', 'd' }Code language: JavaScript (javascript)

add()メソッドはチェーン可能であるため、チェーンステートメントを使用してセットに複数のアイテムを追加できます

chars.add('e')
     .add('f');
Code language: JavaScript (javascript)

値がセット内にあるかどうかを確認する

セットに特定の要素があるかどうかを確認するには、has()メソッドを使用します。has()メソッドは、セットに要素が含まれている場合はtrueを返し、それ以外の場合はfalseを返します。charsセットに'a'が含まれているため、次のステートメントはtrueを返します

let exist = chars.has('a');
console.log(exist);// true
Code language: JavaScript (javascript)

以下のステートメントは charsセットに'z'値が含まれていないため、falseを返します。

exist = chars.has('z');
console.log(exist); // falseCode language: JavaScript (javascript)

セットから要素を削除します

セットから指定された要素を削除するには、delete()メソッドを使用します。以下のステートメントは charsセットから'f'値を削除します。

chars.delete('f');
console.log(chars); // Set {"a", "b", "c", "d", "e"}Code language: JavaScript (javascript)

出力

Set { 'a', 'b', 'c', 'd', 'e' }Code language: JavaScript (javascript)

delete()メソッドは、要素が正常に削除されたことを示すtrueを返します。セットのすべての要素を削除するには、clear()メソッドを使用します。

chars.clear();
console.log(chars); // Set{}Code language: JavaScript (javascript)

JavaScript Setの要素をループ

Setオブジェクトは要素の挿入順を維持するため、要素を反復処理すると、要素の順序は挿入順と同じになります。次の例では、次のようにユーザーのロールのセットがあります。

let roles = new Set();
roles.add('admin')
    .add('editor')
    .add('subscriber');
Code language: JavaScript (javascript)

次の例ではfor…ofループを使用して、charsセットを反復処理します。

for (let role of roles) {
    console.log(role);
}Code language: JavaScript (javascript)

出力

admin
editor
subscriber

Setは、Mapのようにkeys(), values(),およびentries()メソッドも提供します。ただし、Setのキーと値は同一です。たとえば

for (let [key, value] of roles.entries()) {
    console.log(key === value);
}Code language: JavaScript (javascript)

出力

true
true
trueCode language: JavaScript (javascript)

セットの各要素でコールバック関数を呼び出す

セットの各要素でコールバックを呼び出す場合は、forEach()メソッドを使用できます。

roles.forEach(role => console.log(role.toUpperCase()));Code language: JavaScript (javascript)

WeakSets

WeakSetはSetに似ていますが、オブジェクトのみが含まれます。WeakSet内のオブジェクトは自動的にガベージコレクションされる可能性があるため、WeakSetにはsizeプロパティがありません。WeakMapのように、WeakSetの要素を反復処理することはできないため、実際の運用ではWeakSetがほとんど使用されていないことがわかります。実際、WeakSetのみを使用して、指定された値がセット内にあるかどうかを確認します。例を次に示します。

let computer = {type: 'laptop'};
let server = {type: 'server'};
let equipment = new WeakSet([computer, server]);

if (equipment.has(server)) {
    console.log('We have a server');
}Code language: JavaScript (javascript)

出力

We have a server

このチュートリアルでは、JavaScriptSetオブジェクトとその要素の操作方法について学習しました。

このチュートリアルは参考になりましたか?