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. ip命令和ifconfig命令(转载)

    Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...

  2. OC字符串基本操作

    不可变的字符串的修改方法有返回值(重新指向新的字符串地址) 可变的字符串的修改方法没有返回值(修改字符串本身) // NSString 不可变字符串 // 1.创建字符串对象 // 使用初始化方法创建 ...

  3. 旅游公司招聘Java工程师

    公司招聘:岗位要求如下 Java开发工程师工作内容1.根据需求完成软件系统代码的开发,测试以及文档撰写工作:2.分析并解决客户的问题:3.配合业务部门进行数据分析以及系统优化 岗位要求:1.本科以上学 ...

  4. Oracle工具类-生成数据库现有Job的创建脚本

    生成Oracle数据库现有Job的创建脚本 -- 生成现有Job的创建脚本 create or replace procedure proc_generate_job_create_sql is be ...

  5. 如何升级PowerShell

    背景: 开发的PowerShell 脚本需要使用Invoke-RestMethod命令,发现在老的服务器上不支持这一命令,经过查询得知由于PS版本的问题.涉及到了PS的升级,需要介绍下PowerShe ...

  6. Oracle学习笔记五 SQL命令(三):Group by、排序、连接查询、子查询、分页

    GROUP BY和HAVING子句 GROUP BY子句 用于将信息划分为更小的组每一组行返回针对该组的单个结果 --统计每个部门的人数: Select count(*) from emp group ...

  7. Linux shell脚本编程(三)

    Linux shell脚本编程 流程控制: 循环语句:for,while,until while循环: while CONDITION; do 循环体 done 进入条件:当CONDITION为“真” ...

  8. php 时间倒计时代码 个人写法 有好的想法的欢迎贴出来分享

    $now=time(); $secondtime=$end_time-$now;//期限时间减去现在时间 剩余时间 $second=$secondtime % 60;//取余得到秒数 $nowtime ...

  9. Android 复制文本内容到系统剪贴板的最简单实践

    这个例子很简单,直接上截图和代码. 布局文件activity_copy.xml代码如下: <?xml version="1.0" encoding="utf-8&q ...

  10. 如果layer层在iframe下不居中滚动

    需要在layer前面加上parent.layer. 2.运用layer层的步骤: 1.引入1.8版本以上的jquery文件 <script type="text/javascript& ...