详解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高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
原生js实现选项卡功能
Mar 08 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
小程序实现页面顶部选项卡效果
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产生动态的影像图
2006/10/09 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python查看数据类型的方法
2019/10/12 Python
深入了解python列表(LIST)
2020/06/08 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
大专生自我鉴定范文
2013/10/01 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
仓库主管岗位职责
2014/03/02 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
大学社团活动总结
2014/04/26 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
联谊活动总结
2014/08/28 职场文书
继承权公证书范本
2015/01/23 职场文书
预备党员入党感想
2015/08/10 职场文书
《学会看病》教学反思
2016/02/17 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers