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. HTML学习(一)基础篇

    这篇文章有人比我总结的好,适用于新手,我就适当的铺垫一下,结尾处会给你们网站,我就不班门弄斧了. 一)HTML结构 1.<head>标签 <title> <base/&g ...

  2. Android窗口机制分析与UI管理系统

    类图关系 在看Android的窗口机制之前,先看看其主要的类图关系以及层级之间的依赖与调用关系 1.window在当前的android系统的中的呈现形式是PhoneWindow (frameworks ...

  3. android Intent介绍

    Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组件,将 ...

  4. 浅析匿名函数、lambda表达式、闭包(closure)区别与作用

    浅析匿名函数.lambda表达式.闭包(closure)区别与作用 所有的主流编程语言都对函数式编程有支持,比如c++11.python和java中有lambda表达式.lua和JavaScript中 ...

  5. PHPmailer关于Extension missing: openssl报错的解决

    最近在写一个网页的时候,需要用到PHPmailer来发送邮件,按照官网上给出的demo写出一个例子,却报错Extension missing: openssl 最后发现需要修改php.ini中的配置: ...

  6. centos7中没有安装ifconfig命令的解决方法

    初装centos 7时,运行config报 command not found 错误,我在网上找了大量资料,下面的资料中查找原因和解决方式最详细,能很好的解决这个问题. ifconfig命令是设置或显 ...

  7. 错误 1 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“c:\Progra

    问题如图: 解决办法: step1: 首先关闭你应用程序方案,在你保存项目的文件夹下找到ProjectName.csproj  ProjectName是你实际的应用程序名称. step2: 用文字编辑 ...

  8. AspNetPager 多条件分页查询

    AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...

  9. css3

    CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...

  10. 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。

     相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...