阮大神的es6看了一遍,但是对于Set和Map还是一知半解的,主要还是没怎么用吧,这里总结一下,以后再工作中也要多用用才行

怎么定义set呢?有什么用处?

set是ES6中新增的类型,和数组类似,唯一不同在于该类型不会有重复的数据,一般常用来对数据进行去重操作。

  1. //创建实例
  2. let set = new Set() //{}
  3. let set = new Set([1,2,3]) //{1,2,3}
  4.  
  5. //相关方法
    set.has(1) //判断元素是否存在
    set.add('1') //添加元素
    set.delete(1) //删除元素
    set.clear() //清除元素

知道了怎么定义,怎么创建实例,但是set这个数据结构怎么用来去重的?来看一看

  1. //数组去重
  2. let set = new Set([1,2,2,3,3])
  3. console.log(set) //{1,2,3}
  4.  
  5. //多数组合并去重
  6. let arr1 = [1,2,66,5,3]
  7. let arr2 = [1,56,5,4]
  8. let set = new dSet([...arr1,...arr2])
  9. console.log(set) //{1,2,66,5,3,56,4}

想必大家都注意到啦,我们去重后的数据结构不是用[]括起来的数组啊,所以来看一下怎么实现Set和Array之间的转换

说道Array转Set,上面的实例不就是将数组转成了Set嘛

那么Set转Array呢,怎么实现? 其实很简单,有两种方式

  1. //使用拓展运算符
  2. let set = new Set([1,2,3])
  3. console.log([...set]) // [1,2,3]
  4.  
  5. //使用Array.from()
    console.log(Array.from(set)) // [1,2,3

Set类型的数据,也可以像数组一样做 循环遍历

可以使用Set实例对象的keys(),values(),entries()方法进行遍历。

由于Set的键名和键值是同一个值,它的每一个元素的key和value是相同的,所有keys()和values()的返回值是相同的,entries()返回的元素中的key和value是相同的。

这里引用一位道友的代码  ES6,新增数据结构Set的用法

  1. let set5 = new Set([4, 5, 'hello'])
  2. console.log('iterate useing Set.keys()')
  3. for(let item of set5.keys()) {
  4. console.log(item) //4 5 hello
  5. }
  6.  
  7. console.log('iterate useing Set.values()')
  8. for(let item of set5.values()) {
  9. console.log(item) //4 5 hello
  10. }
  11.  
  12. console.log('iterate useing Set.entries()')
  13. for(let item of set5.entries()) {
  14. console.log(item) //[4,4] [5,5] ['hello' 'hello']
  15. }

end

ES6之Set的更多相关文章

  1. ES6模块import细节

    写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  4. ES6(块级作用域)

    我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...

  5. es6小白学习笔记(一)

    1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...

  6. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  7. ES6之let命令详解

    let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...

  8. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  9. ES6+ 现在就用系列(二):let 命令

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  10. ES6+ 现在就用系列(一):为什么使用ES6+

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

随机推荐

  1. Python中的is和==的区别

    Python中的is和==的区别 1. is 是比较内存地址id() a = "YongJie" b = "YongJie" print(id(a)) #233 ...

  2. Unity3d粒子特效:制作火焰效果

    效果 分析 真实的火焰效果,通常包括:火.火光.火星等组成部分,而火焰对周围环境的烘焙,可以通过灯光实现,如点光源. 针对火焰组成部分,我们可以创建对应的粒子系统组件,实现相应的效果,如下图所示: 1 ...

  3. Linux 命令行获取天气

    目标: 使用 Linux 命令行显示天气预报. 发行版: 所有 Linux 发行版. 要求: 能连上因特网的 Linux 难度: 容易 约定: # - 需要使用 root 权限来执行指定命令,可以直接 ...

  4. 学习笔记66_DBSCAN聚类算法

  5. [2018-01-13] 什么是Django

    什么是Django? Django是一个基于Python的高级Web开发框架 它能够让开发人员进行高效且快速的开发 高度集成(不用自己造轮子),免费并且开源(内部已经实现了许多高级的功能) 浏览器浏览 ...

  6. NOIP模拟 35

    int乘爆见祖宗 难得地T3暴力打满 T1T2思路也都正确 然而T2没看出一个int乘爆直接滚粗.. 这谁抗的住啊... 跟天皇说我差点就rank1了 换来的只有一张奸笑的大脸和一堆垃圾的嘲讽 真巨啊 ...

  7. 2019年10月11号 王庆超 linux

    1.计算机操作系统简介 (1)掌握操作系统的定义:操作系统是一个用来协调.管理和控制计算机硬件和软件资源的系统 程序,它位于硬件和应用程序之间. (2)掌握操作系统的内核的定义:操作系统的内核是一个管 ...

  8. jquery序列帧播放(支持视频自动播放和不是全屏播放)

    jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡.. ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片 尺寸适当的可以压小点<pre> < ...

  9. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)

    说明:前期的安装,请转向https://www.cnblogs.com/lq-93/p/11824039.html (4).查看gitlab镜像是否启动成功 docker inspect  容器id  ...

  10. 008.Kubernetes二进制部署Nginx实现高可用

    一 Nginx代理实现kube-apiserver高可用 1.1 Nginx实现高可用 基于 nginx 代理的 kube-apiserver 高可用方案. 控制节点的 kube-controller ...