详解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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
vue实现拖拽效果
Dec 23 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实现文件下载更能介绍
2012/11/23 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python使用装饰器进行django开发实例代码
2018/02/06 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python读写Excel表格的方法
2021/03/02 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
业务主管岗位职责
2013/11/20 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
大学班长的职责
2014/01/27 职场文书
安全责任书范本
2014/04/15 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
单位授权委托书范文
2014/08/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL