详解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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
Vue计算属性的使用
Aug 04 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP实现事件机制的方法
2015/07/10 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue-router项目实战总结篇
2018/02/11 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
numpy中的高维数组转置实例
2018/04/17 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
python中altair可视化库实例用法
2021/01/26 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
后勤部长岗位职责
2013/12/14 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
python执行js代码的方法
2021/05/13 Python
Python中else的三种使用场景
2021/06/16 Python