飞雪团队

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 9499|回复: 0

大前端JS篇之搞懂【Set】

[复制链接]

6952

主题

7040

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
23186
发表于 2022-2-12 14:35:42 | 显示全部楼层 |阅读模式
7 Y' x$ ~4 }2 b, @3 ?; A
<p><span style="background-color: rgba(194, 224, 244, 1)"><span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">我认为前端生态很大,犹如一片汪洋大海,很难短时间内窥其全貌,在这里我们不谈其他,只聊聊</span> <span style="color: rgba(255, 255, 255, 1)">Set</span></span></span></p>
; V1 n5 W+ k: _; D$ ~9 V% Z<p><span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>是 es6 新提出的一个对象,也是一种数据结构,为什么es6要提出这样一个新对象呢,无非就是丰富js的对象类型,在遇到具体的业务场景需要一个比较适合的恰当的数据结构来保存和操作数据,接下来就让我们更深刻的认识下<span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>的一些常用的方法和应用场景</p>6 [: {. H" W& H5 \8 o
<p>首先 <span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>的一个重要特性就是集合中是不允许添加重复元素的,如何判断重复,如果是基本类型的话根据===操作符,如果是引用类型的话是根据对象的指针是否指向同一个引用对象,特别有意思的是NaN,<span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>是把它作为相同对待的,尽管NaN本身是不相等的,所以<span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>中的值都是唯一的</p>
0 }/ X6 A5 Q, [: o- b2 M/ d<p><span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>是一个构造函数,所以我们使用<span style="background-color: rgba(52, 73, 94, 1)"><span style="color: rgba(255, 255, 255, 1)">Set</span></span>必须使用new关键字</p>4 w- N5 U1 _" w6 D5 P, j
<p>两种方法创建</p>* T3 ]1 }/ W( o: M
<ul>
! S9 G- |% u' l+ ^+ |7 ~: z0 `<li>&nbsp;直接创建一个空的集合&nbsp;
, H( ]. W5 h7 o6 v$ J/ f" \9 B8 z<pre class="language-javascript"><code>const set = new Set()</code></pre>3 s6 |- Z+ C0 x% r' Q
</li>
6 w  H4 s" N0 ?- c<li>传入一个数组或者具有iterable接口的其他数据结构&nbsp;# E* T  P  D* ^0 O1 V; W
<pre class="language-javascript"><code>const set = new Set([1,2,3,4,5])5 s" A+ J4 A# L6 j2 f+ `0 X
const set = new Set('我是字符串,我具有iterable接口哦')</code></pre>+ j  m& X1 |+ }% c4 u, ?
</li>) K( k0 O2 ~+ R( }
</ul>
/ F5 _- ^0 f* M<p><strong>Set 的实例属性和方法</strong></p># Y- e3 B3 B4 y
<ol style="list-style-type: upper-roman">! i. A3 _9 q# q2 f* W
<li>操作方法
- f' V# C& z4 S3 V3 P( [* Y9 @+ Z<ol>, e6 j8 A7 ?4 u, T" f
<li>添加$ r# e- @1 D/ v
<pre class="language-javascript"><code>const s = new Set()+ f5 p  ]/ b8 m$ i- {
// add 方法返回Set实例本身,所以可以执行链式操作7 A1 f4 P; k5 x
const ret = s.add(1).add('one').add({1:'one'})</code></pre>+ ?+ Q4 O9 C4 b6 g! `
</li>
  Y& v4 q0 n1 n$ F  b9 B<li>删除
" Q  N8 A+ y; w6 c4 Z; x9 g<pre class="language-javascript"><code>const s = new Set([1,2,3,4,5])1 |5 z" Q7 P' c1 o3 |  B8 {7 S
// delete 方法返回被删除元素是否删除成功0 K! |1 p: Y, D+ W) A- e
const flag = s.delete(1) // true
- j1 d- |  o+ `) p+ C' Z. \- [const flag = s.delete('2') // false</code></pre>
, x$ ]: }" o9 x3 _  N) L</li>) ?/ V' N$ D+ \: J$ r
<li>查找
7 w+ E! ^6 X' c# G<pre class="language-javascript"><code>const s = new Set([1,2,4,5,6,7])+ i& S5 R8 {, w2 I. @, ^. H
const flag = s.has(2)</code></pre>
" ~7 H1 a; `5 h3 f  ?</li>
% q) F0 }* G9 q1 g<li>清空9 }: V- D+ i7 M  t- `; N* X- t
<pre class="language-javascript"><code>const s = new Set([12,324,1])
# H4 g' e  O8 V2 M  [# r0 p2 u. s; N//clear 方法没有返回值,返回undefined6 g6 K2 S; v/ P! ]+ k; ?, F
s.clear()</code></pre>7 o: s, \1 w9 x% D: B
</li>9 w/ y+ U" C( b* E0 O" z: [% d% O
<li>两个实例属性<br>
- y2 W5 x5 u9 x# K0 z<pre class="language-javascript"><code>const s = new Set()8 b/ a, _6 @6 j
// 实例还有两个属性
/ [  m  u% f# W# c( y3 C4 es.size //返回当前集合中元素个数
* c7 A" h* @2 r* T  ws.constructor // 返回实例构造器,也就是Set</code></pre>* b4 s% M; s' ^5 k! L
<p>&nbsp;</p>
% Y1 ?( e3 i3 [, T</li>; F/ }" l& \/ j( |
</ol>
" N1 I  w- V$ W' e</li>
9 s+ i6 P, I+ O5 b1 |& l<li>遍历方法</li>. R/ O& {* y/ C% \7 Y& M/ W1 S
</ol>7 k8 d2 f( q; f4 H( S6 G
<ol>' ~' F2 S# o: a  f2 _( g/ G; r7 r
<li style="list-style-type: none">
: C2 a' F  `! b% F9 K4 |$ z<ol>+ C1 d6 B' y7 {# ?2 k
<li>遍历键名# D7 J9 Q! d7 k9 @! I$ j- m2 Y
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])
9 M3 a' ~; h& m, H
; k9 s1 G- P1 o0 g* J1 |for(let key of s.keys()){2 W/ T( X% O7 U0 @0 M
    console.log(key)
# U* U( ?, @$ V  L0 P( E2 j8 C}
& G* M0 ^' r7 _3 c7 n//javascript5 f5 t+ O: T! J0 Z8 c8 `. x
//html
2 x5 {6 t6 t% c) K: E8 z//css
2 d! p/ Z  {) W1 [' y8 |//遍历顺序就是插入顺序,利用这个特性可以储存一些需要按顺序调用的函数</code></pre>
& m9 V/ }$ @8 q& e! @9 Z4 `</li>
5 w" l' ^. C0 \0 Y9 H, j2 E<li>遍历键值
8 l* X' @$ t3 x7 }& e' z<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])
! `6 Q) `; I! b& L6 n5 Y
/ D% z3 n9 F" m! a8 ]/ g: Ffor(let value of s.values()){
5 D1 J9 i! m0 W3 |7 j' Y, L    console.log(value)# a# l" i4 D- [  r
}+ l1 L1 |4 v3 N5 x, X4 G! p& v
//Set不存在键名,只有键值,也可以认为键名和键值是同一个,所以keys和values返回的值是一样的</code></pre>* y! a- G9 v! _8 Y- |
</li>
) G: D; y. y# O( G0 u& s<li>遍历键值对
  F9 T# x% j& K! K- z+ ~<pre class="language-javascript"><code>const s = new Set(['javascript','html','css']), Q' \, I$ C( q3 e; _# D

! n8 v5 j% S+ Q% w# m4 F3 B, Nfor(let entry of s.entries()){
5 z* Q7 b7 I1 |( W5 T  ]    console.log(entry)* P8 d, @8 n/ j9 [/ T
}
, m  @5 a3 Y8 q. p9 ^. I5 d//['javascript', 'javascript']0 E* `+ @. z" I
//['html', 'html']
; ^0 ]( y, B: T% l- T, e, Z( s: W//['css', 'css']
/ Z1 q: }. i! t//遍历的每一对都是一个包括键名和键值的数组</code></pre>& `9 g# ]' B( X. G
</li>
5 r; Y9 T  m5 e7 ?<li>forEach 使用回调函数遍历每一个元素$ d  W; I0 A( [# [1 R8 X2 F
<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])
- j8 H' {# \2 T" T3 O8 e$ _s.forEach(function(value,key,s) {7 B  c, c3 I2 w7 ]" w% c7 g
    // 回调函数接受三个参数,键值,键名,set本身% U- v, w$ I1 B
    console.log(`键值:${value};键名${key};集合大小${s.size};${this.thisName}`)6 j& T% k- R1 I2 E: ]+ @/ k' D
},{thisName:'改变回调函数this'})
, Q1 P: M8 q3 g8 }5 z( H" p" Y) V// forEach函数还接受第二个参数,可以绑定处理函数的this</code></pre>$ c1 Z8 j9 G' A! w1 X+ n
</li>
$ B4 L( m; X9 P" I<li>Set实例默认是可以迭代的,因为它的遍历器生成函数其实调用的就是values方法,这意味着我们可以直接省略values()方法直接遍历
! r3 K: c6 h4 C<pre class="language-javascript"><code>const s = new Set(['javascript','html','css'])
7 J5 l! n/ }. E8 W) v+ E8 n: S
& I. ~4 @: Q: Y' Z9 tfor(let value of s){( [5 G( R; g& e) X- I6 E! C8 ~
    console.log(value)
; {! c$ h4 c8 l% U2 T}</code></pre>
2 }" S" ~  x, c7 c/ S) F" i  m) T<p>&nbsp;</p>
4 J6 Q4 j9 _+ y( u</li>
  L# t% `. Y4 K6 ^1 z% ]0 e</ol>9 ^% ?$ c! }5 `6 z4 @
</li>
- M7 y1 O3 H) P6 I4 |</ol># i# [: \, e; v* L- a5 T* @% M% A3 |
<p><strong>应用</strong></p>
+ z) G) \. @" W( _<p>1、我们首先可以结合扩展操作符(...)给数组去重</p>+ m. \4 U/ `# D8 Z" D5 d+ Q
<pre class="language-javascript"><code>const unique = [...new Set([1,2,3,4,5,1,21,23,5])]
; C0 g" s4 l9 ]4 {6 `  V4 l1 i: a//[1, 2, 3, 4, 5, 21, 23]</code></pre>9 _) O. y* w5 W
<p>2、实现并集,交集,差集</p>
& l; `2 J) p! m7 Q5 Q<pre class="language-javascript"><code>const s1 = new Set([1,2,3,4])
, L" A2 s' O. }5 M+ _  Hconst s2 = new Set([2,3,4,5])
- G7 r, i; N) x) F- D: a" G5 V# V' v
) p1 @- S/ x* e//并集 Set(5)&nbsp;{1, 2, 3, 4, 5}
* d# T" O5 R% g" [const union = new Set([...s1,...s2])8 ~" q# w% I4 @, V
, t& P- U$ L. j( \8 y& k
//交集 Set(3)&nbsp;{2, 3, 4}
* h( o4 m5 V# M) E# \! P' N# Nconst intersect = new Set([...s1].filter(v =&gt; s2.has(v)))! s! R1 u) ~; W7 @
  j7 d- e* I# Z" P4 f& O7 Z* L
//差集# {7 c- p* s6 \1 W0 D& w
const difference  = new Set([...new Set([...s1].filter(v =&gt; !s2.has(v))),...new Set([...s2].filter(v =&gt; !s1.has(v)))])</code></pre>! m* n$ S# K" A$ S) l. @
<p>&nbsp;</p># s# [( Z$ K$ H
<p>Set 基本的用法就先讲到这里,有不对的地方欢迎大家指正</p>
, _' M; d+ U4 v, f8 I' Z8 E
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|飞雪团队

GMT+8, 2025-7-12 18:17 , Processed in 0.061597 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表