TypeScript で Set を配列に変換する方法：3 つの簡単な方法

TypeScript で Set を配列に変換する方法

スプレッド構文を使う

スプレッド構文は、イテレータブルなオブジェクトを要素として展開する構文です。 Set もイテレータブルオブジェクトなので、スプレッド構文を使って配列に変換することができます。

const mySet = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = [...mySet];
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

このコードでは、まず new Set() を使って Set オブジェクト mySet を作成します。次に、スプレッド構文 [...] を使って mySet を展開し、その結果を arrayFromSet という変数に代入しています。最後に、console.log() で arrayFromSet の内容を出力しています。

Array.from() 関数を使う

Array.from() 関数は、イテレータブルなオブジェクトを配列に変換する関数です。 Set もイテレータブルオブジェクトなので、Array.from() 関数を使って配列に変換することができます。

const mySet = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = Array.from(mySet);
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

このコードは、上記のコードとほぼ同じことをしています。唯一の違いは、スプレッド構文ではなく Array.from() 関数を使っていることです。

どちらの方法を使うべきか？

どちらの方法を使うべきかは、状況によって異なります。

• コードが簡潔で分かりやすいことを重視する場合は、スプレッド構文を使うのがおすすめです。
• 汎用性のあるコードを書くことを重視する場合は、Array.from() 関数を使うのがおすすめです。

• Set から変換される配列は、挿入順序ではなく要素の値に基づいた順序になります。
• 重複する要素は、変換された配列にも 1 つだけ含まれます。

// サンプルコード

// Set を作成
const mySet = new Set([1, 2, 3, 4, 5, 2, 3]);

// スプレッド構文を使って配列に変換
const arrayFromSet1 = [...mySet];
console.log(arrayFromSet1); // [1, 2, 3, 4, 5]

// Array.from() 関数を使って配列に変換
const arrayFromSet2 = Array.from(mySet);
console.log(arrayFromSet2); // [1, 2, 3, 4, 5]

// forEach() 関数を使って配列に変換
const arrayFromSet3 = [];
mySet.forEach(element => arrayFromSet3.push(element));
console.log(arrayFromSet3); // [1, 2, 3, 4, 5]

1. スプレッド構文
2. forEach() 関数

それぞれの方法の詳細については、上記の解説をご覧ください。

• 配列の順序は、Set から変換された順序とは異なります。これは、Set は挿入順序ではなく要素の値に基づいた順序で要素を保持するためです。

Array.prototype.slice() 関数を使う

Array.prototype.slice() 関数は、配列の一部を切り取る関数です。この関数を Set のイテレータを使って、Set のすべての要素を含む新しい配列を作成することができます。

const mySet = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = Array.prototype.slice.call(mySet);
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

このコードは、まず Array.prototype.slice を call() メソッドを使って mySet に適用します。call() メソッドは、関数の this コンテキストを指定して関数を呼び出すためのものです。この場合、this コンテキストは mySet になり、slice 関数は mySet のすべての要素を含む新しい配列を返します。

reduce() 関数を使う

const mySet = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = Array.from(mySet.reduce((acc, value) => acc.concat(value), []));
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

このコードは、まず mySet のイテレータを reduce() 関数に渡します。reduce() 関数は、引数として 2 つの値を受け取ります。1 つ目の値は、累積値です。2 つ目の値は、現在の要素です。このコードでは、累積値として空の配列 [] を使用し、現在の要素を concat() メソッドを使って累積値に追加しています。reduce() 関数は、イテレータのすべての要素が処理された後に、累積値を返します。

フォーループを使う

フォーループを使って、Set のすべての要素を新しい配列にプッシュすることもできます。

const mySet = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = [];
for (const value of mySet) {
  arrayFromSet.push(value);
}
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

このコードは、まず空の配列 arrayFromSet を作成します。次に、for...of ループを使って mySet のすべての要素をイテレートします。ループの各イテレーションで、現在の要素を push() メソッドを使って arrayFromSet に追加します。

TypeScript で Set を配列に変換するには、さまざまな方法があります。どの方法を使うべきかは、状況によって異なります。

• 上記の例では、Set に含まれる要素の型はすべて同じであることを前提としています。要素の型が異なる場合は、コードを少し変更する必要があります。