详解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 dialog键盘事件代码
Aug 01 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
老生常谈js中的MVC
Jul 25 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
vue的for循环使用方法
Feb 12 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
js实现随机点名器精简版
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
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Opacity.js
2007/01/22 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
flask中的wtforms使用方法
2018/07/21 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Python 项目转化为so文件实例
2019/12/23 Python
django创建css文件夹的具体方法
2020/07/31 Python
python3处理word文档实例分析
2020/12/01 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
技校毕业生自荐书
2014/05/23 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS