详解ES6中的 Set Map 数据结构学习总结


Posted in Javascript onNovember 06, 2018

ES6中的 Set 数据结构

ES6 新增了一种 Set 数据结构。它类似数组。 最重要的一点是 Set中的结构成员没有重复的, 可用这点 一行代码实现数组去重。 Set 本身是一个构造函数。通过 new Set() 来创建Set结构。

let arr1 = ['Hello', 'World', 'ES6']
  let set1 = new Set() 
  arr1.forEach(type => {
    set1.add(type)
  })

通过new Set创建一个Set结构。 forEach 遍历arr1数组。把每一项通过Set.prototype.add 方法向Set结构中添加成员。

Set 也可以接受一个数组作为参数。

let arr2 = [1,2,3,4,1,5,2]
  let set2 = new Set(arr2) 
  for (let type of set2) {
   console.log(type)
  }
  // 1
  // 2
  // 3
  // 4
  // 5

上面的new Set() 创建 Set 数据结构时, 将一个数组作为它的参数。最后通过 for of 遍历 set2。因为 结构成员没有重复, 所以打印 1 2 3 4 5

Set 接受的参数不会进行 类型转换 , new Set(5, '5') 这完全是两个值。

Set 实现数组去重

// 方法1 
  [...new Set([1,2,3,1,2])] // 1 2 3
  
  // 方法2
  Array.from(new Set([1,2,3,1,2])) // 1 2 3

都是通过向 new Set() 中传入一个数组, 利用 Set结构成员都是唯一的特性, 最后通过扩展运算符..., 或者ES6提供的一种将类数组转换为数组的方法 Array.from()。

Set 操作方法

  • Set.prototype.add(value) 向Set结构中添加一名成员, 返回值为Set结构
  • Set.prototype.delete(value) 删除一名成员, 返回值为布尔值。 true成功, false失败
  • Set.prototype.has(value) Set 成员是否存在, true为存在, false为不存在
  • Set.prototype.clear() 清空所有的成员
let arr3 = [7,8,9]
  let set3 = new Set(arr3)
  set3.add(10)
  set3.size() // 4
  set3.delete(8)
  set3.size() // 3
  set3.clear() // 0

Set 遍历方法

  • keys() 键名的遍历器
  • values() 键值的遍历器
  • entries() 键值对的遍历器,以数组形式返回
let arr4 = ['javascript', 'vue', 'node.js', 'typescript']
  let set4 = new Set(arr4) 
  
  // set.keys()
  for (let k of set4.keys()) {
   console.log(k)\
   // javascript
   // vue 
   // node.js
   // typescript
  } 

 // set.values()
 for (ket v of set4.values()) {
  console.log(v)
  // 和上面的set4.keys() 遍历的结果一样
 } 

 // set.entries()
 for (let e of set3.entries()) {
  console.log(e)
  // ['javascript', 'javascript']
  // ['vue', 'vue']
  // ['node.js', 'node.js']
  // ['typescript', 'typescript']
 }

可见, keys()和values() 遍历是一模一样的, 以后遍历使用keys()还是values()没有区别。entries 遍历返回的是数组, 分别是keys() values()结果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
You might like
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
重写javascript中window.confirm的行为
2012/10/21 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python实现读取文件最后n行的方法
2017/02/23 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Django入门使用示例
2017/12/12 Python
python读取图片任意范围区域
2019/01/23 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python三引号如何输入
2020/07/06 Python
详解python的super()的作用和原理
2020/10/29 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
舞蹈教育学专业求职信
2014/06/29 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
不同意离婚上诉状
2015/05/23 职场文书
PHP解决高并发问题
2021/04/01 PHP
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers