面试官：“ES6中新增的Set方法去重你会吗？”我：“看文章就知道了”

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！

赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏 。

文章目录

Set 的基本使用

🍔前言

在ES6 之前，我们存储数的据结构主要有两种：数组、对象。
在ES6中新增了另外两种数据结构，

Set

、

Map

，以及它们的另外形式

WeakSet

、

WeakMap

就行了就让我们一起了解一下ES6中新增的两个数据结构吧。希望能给大家带来帮助，共同进步！

🍏正文

1. Set

Set 是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是 元素不能重复。

1.1 Set的基本使用

创建Set我们需要通过Set构造函数的方式去创建（暂时没有字面量创建方式）：
示例代码如下：

// 使用构造函数方式创建Setvar set =newSet()// add是Set的方法用于添加元素
set.add(10)
set.add(20)
set.add(30)
set.add(40)

console.log(set)// Set { 10, 20, 30, 40 }

我们上面提到了，Set中的元素不能重复，给大家留个小问题，那么多个空数组可以重复吗？

话不多说上代码：

var setArr =newSet()let obj ={}

setArr.add(10)
setArr.add(50)
setArr.add(10)// add 重复值 10// add 两个空对象
setArr.add({})
setArr.add({})// add 两个obj对象
setArr.add(obj)
setArr.add(obj)

console.log(setArr)// Set { 10, 50, {}, {}, {} }

不知道大家能不能看懂这段代码，我给大家解释一下

1. 首先：我们可以很明显的看出来，添加的第二个10是没有添加进去的，因为Set不可以包含两个重复的值
2. 其次：有的小伙伴要问了，怎么两个空对象可以重复呢？其实两个空对象看着一样其实是不一样的，两个空对象在存储空间中的内存地址是不一样的，可能第一个空对象的内存地址是0X100,第二个的内存地址可能0x200，所以会出现两个空数组。
3. 最后：又有小伙伴要问了，为什么obj对象不能像第二段那样呢？因为两个obj对象的内存地址是一样的，他们两个是重复的，所以Set中只可以存在一个。

1.2 Set 常见的属相和方法

属性：

• size：返回Set中元素的个数；

方法：

• add(value):添加狗哥元素，返回Set对象本身；
• delete(value):从set中删除和这个值相等的元素，返回boolean类型；
• has(value):判断set中是否存在某个元素，返回Boolean类型；
• clear():清空set中所有的元素，没有返回值；
• forEach(callback,[,thisArg]):通过forEach遍历set；

完整示例代码如下所示，由于都比较简单就写在一块啦：

const setArr =newSet()// 1.
setArr.add(1)
setArr.add(2)
setArr.add(3)// 2。
setArr.delete(2)// Set { 1, 3 }// 3。
console.log(setArr.has(3))// true// 4.
setArr.clear()// 5.
setArr.forEach(item=>{
    console.log(item)})

for…of写法

const setArr =newSet([1,2,3,4,5,1])for(const iterator of setArr){
    console.log(iterator)}/* 去重遍历
1
2
3
4
5
*/

1.3 应用场景：使用Set对数组进行去重（去除数组中的重复元素）

首先告诉大家这个方法应用场景超级广泛并且效率很高（香得很）

话不多说，代码交流：

// 假设有一个数组arr 我们现在需要将数组进行去重操作const arr =[10,20,45,39,56,45]// 方法一：const newArr1 =[]
arr.forEach(item=>{if(newArr1.indexOf(item)==-1){
        newArr1.push(item)}})
console.log(newArr1)// [ 10, 20, 45, 39, 56 ]// 方法二：//new Set(arr)操作后的值(是set类型的)： Set { 10, 20, 45, 39, 56 }const newArr2 = Array.from(newSet(arr))// const newArr2 = [...new Set(arr)]const newArr2 =(...newSet(arr))

console.log(newArr2)// [ 10, 20, 45, 39, 56 ]

• indexOf()也是一个进行数组操作的方法 此处用以是如果再newArr中没有找到item 就会返回-1，意味着没有该元素，将该元素放入newArr中实现去重操作
• Array.from()将一个类数组对象或者可遍历对象转换成一个真正的数组
• 方法二中将set类型转换为数组的方法还可以用展开运算符操作（注释代码即是） 很明显可以看出来 ES6新增的Set方法更方便一点。

2. WeakSet

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

和Set的区别的话就是：

1. WeakSet中只能存放对象类型，不能存放基本数据类型；
2. WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC(垃圾回收机制)可以对该对象进行回收。

2.1 区别一：WeakSet中只能存放对象类型

const weakSet1 =newWeakSet()const weakSet2 =newWeakSet()// 区别一：只能存储对象类型的数据(存储非对象类型会报错)

weakSet.add(1) 
console.log(weakSet1)// TypeError: Invalid value used in weak set

weakSet.add({name:'jam'})
console.log(weakSet2)// 不会报错

2.2 区别二：WeakSet对元素的引用是弱引用

• 强引用是指向内存申请一段存储空间，进行存储的引用类型的对象的引用，在对象获得的分配内存空间中不仅仅存放了对象的信息，还存放着该对象被引用的次数。
• 弱引用是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问的（或弱访问的），并因此可能在任何时刻被回收。

2.3 WeakSet的使用场景

场景描述：阻止非构造方法创建出来的对象调用内部方法running

const weak =newWeakSet()classPerson{constructor(){
        weak.add(this)}// person类的方法running(){if(!weak.has(this)){thrownewError("禁止使用非构造方法创建出来的对象调用running方法")}
        console.log('running~~~',this)}}// 构造方法创建plet p =newPerson()
p.running()// running~~~ Person {}// 调用running方法 隐式绑定到obj对象上（非构造函数方法创建）let obj ={name:'boo'}
p.running.call(obj)// Error: 禁止使用非构造方法创建出来的对象调用running方法

WeakSet 大家了解一下即可，上述这种应用场景很少应用到（几乎不会）

🎃专栏分享：

 JavaScript相关面试题就更新到这里啦，相关 Web前端面试题 可以订阅专栏哦

🥰
专栏地址：《面试必看》
面试刷题神器：牛客网

⏳

      名言警句：说能做的，做说过的
     
    
   
   
    \textcolor{red} {名言警句：说能做的，做说过的}
   
  
 名言警句：说能做的，做说过的

✨

      原创不易，还希望各位大佬支持一下
     
    
   
   
    \textcolor{blue}{原创不易，还希望各位大佬支持一下}
   
  
 原创不易，还希望各位大佬支持一下

👍

      点赞，你的认可是我创作的动力！
     
    
   
   
    \textcolor{green}{点赞，你的认可是我创作的动力！}
   
  
 点赞，你的认可是我创作的动力！

⭐️

      收藏，你的青睐是我努力的方向！
     
    
   
   
    \textcolor{green}{收藏，你的青睐是我努力的方向！}
   
  
 收藏，你的青睐是我努力的方向！

✏️

      评论，你的意见是我进步的财富！
     
    
   
   
    \textcolor{green}{评论，你的意见是我进步的财富！}
   
  
 评论，你的意见是我进步的财富！