大前端JS篇之搞懂【Set】

admin · 发表于 2022-2-12 14:35:42

我认为前端生态很大，犹如一片汪洋大海，很难短时间内窥其全貌，在这里我们不谈其他，只聊聊 Set
Set是 es6 新提出的一个对象，也是一种数据结构，为什么es6要提出这样一个新对象呢，无非就是丰富js的对象类型，在遇到具体的业务场景需要一个比较适合的恰当的数据结构来保存和操作数据，接下来就让我们更深刻的认识下Set的一些常用的方法和应用场景
首先 Set的一个重要特性就是集合中是不允许添加重复元素的，如何判断重复，如果是基本类型的话根据===操作符，如果是引用类型的话是根据对象的指针是否指向同一个引用对象，特别有意思的是NaN，Set是把它作为相同对待的，尽管NaN本身是不相等的，所以Set中的值都是唯一的
Set是一个构造函数，所以我们使用Set必须使用new关键字
两种方法创建
<ul>
<li> 直接创建一个空的集合 
<pre class="language-javascript"><code>const set = new Set()</code></pre>
</li>
<li>传入一个数组或者具有iterable接口的其他数据结构 
<pre class="language-javascript"><code>const set = new Set([1,2,3,4,5])
const set = new Set('我是字符串，我具有iterable接口哦')</code></pre>
</li>
</ul>
Set 的实例属性和方法
<ol style="list-style-type: upper-roman">
<li>操作方法
<ol>
<li>添加
<pre class="language-javascript"><code>const s = new Set()
// add 方法返回Set实例本身，所以可以执行链式操作
const ret = s.add(1).add('one').add({1:'one'})</code></pre>
</li>
<li>删除
<pre class="language-javascript"><code>const s = new Set([1,2,3,4,5])
// delete 方法返回被删除元素是否删除成功
const flag = s.delete(1) // true
const flag = s.delete('2') // false</code></pre>
</li>
<li>查找
<pre class="language-javascript"><code>const s = new Set([1,2,4,5,6,7])
const flag = s.has(2)</code></pre>
</li>
<li>清空
<pre class="language-javascript"><code>const s = new Set([12,324,1])
//clear 方法没有返回值，返回undefined
s.clear()</code></pre>
</li>
<li>两个实例属性 
<pre class="language-javascript"><code>const s = new Set()
// 实例还有两个属性
s.size //返回当前集合中元素个数
s.constructor // 返回实例构造器，也就是Set</code></pre>
 
</li>
</ol>
</li>
<li>遍历方法</li>
</ol>
<ol>
<li style="list-style-type: none">
<ol>
<li>遍历键名
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])

for(let key of s.keys()){
console.log(key)
}
//javascript
//html
//css
//遍历顺序就是插入顺序，利用这个特性可以储存一些需要按顺序调用的函数</code></pre>
</li>
<li>遍历键值
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])

for(let value of s.values()){
console.log(value)
}
//Set不存在键名，只有键值，也可以认为键名和键值是同一个，所以keys和values返回的值是一样的</code></pre>
</li>
<li>遍历键值对
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])

for(let entry of s.entries()){
console.log(entry)
}
//['javascript', 'javascript']
//['html', 'html']
//['css', 'css']
//遍历的每一对都是一个包括键名和键值的数组</code></pre>
</li>
<li>forEach 使用回调函数遍历每一个元素
<pre class="language-javascript"><code>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</code></pre>
</li>
<li>Set实例默认是可以迭代的，因为它的遍历器生成函数其实调用的就是values方法，这意味着我们可以直接省略values()方法直接遍历
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])

for(let value of s){
console.log(value)
}</code></pre>
 
</li>
</ol>
</li>
</ol>
应用
1、我们首先可以结合扩展操作符（...）给数组去重
<pre class="language-javascript"><code>const unique = [...new Set([1,2,3,4,5,1,21,23,5])]
//[1, 2, 3, 4, 5, 21, 23]</code></pre>
2、实现并集，交集，差集
<pre class="language-javascript"><code>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)))])</code></pre>
 
Set 基本的用法就先讲到这里，有不对的地方欢迎大家指正

		自动登录	找回密码
密码			立即注册

大前端JS篇之搞懂【Set】

浏览过的版块