Set和Map数据结构

Set

  • 基本用法

    ES6提供了新的数据结构——Set,类似于数组,但是成员的值是唯一的,没有重复的值,Set本身是一种构造函数,用来生成Set数据结构

      var s = new Set();
    [1,2,3,4,5,2,2].map(x=> s.add(x))
    for (i of s){
    console.log(i);
    }

上面的代码通过add方法向Set结构加入成员,但是Set方法不会添加重复的值。

Set函数可以接受一个数组作为参数,用于初始化。

    var set = new Set([1,2,3,4,4]);
[...set] //[1,2,3,4]

向Set加入值时不会发生类型转换。Set内部判断两个值是否相等是使用的类似于(===)的运算符。唯一的列外是NaN等于自身(但是精确运算符认为他不等于自身) 。

    let set = new Set();
set.add({});
console.log(set.size);//1
set.add({});
console.log(set.size);//2

由于两个空对象不是精确相等的,所以他们被视为两个值。

  • Set实例的属性和方法

    Set结构有以下属性:

    • Set.prototype.constructor: 构造函数,默认是Set函数。

    • Set.prototype.size:返回实例的成员总数。

      Set实例的方法分为两类:操作方法和遍历方法。

      操作方法:

    • add(value):添加某个值,返回Set结构本身。

    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

    • has(value): 返回一个布尔值,表示参数是否为Set的成员。

    • clear():清除所有成员,没有返回值。

          let s = new Set();
      s.add(1).add(2).add(2);
      s.size;

遍历方法:

  • keys();返回一个键名的遍历器;

  • value(); 返回一个键值的遍历器;

  • entries():返回一个键值对的遍历器;

  • forEach(): 使用回调函数遍历每个成员。

        let set = new Set(['red', 'green', 'blue']);
    for(let item of set.keys()){
    console.log(item);
    }
    //red
    //green
    //blue
    for(let item of set.entries()){
    console.log(item);
    }
    //["red", "red"]
    //["green", "green"]
    // ["blue", "blue"]

entries方法返回的遍历器同时包括键名和键值,所以每次输出一个数组。

Set结构的实例默认可遍历,其默认遍历器生成函数就是他的values方法。就是说,可以省略values方法,直接用for of循环遍历Set。

Set结构的forEach()方法用来对每个成员执行某种操作,没有返回值。

        let set = new Set([1,2,3]);
set =new Set([...set].map(val => val*2));

WeakSet

WeakSet结构和Set结构类似,也是不重复的值的集合,但是他和Set有两个区别:WeakSet的成员只能是对象,而不能是其他类型的值;WeakSet的对象都是弱引用,即垃圾回收机制不考虑他对对象的引用。也就是如果其他成员逗不再引用改对象,那么回收机制会自动回收该对象所占的内存。不考虑该对象还存在于WeakSet中,这个特点意味着无法引用他的成员,因此WeakSet是不可遍历的。他是一个构造函数,可以使用new命令来创建WeakSet数据结构。

var ws = new WeakSet();

作为构造函数,WeakSet可以接收一个数组或者类似于数组的对象作为参数。该数组的成员都会成为WeakSet实例对象的成员。

WeakSet数据结构有3个方法:

  1. WeakSet.prototype.add(value): 向实例添加新成员;
  2. WeakSet.prototype.delete(value): 清除实例的指定成员;
  3. WeakSet.prototype.has(value): 返回一个布尔值,表示某个值是否属于WeakSet的实例中。

    WeakSet的一个用处是储存DOM节点,而不用担心这个节点从文档移除时会产生内存泄漏。

Map

  • Map结构的目的和基本用法

    javascript的对象(Object)本质上是键值对的集合(hash结构),但是只能用字符串作为键,这给他的使用带来了很大的限制。

    Map数据结构类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型都可以。Map数据结构提供了“值——值”的对应,是一种完美的Hash结构实现。作为构造函数,Map也可以接受数组作为参数,该数组的成员是一个个表示键值对的数组。

        var map = new Map([["name","张三"],["title","author"]]);
    map.size ;//2
    map.has("name"); //true
    map.get("name"); //张三

Map的键实际上是和内存绑定的,只要内存的地址不一样,就视为两个键。这就解决了同名属性碰撞的问题。

另外,虽然NaN不严格等与自身,但Map将其视为同一个键。

size属性:返回Map数据结构的成员总数。
set(key,value): 该方法设置key所对应的键值,然后返回整个Map结构。
get(key): 读取key对应的键值,如果找不到key,则返回undefined。
has(key): has方法返回一个布尔值,表示某个键是否在Map数据里面。
delete(key): 删除某个键,返回布尔值,表示是否删除成功。
clear(): 清除所用成员,没有返回值。
  • 遍历方法

    Map原生提供3个遍历器生成函数和1个遍历方法

    - keys(): 返回键名的遍历器;

    - values(): 返回键值的遍历器;

    - entries():返回所有成员的遍历器;

    - forEach(): 遍历Map的所有成员。

结合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身不具有这两个方法)。

     let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');

Map 还有个forEach方法,与数组的forEach方法类似,也可以完成遍历。而且该方法还可以接受第二个参数,用于绑定this。

  • Map与其他数据结构的相互转换

    • Map转为数组:最方便的方法是使用扩展运算符(...)。

         let map = new map().set(true, 7).set({foo, 3},['abc']);
      [...map];
    • 数组转为Map:将数组传入Map构造函数就可以转为Map。

    • Map转为对象:如果Map的所有键都是字符串,则可以转为对象。

          function Map(obj){
      let map = new Map();
      for (let k of Object.keys(obj)){
      map.set(k, obj[k]);
      }
      return map;
      }
      Map({yes: true, no: false});
    • 对象转为Map

    • Map转为JSON:有两种情况:一、如果Map的键名都是字符串,这时可以选择转为对象JSON;二、如果都是非字符串,可以选择转为数组JSON。

    • JSON转为Map:正常情况下,所有键名都是字符串。

WeakMap

WeakMap结构与Map类似,唯一的区别是它只接受对象作为键名(null)除外,而且键名所指向的对象不计入垃圾回收机制。

该对象设计的目的在于,键名是对象的弱引用,所以其所对应的对象可能被自动回收。基本上,WeakMap的专用场合就是,他的键所对应的对象可能会在将来消失,该结构有助于防止内存泄漏。

WeakMap与Map在API上的区别主要是两个:一是,没有遍历操作;也没有size属性;二是无法清空。WeakMap只有四个方法:get、set、has、delete。WeakMap的另一个用处是部署私有变量。

ES6-Set和Map数据结构学习笔记的更多相关文章

  1. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

  2. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  3. es6 Set 和Map 数据结构

    ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4 ...

  4. ES6中map数据结构学习

    在项目中遇到一个很恶心的需求,然后发现ES6中的map可以解决,所以简单学习了一下map. Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是“字符串-值”对,属性只 ...

  5. es6入门7--Set Map数据结构

    本文作为ES6入门第十三章的学习整理笔记,可能会包含少部分个人的理解推测,若想阅读更详细的介绍,还请阅读原文ES6入门 一.set数据结构 1.set不接受重复值 ES6新增了Set构造函数用于创建s ...

  6. JavaSE中Map框架学习笔记

    前言:最近几天都在生病,退烧之后身体虚弱.头疼.在床上躺了几天,什么事情都干不了.接下来这段时间,要好好加快进度才好. 前面用了三篇文章的篇幅学习了Collection框架的相关内容,而Map框架相对 ...

  7. ES6 set和map数据结构对对象数组去重简单实现

    自从有了es6的set数据结构,数组的去重可以简单用一行代码实现,比如下面的方式 let arr = [1, 2, 2, 3, 4] function unique (arr) { return [. ...

  8. ES6 class的继承-学习笔记

    1.简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. 子类必须在constructor方法中调用super方法,否则新建实例时会报错. ...

  9. ES6之前模拟Map数据结构的写法

    在ES6之前JavaScript 里面本身没有map对象,但是用JavaScript的Array.Object来模拟实现Map的数据结构. 现在已经有Map对象了,这里记录一下之前的写法 Array方 ...

随机推荐

  1. Java你不知道的那些事儿—Java隐藏特性

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3460373.html 每 种语言都很强大,不管你是像我一样的初学者还是有过N年项目经验的大神,总会有你不知道的 ...

  2. Django分发控制器urls--白话聊Django系列

    开始前,先上一张图,让理解Django内部的处理流程,从图中我们可以知道Django内部使用MTV架构,那今天讲的第一个部分就是控制器,在Tornado框架中叫做路由系统,负责把url映射到相应的处理 ...

  3. JS上传图片预览及图片限制

    HTML代码: <form action="__SELF__" method="post" enctype='multipart/form-data'&g ...

  4. 斯坦福大学Andrew Ng - 机器学习笔记(3) -- 神经网络模型

    大概用了一个月,Andrew Ng老师的机器学习视频断断续续看完了,以下是个人学习笔记,入门级别,权当总结.笔记难免有遗漏和误解,欢迎讨论. 鸣谢:中国海洋大学黄海广博士提供课程视频和个人笔记,在此深 ...

  5. android学习一---搭建开发环境

    android基于Java并运行Linux内核上的轻量级操作系统.由于是基于java的,学习起来也不是太难,对java有一定了解并知道一些基本的图形用户界面,入门就很简单了. 一.了解JDK ,SDK ...

  6. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  7. Ubuntu 下 java 版本的切换

    切换的方法很简单,使用下面的两个命令即可: update-alternatives --config java update-alternatives --config javac eg: root@ ...

  8. Spring笔记:AOP基础

    Spring笔记:AOP基础 AOP 引入AOP 面向对象的开发过程中,我们对软件开发进行抽象.分割成各个模块或对象.例如,我们对API抽象成三个模块,Controller.Service.Comma ...

  9. SpringMVC:学习笔记(9)——文件下载

    SpringMVC—文件下载 说明 两个案例 1.为登录用户提供下载服务. 2.阻止仅通过输入网址即可获取下载. 文件下载概览 为了将文件发送给浏览器,我们需要在控制器中完成以下操作: 对请求处理方法 ...

  10. Owncloud-X安装配置

    系统是基于Centos7.2 1.更改yum源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...