大きなフロントエンドJSの章を理解する[セット]

フロントエンドのエコロジーは広大な海のように非常に大きく、短時間で全体像を見るのは難しいと思います。ここでは他のことは話さず、セットについて話してください。

Setはes6によって提案された新しいオブジェクトであり、データ構造でもあります。なぜes6はそのような新しいオブジェクトを提案するのですか？それはjsのオブジェクトタイプを充実させることに他なりません。特定のビジネスシナリオに遭遇した場合、より適切で適切なデータデータを保存および操作するには、構造が必要です。Setのいくつかの一般的な方法とアプリケーションシナリオをより深く理解しましょう。

まず、Setの重要な機能は、セットに重複要素を追加できないことです。基本型の場合、参照型の場合は===演算子に従って、重複を判断する方法、オブジェクトのポインタが同じ参照オブジェクトを指しているかどうかに応じて、特に興味深いのはNaNです。これは、セットが同じものとして扱いますが、NaN自体は等しくないため、セット内の値はすべて一意です。

Setはコンストラクターであるため、Setを使用するにはnewキーワードを使用する必要があります

作成する2つの方法

空のコレクションを直接作成する
```
const set = new Set()
```
反復可能なインターフェイスを使用して、配列またはその他のデータ構造を渡します
```
const set = new Set([1,2,3,4,5])
const set = new Set('我是字符串，我具有iterable接口哦')
```

Setのインスタンスプロパティとメソッド

操作方法

追加

const s = new Set()
// add 方法返回Set实例本身，所以可以执行链式操作
const ret = s.add(1).add('one').add({1:'one'})

消去

const s = new Set([1,2,3,4,5])
// delete 方法返回被删除元素是否删除成功
const flag = s.delete(1) // true
const flag = s.delete('2') // false

探す

const s = new Set([1,2,4,5,6,7])
const flag = s.has(2)

空

const s = new Set([12,324,1])
//clear 方法没有返回值，返回undefined
s.clear()

2つのインスタンスプロパティ

const s = new Set()
// 实例还有两个属性
s.size //返回当前集合中元素个数
s.constructor // 返回实例构造器，也就是Set

トラバーサル方式

キー名を反復処理します

const s = new Set(['javascript','html','css'])

for(let key of s.keys()){
    console.log(key)
}
//javascript
//html
//css
//遍历顺序就是插入顺序，利用这个特性可以储存一些需要按顺序调用的函数

キーを反復処理します

const s = new Set(['javascript','html','css'])

for(let value of s.values()){
    console.log(value)
}
//Set不存在键名，只有键值，也可以认为键名和键值是同一个，所以keys和values返回的值是一样的

キーと値のペアを反復処理します

const s = new Set(['javascript','html','css'])

for(let entry of s.entries()){
    console.log(entry)
}
//['javascript', 'javascript']
//['html', 'html']
//['css', 'css']
//遍历的每一对都是一个包括键名和键值的数组

forEachは、コールバック関数を使用して各要素を反復処理します

const s = new Set(['javascript','html','css'])
s.forEach(function(value,key,s) {
    // 回调函数接受三个参数，键值，键名，set本身
    console.log(`键值：${value}；键名${key}；集合大小${s.size}；${this.thisName}`)
},{thisName:'改变回调函数this'})
// forEach函数还接受第二个参数，可以绑定处理函数的this

Setインスタンスはデフォルトで反復可能です。これは、そのトラバーサー生成関数が実際にvaluesメソッドを呼び出すためです。つまり、values（）メソッドを省略して、直接トラバースすることができます。
```
const s = new Set(['javascript','html','css'])

for(let value of s){
    console.log(value)
}
```

応用

1.最初にスプレッド演算子（...）を組み合わせて、配列の重複排除を行うことができます

const unique = [...new Set([1,2,3,4,5,1,21,23,5])]
//[1, 2, 3, 4, 5, 21, 23]

2.和集合、共通部分、および差を実装します

const s1 = new Set([1,2,3,4])
const s2 = new Set([2,3,4,5])

//并集 Set(5) {1, 2, 3, 4, 5}
const union = new Set([...s1,...s2])

//交集 Set(3) {2, 3, 4}
const intersect = new Set([...s1].filter(v => s2.has(v)))

//差集
const difference  = new Set([...new Set([...s1].filter(v => !s2.has(v))),...new Set([...s2].filter(v => !s1.has(v)))])

Setの基本的な使い方を最初にここで説明します。何か問題がある場合は、私を訂正してください。

大きなフロントエンドJSの章を理解する[セット]

おすすめ