美文网首页
ES6学习笔记8-set和map

ES6学习笔记8-set和map

作者: whowhenhowxxx | 来源:发表于2018-08-30 00:27 被阅读0次

SET

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set 本身是一个构造函数,用来生成 Set 数据结构。
Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

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

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

我们可以用set的这个特性去除重复元素

// 去除数组的重复成员
[...new Set(array)]

set里面比较元素是否相等用的是"Same-value-zero equality"它和===的主要区别是NAN是否等于自身。

  • set结构的实例属性
    constructor和size
  • set实例的操作方法:
  1. add(value):添加某个值,返回 Set 结构本身。
  2. delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  3. has(value):返回一个布尔值,表示该值是否为Set的成员。
  4. clear():清除所有成员,没有返回值。
  • set实例的遍历方法
  1. keys():返回键名的遍历器
  2. values():返回键值的遍历器
  3. entries():返回键值对的遍历器
  4. forEach():使用回调函数遍历每个成员
    特别注意:Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。

keys和values返回的完全一样,对于set来说没有键的概念。

  • 遍历的应用
    扩展运算符(...)内部使用for...of循环,所以也可以用于 Set 结构。
    因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
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}

如果想在遍历操作中,同步改变原来的 Set 结构,目前没有直接的方法,但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构,然后赋值给原来的 Set 结构;另一种是利用Array.from方法。

WeakSet

  • 和set的区别
  1. 首先,WeakSet 的成员只能是对象,而不能是其他类型的值。
  2. 其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

这是因为垃圾回收机制依赖引用计数,如果一个值的引用次数不为0,垃圾回收机制就不会释放这块内存。结束使用该值之后,有时会忘记取消引用,导致内存无法释放,进而可能会引发内存泄漏。WeakSet 里面的引用,都不计入垃圾回收机制,所以就不存在这个问题。因此,WeakSet 适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在 WeakSet 里面的引用就会自动消失。
由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。

map

  • JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
    Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
  • map具有set方法和get方法。

事实上,不仅仅是数组,任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构(详见《Iterator》一章)都可以当作Map构造函数的参数。这就是说,
Set和Map都可以用来生成新的 Map。

如果读取一个未知的键,则返回undefined。
注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。
由上可知,Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。

如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,但是NAN除外。

  • map的实例方法和遍历方法和set基本一致。
    上面代码最后的那个例子,表示 Map 结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。
map[Symbol.iterator] === map.entries

同样也可以先用...转为数组再进行map或者filter。

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

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

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

  • map转数组
    Map 转为数组最方便的方法,就是使用扩展运算符(...)。
  • 数组 转为 Map
    将数组传入 Map 构造函数,就可以转为 Map。
  • Map 转为对象
    如果所有 Map 的键都是字符串,它可以无损地转为对象。
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

  • 对象转为 Map
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

  • JSON和map的互相转化
  • JSON数组和map的互相转化

相关文章

  • ES6学习笔记8-set和map

    SET ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个...

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

  • ES6 数组方法

    ES6 以下是个人对ES6 数组方法的理解和学习 map() 用法 : filter() forOf遍历方法 ​ ...

  • Map简单记录

    Map 笔记 今天学习了 map 中的 hashMap 和 concurrentHashMap 区别,简单记录下。...

  • ES6新增Map和Set数据类型

    Map和Set Map 和 Set 是 ES6 标准新增的数据类型 Map JavaScript的对象(Objec...

  • es6学习笔记之Set和Map

    一. Set ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Tips:...

  • ES6学习笔记(二)set 和 map

    一:set ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set函数可以接受...

  • 前端面试准备学习内容

    分三大块:ES6,Vue,Vuex ES6内容:map, forEach, promise, set, map, ...

  • 前端海底捞不定期跟新

    2017年8月 1,ES6 Map和Set Map ES6中新增的数据类型,类似PHP中的键值对形式结构 Set ...

  • 七: ES6 Set Map

    前言 该部分为书籍 深入理解ES6 第七章(Set与Map)笔记 ES5中的 Set 与 Map 在 ES5 中,...

网友评论

      本文标题:ES6学习笔记8-set和map

      本文链接:https://www.haomeiwen.com/subject/cxjlwftx.html