详解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之三(封装和信息隐藏)
Jan 27 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
switchery按钮的使用方法
Dec 18 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 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读取文件内容后清空文件示例代码
2014/03/18 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python Property属性的2种用法
2015/06/21 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python守护线程用法实例
2017/06/23 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Django权限机制实现代码详解
2018/02/05 Python
python 编写简单网页服务器的实例
2018/06/01 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
详解Python传入参数的几种方法
2019/05/16 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python3 实现调用串口功能
2019/12/26 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
超市5.1促销活动
2014/01/15 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
pytorch查看网络参数显存占用量等操作
2021/05/12 Python