JavaScript セット:整理されたデータのためのフレンドリーなガイド

こんにちは、未来のJavaScript魔法使いたち!今日は、JavaScriptのセットの世界に興味深く飛び込んでみましょう。プログラミングが初めてであれば、心配しないでください。私はあなたの信頼できるガイドとして、ステップバイステップでこのトピックを探求します。このチュートリアルの終わりまでに、プロのようにセットを操作できるようになるでしょう!

JavaScript - Sets

セットとは?

コードに進む前に、まずセットが実際に何かについて話しましょう。想像してほしいのですが、あなたには一色のボールしか入らない特別なボールの袋があります。JavaScriptにおけるセットも、それと同じです。セットはユニークな値だけを含むコレクションです。重複は許されません!

シntax: セットの作成

基本から始めましょう。新しいセットを作成する方法は以下の通りです:

let mySet = new Set();

これで、空のセットを作成しました。でも、最初にいくつかの初期値を持つセットを作成したい場合はどうしますか?問題ありません:

let fruitSet = new Set(['apple', 'banana', 'orange']);

今、あなたには3つの果物を持つセットがあります。念のために、他の 'apple' を追加しようとしても、セットに含まれないことを覚えておいてください。セットはユニークな値だけを保持するからです。

パラメータ:セットに何を入れることができますか?

JavaScriptのセットは非常に柔軟です。以下のようなさまざまなタイプの値を追加できます:

  • 数値
  • 文字列
  • オブジェクト
  • 配列
  • 他のセット!

例を見てみましょう:

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

このコードを実行すると、セットがこれらの異なるタイプの値をすべて含んでいることがわかります。

例:セットで遊ぶ

基本を理解したので、セットで少し遊んでみましょう!

要素の追加と削除

let colorSet = new Set();

// 要素の追加
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // 出力: Set(3) { 'red', 'blue', 'green' }

// 重複を追加しようとする
colorSet.add('red');
console.log(colorSet); // 出力: Set(3) { 'red', 'blue', 'green' }

// 要素の削除
colorSet.delete('blue');
console.log(colorSet); // 出力: Set(2) { 'red', 'green' }

ご覧の通り、再び 'red' を追加しても、セットは変更されません。セットの素晴らしいところは、自動的に重複を処理してくれることです!

要素の確認

セットに特定の値が含まれているかを知りたいですか?has() メソッドを使用します:

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // 出力: true
console.log(animalSet.has('fish')); // 出力: false

セットのサイズ

セットにユニークな要素がいくつあるかを知りたい場合は、size プロパティを使用します:

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // 出力: 5

尽管我们添加了三个5,但集合只计算一次!

数学集合演算

では、数学の帽子をかぶり、集合で行えるいくつかの操作を見てみましょう。

和集合

和集合は、両方の集合からすべてのユニークな要素を保持します:

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // 出力: Set(5) { 1, 2, 3, 4, 5 }

積集合

積集合は、両方の集合に存在する要素だけを保持します:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // 出力: Set(2) { 3, 4 }

差集合

差集合は、第一の集合に存在し、第二の集合に存在しない要素だけを保持します:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // 出力: Set(2) { 1, 2 }

JavaScript セットリファレンス

ここに、私たちが話したすべてのメソッドとプロパティ、そしてさらにいくつかを含む便利なテーブルを示します:

メソッド/プロパティ 説明
new Set() 新しいセットを作成します
add(value) 新しい要素をセットに追加します
delete(value) セットから要素を削除します
has(value) 値がセットに存在する場合に true を返します
clear() セットからすべての要素を削除します
size セットの要素数を返します
forEach(callback) セットの各要素に対して関数を呼び出します
values() セットのすべての値を持つイテレータを返します
keys() values() と同じです
entries() セットの [value, value] ペアを持つイテレータを返します

そして、皆さん!JavaScriptのセットに関するクラスが終了しました。セットは、重複のないデータを整理するのに非常に便利な友達です。セットを作成し、操作を練習し、すぐにでも自然に使用できるようになります。もしかしたら、セットがどこにでも見えるようになるかもしれません – 例えば、ソック drawer で同じソックが一つもないような場所!

codingを続け、好奇心を持ち続け、覚えておいてください:セットの世界では、ユニークであることがゲームの名前です!

Credits: Image by storyset