ES6学习(三):Set和Map容器的使用

news2024/9/23 4:23:41

Set容器

set的结构类似于数组,但是成员是唯一且不会重复的。

创建的时候需要使用new Set([])的方法

创建Set格式数据

        let set1 = new Set([])
        console.log(set1, 'set1')
        let set2 = new Set([1, 2, 3, 4, 5])
        console.log(set2, 'set2')

对比看看Set中唯一

        let set3 = new Set([1, 1, 2, 2, 'wjt', 'wjt', null, null, undefined, undefined, NaN, NaN, true, true, { name: 'wjt' }, { name: 'wjt' }, [1, 2, 3], [1, 2, 3]])
        console.log(set3, 'set3')

放置了数字,字符串,null,安迪范的,对象,数组等类型的数据,结果如下

因为数组和对象属于引用类型,指向的并非值本身而是地址,及时两两属性内容一直,但是归根到底是四个地址,所以这四个对象类型的都在其中

set原型上的方法

下面的数据都是关联使用的 

 add新增
        let set1 = new Set(['wjt','mashi',1,2,3])
        console.log(set1,'初始化的set1')
        //add
        set1.add(4)
        console.log(set1,'add方法新增')

delete删除
        set1.delete(4)
        console.log(set1,'delete方法删除')

has查找
        //has方法查询元素
        console.log(set1.has(1),'存在')
        console.log(set1.has(5),'不存在') 

size查看长度(元素个数)
console.log(set1.size,'size方法')

clear清空
        set1.clear()
        console.log(set1,'清空clear')

遍历迭代的四种方法

keys,values,entries,forEach

        //迭代器:entries
        console.log(set1.entries(),'entries方法')
         //迭代器:keys方法
        console.log(set1.keys(),'keys方法')
        //迭代器:values方法
        console.log(set1.values(),'values方法')
        //forEach方法
        set1.forEach((item,index)=>{
            console.log(item,index,'forEach内循环')
        })

set方法实现数组去重

数组去重使用set会很轻松,但是记得,只适用于元素都是值类型,如果是复杂对象组成的数组,那么就不行了。

值类型元素数组去重(成功)
        //值类型
        let arr1 = [1,2,2,4,5,6,7,7,'1','2','1','wjt','wjt']
        let newArr1 = [...new Set(arr1)]
        console.log(newArr1,'去重后的值数组')

复杂数组去重(失败)
        //复杂类型
        let arr2 = [{name:'wjt'},{name:'wjt'},[1,2,3],[1,2,3]]
        let newArr2 = [...new Set(arr2)]
        console.log(newArr2,'失败的去重')

前面说过,去重的是基础类型,属性值相同的对象类型不包括在内。

特殊情况(引用元素来自同一内存地址)
        //特殊情况
        let obj1 = {name:'wjt'}
        let obj2 = obj1
        let arr3 = [obj1,obj2]
        console.log(arr3,'数组')
        let set3 = new Set(arr3)
        console.log(set3,'set容器') 

因为obj1和obj2引用的是同一个地址,所以obj1 === obj2,就会被Set当成相同元素去重

这里要是看不懂的话,就先去复习一下js的变量基础吧。

Map容器

map是和对象比较像的一种数据容器,键值对形式的存储数据。不过,这个键可以不是像对象一样必须是字符串。

创建Map格式数据

        let map1 = new Map()
        console.log(map1,'初始化map1')

使用各类值作为键

字符串
        //字符串作为键
        map1.set('name','wjt')
        map1.set('age',28)
        console.log(map1,'map1添加了name和age')

对象
        // //使用对象作为键
        let obj = {title:'对象'}
        map1.set(obj,'键是一个对象,我是值')
        console.log(map1,'使用对象作为键')

数组
        let arr = [1,2,3]
        map1.set(arr,[4,5,6])
        console.log(map1,'使用数组作为键')

 其他类型
        //null为键
        map1.set(null,'null为键')
        console.log(map1,'null为键')
        //undefined为键
        map1.set(undefined,'undefined为键')
        console.log(map1,'undefined为键')
        //NaN为键
        map1.set(NaN,NaN)
        console.log(map1,'NaN为键和值')

 Map的操作方法

其实这里我就不需要多说什么了吧,通过对比,Map和Set在实例方法的设计上很类似,方法名大致也一样。(Set添加元素用的add,Map用的set)

        //set增加
        let map2 = new Map()
        map2.set('name','wjt')
        map2.set('age',28)
        map2.set('coder',()=>'coder')
        map2.set('love','game')
        map2.set({title:'对象键'},{label:'对象值'})
        console.log(map2,'set方法增加')
        //set方法修改
        map2.set('age',29)
        console.log(map2,'set方法修改了age')
        //delete方法删除
        map2.delete({title:'对象键'})
        console.log(map2,'delete删除对象-->失败')  //无法删除,因为引用的是一个新的地址  
        map2.delete('love')
        console.log(map2,'delete删除值类型')
        //get查看
        console.log(map2.get('name'),'查找name')
        console.log(map2.get({title:'对象键'}),'找不到引用类型的值')  //和无法删除是一个原因
        //其余方法基本都差不多,这里就不做以演示了

剩下的那些循环和clear等方法就不展示了(纯手党,敲着太累了,意义不大)

如何删除和查找一个引用类型的值


        // //查找删除引用类型
        let map3 = new Map()
        let arr = ['1','2']
        map3.set(arr,[1,2])
        console.log(map3,'新增一条')
        console.log(map3.get(arr),'查找到了引用类型')
        map3.delete(arr)
        console.log(map3,'删除成功')

总结

1.Set和Map都是新容器,Set像数组,Map像对象。 

2.Set可以实现去值类型数组去重,Map可以实现键值对的快速映射

3.两者很多方法类似,并且都可以遍历枚举

4.你可以在实际开发中不用,但是你得知道他们

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1311446.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity中Shader URP最简Shader框架(整理总结篇)

文章目录 前言一、精简 ShaderGraph 所有冗余代码后的最简 URP Shader二、我们来对比一下 URP Shader 与 BuildInRP Shader 的对应关系 与 区别1、"RenderPipeline""UniversalPipeline"2、面片剔除、深度测试、深度写入、颜色混合 和 BRP 下一致3、必须引入…

Java中的链表

文章目录 前言一、链表的概念及结构二、单向不带头非循坏链表的实现2.1打印链表2.2求链表的长度2.3头插法2.4尾插法2.5任意位置插入2.6查找是否包含某个元素的节点2.7删除第一次出现这个元素的节点2.8删除包含这个元素的所以节点2.9清空链表单向链表的测试 三、双向不带头非循坏…

使用动画曲线编辑器打造炫酷的3D可视化ACE

前言 在制作3D可视化看板时,除了精细的模型结构外,炫酷的动画效果也是必不可少的。无论是复杂的还是简单的动画效果,要实现100%的自然平滑都是具有挑战性的工作。这涉及到物理引擎的计算和对动画效果的数学建模分析。一般来说,只…

前端页面显示的时间格式为:2022-03-18T01:46:08.000+00:00 如何转换为:年-月-日,并根据当前时间判断为几天前

由于后端每条博文的发表时间是以“xxxx—xx—xxxx:xx:xx”的形式显示的, 现在要在前端改成“xxxx年xx月xx日”的形式。 并对10分钟内发表的显示“刚刚”,对24小时内发表的显示“小时前”。 超过24小时,小于48小时,显示“1天前”。…

PFA容量瓶应用工业制造领域PFA定容瓶精确测量的重要性

容量瓶是保证科学、医学和工业等各个领域精确测量的重要工具。这些专门的容量瓶被设计用来在特定的温度下保持精确的液体体积,使它们成为在工作中需要高精确度的专业人士不可或缺的工具。在这份容量瓶终极指南中,今天我们来探讨下这些仪器的重要性&#…

ios苹果app应用程序录屏开发有哪些难点和注意点?

Hello,各位同学们好,我是咕噜铁蛋,老朋友们应该知道我经常关注并分享各种移动应用开发的技术和经验。在这篇文章中,铁蛋将为大家介绍分享苹果iOS录屏开发的难点和注意点! 首先,让我们简单了解一下iOS录屏的…

如何在 Eolink Apikit 中发起 TCP/UDP 文档测试

TCP/UDP 是两种常用的网络传输协议。TCP 协议提供可靠的连接,而 UDP 协议提供不可靠的连接。 TCP 协议是面向连接的协议,在建立连接之前,客户端和服务器需要先握手。握手完成后,客户端和服务器之间就会建立一个可靠的连接。在连接…

记录今日将C语言的Windows程序更改为python语言Windows程序,实现子窗口控制,类似微信程序框架最简单的原型

基本思路 为什么要选择python制作Windows应用程序,主要就是源代码直接展示,发现问题随时修改,同时可以不断增加新的功能方便。 由于C语言的Windows程序中结构类型在python中不能使用, 因此我们按照ctypes模块指导意见继承structu…

微服务技术 RabbitMQ SpringAMQP P61-P76

B站学习视频https://www.bilibili.com/video/BV1LQ4y127n4?p61&vd_source8665d6da33d4e2277ca40f03210fe53a 文档资料: 链接:https://pan.baidu.com/s/1P_Ag1BYiPaF52EI19A0YRw?pwdd03r 提取码:d03r 一 初始MQ 1. 同步通讯 2. 异步通讯 3. MQ常…

低代码与自动化:加速软件开发的新趋势

低代码与自动化技术正在逐渐改变软件开发的面貌。随着科技的不断发展,传统的编程方式已经不再是唯一的选择。低代码和自动化技术正在为开发者提供更高效、更灵活的开发环境,使得软件开发变得更加简单、快速和高效。 低代码和自动化技术正在逐渐改变软件开…

理解JSX:提高前端开发效率的关键(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

百度搜索展现服务重构:进步与优化

作者 | 瞭东 导读 本文将简单介绍搜索展现服务发展过程,以及当前其面临的三大挑战:研发难度高、架构能力欠缺、可复用性低,最后提出核心解决思路和具体落地方案,期望大家能有所收货和借鉴。 全文4736字,预计阅读时间12…

高级C#技术(二)

前言 本章为高级C#技术的第二节也是最后一节。前一节在下面这个链接 高级C#技术https://blog.csdn.net/qq_71897293/article/details/134930989?spm1001.2014.3001.5501 匿名类型 匿名类型如其名,匿名的没有指定变量的具体类型。 举个例子: 1 创建…

MySQL数据库,视图、存储过程与存储函数

数据库对象: 常见的数据库对象: 视图: 视图是一种虚拟表,本身是不具有数据的占用很少的内存空间。 视图建立在已有表的基础上,视图赖以建立的这些表称为基表。 视图的创建和删除只影响视图本身,不影响对…

案例058:基于微信小程序的智能社区服务管理系统

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

计算机设计大赛信息可视化设计的获奖经验剖析解读—基于本专栏文章助力4C大赛【全网最全万字攻略-获奖必读】

文章目录 一.中国大学生计算机设计大赛1.1赛道解读1.2 信息可视化设计小类介绍1.2 小类区别解读 二.信息可视化设计赛道获奖经验2.1 四小类作品预览2.1.1 数据可视化小类-优秀参赛作品展览2.1.2 信息图形设计小类-优秀参赛作品展览2.1.3 动态信息影像(MG动画&#x…

2024免费mac苹果电脑系统电脑管家CleanMyMac X

macOS已经成为最受欢迎的桌面操作系统之一,它提供了直观、简洁的用户界面,使用户可以轻松使用和管理系统。macOS拥有丰富的应用程序生态系统;还可以与其他苹果产品和服务紧密协作,如iPhone、iPad,用户可以通过iCloud同…

理解JSX:提高前端开发效率的关键(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

spring 笔记五 SpringMVC的数据响应

文章目录 SpringMVC的数据响应SpringMVC的数据响应方式回写数据 SpringMVC的数据响应 SpringMVC的数据响应方式 页面跳转 直接返回字符串通过ModelAndView对象返回 回写数据 直接返回字符串返回对象或集合 返回字符串形式 直接返回字符串:此种方式会将返回的字符…

nodejs+vue+微信小程序+python+PHP血液中心管理平台的设计与实现-计算机毕业设计推荐

实现采血的完整功能,系统用户主要分为两类,一类是管理员,一类是采血工作人员。管理员主要对采血工作人员以及血库进行管理。派发账号给员工作为采血工作人员,对血库的出库入库进行信息化管理。采血工作人员主要完成采血工作。通过…