详解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 相关文章推荐
判断浏览器的javascript版本的代码
Sep 03 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
js+css实现导航效果实例
Feb 10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 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
php上传大文件设置方法
2016/04/14 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python如何在DataFrame增加数值
2020/02/14 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
同意迁入证明模板
2014/10/26 职场文书
班主任2015新年寄语
2014/12/08 职场文书
订货会邀请函
2015/01/31 职场文书
2015年校医个人工作总结
2015/07/24 职场文书