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

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

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

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

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

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

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

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

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

//使用拓展运算符
let set = new Set([1,2,3])
console.log([...set]) // [1,2,3] //使用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的用法

let set5 = new Set([4, 5, 'hello'])
console.log('iterate useing Set.keys()')
for(let item of set5.keys()) {
console.log(item) //4 5 hello
} console.log('iterate useing Set.values()')
for(let item of set5.values()) {
console.log(item) //4 5 hello
} console.log('iterate useing Set.entries()')
for(let item of set5.entries()) {
console.log(item) //[4,4] [5,5] ['hello' 'hello']
}

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. Scrapy 实现爬取多页数据 + 多层url数据爬取

    项目需求:爬取https://www.4567tv.tv/frim/index1.html网站前三页的电影名称和电影的导演名称 项目分析:电影名称在初次发的url返回的response中可以获取,可以 ...

  2. 致Java星球程序员兄弟们的一封信

    致Java星球程序员兄弟们的一封信 亲爱的Java星球的程序员兄弟们: 你们好!我是来自地球的一名Java程序员,首先我代表地球人对贵星球的高司令来到地球传授Java语言,造福了全人类,造福了整个地球 ...

  3. 使用XPath

    XPath----XML路径语言 XPath概览 XPath是一门在XML文档中查找信息的语言,它提供了非常简洁明了的路径选择表达式. XPath常用规则 表达式 描  述 nodename 选取此节 ...

  4. python基础-列表List及内置方法

    数据类型之列表-List 用途:用于存一个或多个不同类型的值 定义:通过中括号存值,每个值之间通过逗号进行分隔 l1 = [1,'a',3,'b'] 特性:有序.可变.存多个值的数据类型 常用方法: ...

  5. kettle计划任务

    在kettle中固定抽取数据,需要用到kichen命令,编好批处理脚本:bat C: cd C:\soft\kettle\data-integration kitchen /file C:\soft\ ...

  6. OpenCV图像处理以及人脸识别

    OpenCV基础 OpenCV是一个开源的计算机视觉库.提供了很多图像处理常用的工具 批注:本文所有图片数据都在我的GitHub仓库 读取图片并显示 import numpy as np import ...

  7. php递归删除文件夹

    php递归删除文件夹 <pre> public function deldir($path) { //如果是目录则继续 if (is_dir($path)) { //扫描一个文件夹内的所有 ...

  8. Proxy动态代理-增强方法

    增强对象的功能 设计模式:一些通用的解决固定问题的方式 装饰器模式 代理模式 概念: 在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模 ...

  9. Ubuntu 16.04安装JDK并配置环境变量

    系统版本:Ubuntu 16.04 JDK版本:jdk1.8.0_121 1.官网下载JDK文件jdk-8u121-linux-x64.tar.gz 我这里下的是最新版,其他版本也可以 2.创建一个目 ...

  10. 公众号第三方平台开发 component_verify_ticket和accessToken的获取

    公众号第三方平台审核通过之后,微信的服务器会定时(10分钟一次)给"授权事件接收URL"发送component_verify_ticket,这里我们需要及时更新component_ ...