JavaScriptセット：初心者向けガイド

JavaScriptでセットを使用する方法

一意の値のみを含める必要があるデータのリストはありますか？これは、JavaScriptSetデータ型が本当に優れているところです。これは、一意の値のコレクションを作成できる新しいタイプのオブジェクトです。セット内での重複は許可されていません。

このガイドでは、セットとは何か、どのように機能するか、いつ役立つかについて説明します。 JavaScriptで使用可能な各Setメソッドの例をいくつか見ていきます。

セットとは

セットは、重複を含めることができない値のセットです。このデータ型はECMAScript6で導入されました。特に、セットは他の多くのプログラミング言語の機能です。

リストを使用すると、複数の値を保存できるので便利です。リストは重複する値の保存をサポートします。これは、無数のシナリオで役立ちます。

たとえば、喫茶店で行われた注文のリストを保存する場合は、重複する値を保存できる必要があります。 2人のお客様が同じ飲み物を注文できます。

一意の値のみをリストに保存したい場合があります。ここで、Setオブジェクトを使用します。セット内の値は1回だけ表示できます。

JavaScriptでは、セットは他のオブジェクトと同じように宣言されます。地元の喫茶店で顧客から報告されたお気に入りのケーキのリストを保存するセットを作成しましょう：

let cakes = new Set();
console.log(cakes)

コードは次のようになります：Set [] 。セットを作成しました。コードの出力からわかるように、現時点では値はありません。次で追加します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

デフォルト値でセットを初期化する

セットは、配列、文​​字列、または別の反復可能オブジェクトから初期化できます。これは、セットに手動で値を追加する必要がないことを意味するため、便利です。あなたは既存のものから働くことができます。

次のリストを検討してください：

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];

これらの値は現在、配列に格納されています。それらをSetに変換するために、新しいSetオブジェクトを作成するときに配列を渡すことができます。

let cakes = new Set(cake_list);
console.log(cakes)

コードは次のようになります：

Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

セットへの値の追加

Setオブジェクトには、add()というメソッドが付属しています。 これにより、アイテムをセットに簡単に追加できます。セットにアイテムを追加するために使用されるメソッドの名前は、覚えやすいです：add() 。

地元のパン屋で販売されているケーキのリストに「ボストンクリームパイ」を追加したいとします。 add()を使用してみましょう この値を追加する方法：

cakes.add("Boston Cream Pie");
console.log(cakes);

私たちのコードは次を返します：

Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

これで、セットに4つのオブジェクトが含まれます。すでにセットにあるアイテムを追加しようとしても、そのアイテムは追加されません。セットは重複する値を格納できません。

セットに値が存在するかどうかの確認

「ボストンクリームパイ」がケーキのリストに含まれているかどうかを確認する必要があります。これはケーキのリストに新しく追加されたものであり、パン屋は追加したことを再確認したいと考えています。

ここでhas() メソッドが入ります。has() メソッドを使用すると、セットがあるかどうかを確認できます。 特定の値。繰り返しになりますが、メソッドには覚えやすい名前が付いています。

次のコードを検討してください：

var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie);

コードは次を返します：true 。 has() メソッドは、セットに特定の値が含まれているかどうかに応じて、ブール値（trueまたはfalse）を返します。このメソッドはincludes()に似ています 配列で使用しますが、has() セットでのみ機能します。

セットからの値の削除

パン屋は、イチゴのチーズケーキをパン屋で提供しないことを決定しました。いちごのチーズケーキは他のケーキよりも作るのに時間がかかり、あまり人気がありませんでした。

適切な名前のdelete()を使用して、セットから値を削除できます。 方法。セットから「ストロベリーチーズケーキ」の値を削除しましょう：

cakes.delete("Strawberry Cheesecake");
console.log(cakes);

コードは次のようになります：

Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

いちごのチーズケーキがセットから削除されました。

clear()を使用して、セットからすべての値を削除できます メソッド。

セットを反復処理する

リストと同様に、セットは反復可能なオブジェクトです。あなたはそれが何を意味するかを知っています：あなたはそれらを繰り返すことができます。

for-eachループを使用して、ケーキセットを反復処理します。 for-eachループは、リスト内のすべてのアイテム（リスト内のアイテムごと）を調べて、コンソールに出力します。

cakes.forEach(cake => {
	console.log(cake);
}

コードは、セット内の各値をコンソールに出力するイテレータを返します。

Lemon Cake
Carrot Cake
Boston Cream Pie

とても簡単です！ for-ofループを使用することもできます：

for (let cake of cakes) {
	console.log(cake);
}

このコードは、forEachと同じ出力を返します ループ：

Lemon Cake
Carrot Cake
Boston Cream Pie

forループを使用してセットを反復処理することもできますが、セットは反復可能なオブジェクトであるため、for-eachまたはfor-ofループを使用する方が簡単です。

セットを使用した重複値の削除

セットを配列で初期化すると、重複する値はすべて自動的に削除されます。これは非常に便利な機能です。

ケーキの注文が多数含まれているリストがあるとします。

var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];

このセットには、パン屋に注文されたすべてのケーキが含まれています。合計で8つの値があります。 2つの値が重複しています。

パン屋が、注文されたさまざまな種類のケーキを知りたいので、キッチンの準備を始めることができます。セットをリストに変換することでこれを見つけることができます：

var unique_cakes = new Set(cakes);
console.log(unique_cakes);

コードは次のようになります：

Set(6) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

私たちのリストは6つの値に削減されました。これらはすべて、注文リストの一意の値です。残りのステップがあります。

標準のリストメソッドを使用してケーキを操作できるように、ケーキのセットをリストに戻す必要があります。 Array.from()を使用してこれを行うことができます 方法：

let final_cakes = Array.from(unique_cakes);
console.log(final_cakes);

コードは次のようになります：

[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

このコードの出力はSetに似ていますが、大きな違いが1つあります。それは、データが配列として格納されるようになったことです。これは、すべての組み込みJavaScript配列メソッドを使用して対話できることを意味します。

結論

Setオブジェクトを使用すると、一意の値のみを含むことができるアイテムのリストを格納できます。セットは、リストや文字列などの既存の反復可能なオブジェクトから初期化できます。

Setオブジェクトは重複する値を削除するため、配列から重複する値を削除する方法として使用できます。次に、完了したら、セットを配列に戻すことができます。

これで、プロのようにJavaScriptでセットを使い始める準備ができました！