1. セットデータの特徴

SetはArray array と多少似ていますが、Array との違いは、Set の要素を繰り返すことができないことです。

Set の作成方法に関係なく、Set と Array の違いをケースを通して示します。

Set と array にそれぞれ 4 つの要素を追加し、そのうち 10 要素を繰り返します
const set = new Set([10, 10, 12, 14])
console.log(set)

const array = [10, 10, 12, 14]
console.log(array)
Set には異なる値を持つ要素が 3 つしかないのに対し、Array 配列には 4 つの要素があることがわかります。

2.セットの作成と要素の追加

Setコンストラクターを使用して Set を作成する必要があります(文字通り作成する方法はありません)。

最初に空の Set オブジェクトを作成してから、add メソッドを使用して要素を追加できます。

要素を直接追加することもできます。
// 方式一：创建Set对象，使用add方法添加元素

const obj = {name: "aaa"}
const set1 = new Set()
set1.add(10)
set1.add(10)
set1.add(12)
set1.add(14)
set1.add(obj)
console.log(set1)

// 方式二： 直接添加元素

const set2 = new Set([10, 10, 12, 14, {name: "zzz"}])
console.log(set2)
どちらのメソッドも 4 つの要素のセットを作成し、オブジェクトも要素として使用できることがわかります。

3. Set の共通機能に対する配列の重複排除

配列に重複する要素がある場合、 Set を使用すると、重複する要素をすばやく削除できます。もちろん、前述の方法を使用して重複排除することも可能です.最初に重複排除を実現する方法を見てから、Setを使用して重複排除する方法を学びましょう.

3.1. 通常のアレイ重複排除

通常のメソッドを使用して配列内の重複要素を削除する場合、多くのコードは必要ありませんが、少し面倒です。

const array = [10, 10, 12, 12, 12, 15, 17] //有几个重复的元素
const ordinaryArray = []
for(let item of array){
    if(!ordinaryArray.includes(item)){
        ordinaryArray.push(item)
    }
}

console.log(ordinaryArray)
要素を格納するための新しい配列 normalArray を作成します

for...of を使用して配列をトラバースする

配列要素が通常の配列配列に含まれているかどうかを判断し、含まれていない場合は、配列要素を通常の配列配列に入れます

3.2. Set メソッド配列の重複排除

一般的な方法は受け入れられるようで、それほど面倒ではありません。 Set を使用して重複を削除する方法を見てみましょう。

      const array = [10, 10, 12, 12, 12, 15, 17]
      const set = new Set(array)
      const newArray = Array.from(set)
      const newArray1 = [...set]
      console.log(set)
      console.log(newArray)
      console.log(newArray1)
配列をパラメータとして Set オブジェクトを作成する

作成した Set オブジェクトのインスタンスを配列に変換する

Array.from()とスプレッド演算子 (...) の両方でSet を配列に変換できます

4. Set の共通メソッド

セットの一般的なプロパティ:

size: Set 内の要素の数を返します。

一般的に使用されるメソッドを設定します。

add(value): 要素を追加し、Set オブジェクト自体を返します。

delete(value): この値に等しい要素をセットから削除し、ブール型を返します。

has(value): セットに要素があるかどうかを判断し、ブール型を返します。

clear(): セット内のすべての要素をクリアします。戻り値はありません。

forEach(callback, [, thisArg]): forEach を介してセットをトラバースします。

5.WeakSetの使用

セットに似た別のデータ構造は、WeakSet と呼ばれます。これも、内部要素を繰り返すことができないデータ構造です。

セットとの違い

相違点 1: WeakSet に格納できるのはオブジェクト型のみで、基本的なデータ型は格納できません。

違い 2: 要素への WeakSet参照は弱い参照です. オブジェクトへの他の参照がない場合、GC はオブジェクトをリサイクルできます

WeakSet の一般的なメソッド

add(value): 要素を追加し、WeakSet オブジェクト自体を返します。

delete(value): この値に等しい要素を WeakSet から削除し、ブール型を返します。

has(value): WeakSet に要素があるかどうかを判断し、ブール型を返します。

JavaScript での Set の使用