Set和Map数据结构

  1. Set
  2. WeakSet
  3. Map
  4. WeakMap

首先 这四个对象都是 数据结构. 用于存放数据

Set 类似数组. 但是不能重复. 如果你有重复数据,会自动忽略

属性

  1. size 返回长度
  2. add 添加
  3. clear 全部清除
  4. delete 删除其中一个
  5. has 确认是否存在

支持 forEach 遍历,但是不支持其他数组的遍历方式.

支持 Iterator

用途,书中介绍了两种

  1. 除去重复数据.
  2. 实现交集,并集。

实现这两种比较方便.

new Set(...[1,1,1,1,1])
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Map

Map 可以看做约等于 new Object()

只能说他可以使用 任何对象当做 key

而 Object 只能用 string

其他的原理和 {} 一样.

不过属性有些变化

  1. size
  2. set(key,value)
  3. get(key)
  4. has(key)
  5. delete(key)
  6. clear()

遍历

iterator & forEach

他提供了完整的方式. 所以能用 Map 就用

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

至于 WeakSet & WeakMap

大致与 Set & Map 一致

但是参数只接受 对象 , 且不能遍历.

WeakSet不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处,是储存DOM节点,而不用担心这些节点从文档移除时,会引发内存泄漏。

WeakSet 其实都不适合存 DOM 元素. 因为只有一个值. 并没有什么意义.

const foos = new WeakSet()
class Foo {
  constructor() {
    foos.add(this)
  }
  method () {
    if (!foos.has(this)) {
      throw new TypeError('Foo.prototype.method 只能在Foo的实例上调用!');
    }
  }
}

这是书中的一个例子.

但是我并没有明白. 因为如果 Foo 的实力已经被回收. 自然也访问不了 method 方法了

至于 WeakMap 就比较适合保存 Dom

Dom元素作为 Key. value 保存一些信息.

Dom元素被移除,也不用担心内存.

let _counter = new WeakMap();
let _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

let c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

还可以保证一些私有的属性.

一旦 Countdown 被删除,属性也随之消失.

我现在这一章并没有学到 Class

这种写法是否可以被另一种 class 原生的私有写法所替代

thx.

11 Set和Map数据结构的更多相关文章

  1. 11.Set 和 Map数据结构

    1.set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new S ...

  2. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  3. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

  4. ES6学习笔记(10)----Set和Map数据结构

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set  基本用法    Set是一种新的数据结构,它的成员都是唯一 ...

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

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

  6. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  7. ES6中的Set、Map数据结构

    Map.Set都是ES6新的数据结构,他们都是新的内置构造函数.也就是说typeof的结果,多了两个. 他们是什么:  Set是不能重复的数组.    Map是可以任何东西当做键的对象: ES6 提供 ...

  8. ECMAScript 6之Set和Map数据结构

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

  9. set和 map 数据结构

    set/map数据结构 创建: var  s=new Set(); 添加成员 s.add(1) 遍历 for of s.froEach 删除 s.delete() 判断存在 s.has() 清除 s. ...

随机推荐

  1. jQuery选择器笔记

    1.$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class= ...

  2. IOS开发基础知识--碎片50

      1:Masonry 2个或2个以上的控件等间隔排序 /** * 多个控件固定间隔的等间隔排列,变化的是控件的长度或者宽度值 * * @param axisType 轴线方向 * @param fi ...

  3. html img图片等比例缩放

    在img标签里面只设置宽,不设置高,图片就会等比例缩放.

  4. 在项目中使用ExtJS

    主要目录文件介绍 builds:压缩后的ExtJS代码,体积更小,更快:docs:开发文档:examples:官方演示示例:locale:多国语言资源文件:pkgs:ExtJS各部分功能的打包文件:r ...

  5. ckplayer 如何在PC上完美支持 m3u8播放

    使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用.功能也是基本满足我们的需求的. 一般情况我们都使用普通的视频格式比如mp4,flv等播放,但如果视频文件过大,会加载 ...

  6. ubuntu kylin 14.04安装配置MongoDB v2.6.1(转)

    1.获取最新版本 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.1.tgz 2.解压并进入bin目录 tar zxvf mongo ...

  7. python学习5

    1.切片,python中一个比较重要的概念,其实和MATLAB中的数组的操作很相像. 比如对于 a =[1,2,3,4,...,100]如果想取前三个,即[1,2,3] 直接说a[0,3]即可,还可以 ...

  8. Spring JavaMail发送邮件

    JavaMail的介绍 JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.   虽然JavaMail是 ...

  9. MySQL 主从复制与读写分离概念及架构分析

    1.MySQL主从复制入门 首先,我们看一个图: 影响MySQL-A数据库的操作,在数据库执行后,都会写入本地的日志系统A中. 假设,实时的将变化了的日志系统中的数据库事件操作,在MYSQL-A的33 ...

  10. JSP九大内置对象及四个作用域

    九大对象: 内置对象(又叫隐含对象,有9个内置对象):不需要预先声明就可以在脚本代码和表达式中随意使用 1-out: javax.servlet.jsp.JspWriter类型,代表输出流的对象.作用 ...