Understand the big front-end JS chapter [Set]

I think the front-end ecology is very large, like a vast ocean, and it is difficult to see the whole picture in a short time. Here we will not talk about other things, just talk about Set

Set is a new object proposed by es6, and it is also a data structure. Why does es6 propose such a new object? It is nothing more than enriching the object types of js. When encountering specific business scenarios, a more suitable and appropriate data structure is needed to To save and manipulate data, let's have a deeper understanding of some common methods and application scenarios of Set

First of all, an important feature of Set is that it is not allowed to add duplicate elements in the set. How to judge the duplicate, if it is a basic type, according to the === operator, if it is a reference type, according to whether the pointer of the object points to the same reference object, Of particular interest is NaN, which Set treats as the same, although NaN itself is not equal, so the values in the Set are all unique

Set is a constructor, so we must use the new keyword to use Set

Two ways to create

Create an empty collection directly
```
const set = new Set()
```

Pass in an array or other data structure with an iterable interface

const set = new Set([1,2,3,4,5])
const set = new Set('我是字符串，我具有iterable接口哦')

Instance properties and methods of Set

How to operate

Add to

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

delete

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

find

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

empty

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

two instance properties

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

traversal method

iterate over key names

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

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

iterate over keys

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

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

Iterate over key-value pairs

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

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

forEach uses a callback function to iterate over each element

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

The Set instance is iterable by default, because its traverser generation function actually calls the values method, which means that we can omit the values() method and traverse directly
```
const s = new Set(['javascript','html','css'])

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

application

1. We can first combine the spread operator (...) to deduplicate the array

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

2. Implement union, intersection, and difference

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)))])

The basic usage of Set will be discussed here first. If there is something wrong, you are welcome to correct me

Understand the big front-end JS chapter [Set]

Guess you like