ES6之Set集合(通俗易懂,含实践)

Set是什么?它的方法有哪些?它在实例开发中有什么作用?

让我为大家介绍一下吧!

ES6提供了新的数据结构 Set(集合) 。它类似于数组,但成员的值是唯一的,常用于数组去重。

创建方法:

javascript 复制代码
    let s = new Set()
    console.log(s)

它属于什么类型?

javascript 复制代码
    console.log(typeof s) //object

我们通常在set中写入数组

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s)

由此可见,set 可以自动帮我们去重

Set 对象的几个常用方法和属性

1.size

可以获取元素的个数

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.size) //4 

2.add( )

向 Set 添加新元素

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.add("四大名著")
    console.log(s) 


3.delete( )

删除由其值指定的元素

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.add("四大名著")
    s.delete("四大名著")
    console.log(s) 


4.has( )

如果值存在则返回 true,否则false

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.has("西游记")) //true
    console.log(s.has("四大名著")) //false

5.clear( )

清空

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.clear()
    console.log(s)

6.我们可以使用for...of遍历

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    for(let v of s) {
        console.log(v)
    }


7.keys( )

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.keys())


8.forEach( )

为每个元素调用回调

javascript 复制代码
    let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.forEach(item=>{
        console.log(item)
    })

实践

1.数组去重

javascript 复制代码
    let arr = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let result = [...new Set(arr)]
    console.log(result)

2.交集

javascript 复制代码
    let result = [...new Set(arr1)].filter(item=>new Set(arr2).has(item)
    // {
    //     // 把arr2也变成一个集合
    //     let s2 = new Set(arr2)
    //     // 判断arr2里是否有arr1里的元素
    //     if(s2.has(item)){
    //         return true
    //     }else {
    //         return false
    //     }
    // }) 
    )
    console.log(result)

3.并集

javascript 复制代码
    let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let arr2 = [1,2,3,3,2,4]
    let result = [...new Set([...arr1,...arr2])]
    console.log(result)

4.差集

javascript 复制代码
    let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let arr2 = [1,2,3,3,2,4]
    // 取反
    let result = [...new Set(arr1)].filter(item=>!(new Set(arr2).has(item)))
    console.log(result);

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

相关推荐
Stanford_11067 小时前
【2026新年启程】学习之路,探索之路,技术之路,成长之路……都与你同行!!!
前端·c++·学习·微信小程序·排序算法·微信开放平台
打小就很皮...7 小时前
网页包装为桌面应用(Nativefier版)
前端·桌面应用·nativefier
自由生长20247 小时前
为什么我们需要流式系统?
前端
北辰alk7 小时前
从零设计一个Vue路由系统:揭秘SPA导航的核心原理
前端·vue.js
鱼鱼块7 小时前
彻底搞懂 React useRef:从自动聚焦到非受控表单的完整指南
前端·react.js·面试
nwsuaf_huasir8 小时前
积分旁瓣电平-matlab函数
前端·javascript·matlab
韭菜炒大葱8 小时前
React Hooks :useRef、useState 与受控/非受控组件全解析
前端·react.js·前端框架
Cache技术分享8 小时前
280. Java Stream API - Debugging Streams:如何调试 Java 流处理过程?
前端·后端
微爱帮监所写信寄信8 小时前
微爱帮监狱寄信写信小程序信件内容实时保存技术方案
java·服务器·开发语言·前端·小程序
沛沛老爹8 小时前
Web开发者实战A2A智能体交互协议:从Web API到AI Agent通信新范式
java·前端·人工智能·云原生·aigc·交互·发展趋势