详解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的变量作用域深入理解
Oct 25 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
Zend公司全球首推PHP认证
2006/10/09 PHP
php 全局变量范围分析
2009/08/07 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
材料员岗位职责
2014/03/13 职场文书
关于建议书的格式范文
2014/05/20 职场文书
开展创先争优活动总结
2014/08/28 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
图解上海144收音机
2021/04/22 无线电
golang slice元素去重操作
2021/04/30 Golang
Python 中的Sympy详细使用
2021/08/07 Python
MySQL 开窗函数
2022/02/15 MySQL