彻底弄懂 ES6 中的 Map、Set、weakMap、weakSet

Set（集合）

• Set 是什么？

  • 它是 ES6 新增的一种数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。
  • 它是一个 构造函数，用来生成 Set 数据结构

• 如何使用？

  // 直接添加元素
  const set = new Set([1,2,3,4,3,2,1])  // 1 2 3 4
  
  // 手动添加元素
  const s = new Set()
  [1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))  // 1 2 3 4
  

• 它的属性和方法有哪些？

  // constructor()：构造函数
  
  // 集合的长度
  set.size
  
  // 添加元素，可以链式调用
  set.add(1).add(2)
  
  // 是否存在某元素
  set.has(1)    // true
  
  // 删除某元素
  set.delete(1) 
  
  // 删除所有元素
  set.clear()
  
  // 返回一个新的迭代对象，这个对象包含了所有值
  let k = set.keys()
  let v = set.values()
  k.next() // 打印出 {value: 1, done: false}
  v.next() // 打印出 {value: 1, done: false}
  
  // 遍历元素
  for (let i of s) {
      console.log(i)    // 1 2 3 4
  }
  set.forEach(item => {console.log(item)})
  

• 集合可以用来做些什么？

  • 可以为数组去重并转化为数组

    const set = new Set([1, 2, 3, 2])
    // 方法一：
    const array = Array.from(set)
    // 方法二：
    const array2 = [...set]
    

  • Set 很容易实现交集（Intersect）、并集（Union）、差集（Difference）

    let set1 = new Set([1, 2, 3])
    let set2 = new Set([4, 3, 2])
    
    let intersect = new Set([...set1].filter(value => set2.has(value))) // 2 3
    let union = new Set([...set1, ...set2]) // 1 2 3 4
    let difference = new Set([...set1].filter(value => !set2.has(value))) // 1
    

WeakSet

• 什么是 weakSet？

  • WeakSet 对象允许你将 弱引用对象 储存在一个集合中

• 什么是弱引用？

  • 弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了）。

• WeakSet 与 Set 的区别是什么？

  • WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以
  • WeakSet 对象中储存的对象值都是被弱引用的，WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素

• WeakSet 如何使用？

  let ws = new WeakSet([{name:'steve'},{age:20}])
  

• 它的属性和方法有哪些？

  ws.constructor // 构造函数
  ws.add(value) // 在WeakSet 对象中添加一个元素value
  ws.has(value) // 判断 WeakSet 对象中是否包含value
  ws.delete(value) // 删除元素 value
  ws.clear() // 清空所有元素，注意该方法已废弃
  

Map（字典）

• 集合 与 字典 的区别是什么？

  • 共同点：集合、字典 都是储存不重复的值
  • 不同点：集合 是以 [value, value, value]的形式储存元素，字典 是以[[key, value], [key, value], [key, value]] 的形式储存

• 如何使用？

  const map = new Map([['name':'steve'],['age',20]])
  map.set('theone',{name:'steve'})
  map.set('thetwo',{name:'jobs'})
  map.set({name:'steve'},'hello')
  map.set({name:'jobs'},'world')
  
  map.get('theone') // {name:'steve'}
  // 如果读取一个未知的键，则返回undefined。
  map.get('name') // undefined
  // 只有对同一个对象的引用，才能获取到相应的值，比如你设置了：let o = {name:'jobs'}，然后 map.get(o)
  map.get({name:'jobs'}) // undefined
  
  map.has('theone') // true
  map.delete('theone')  // true
  map.has('theone') // false
  
  // 转化为数组的方法
  let arr = [...map]    // [['theone',{name:'steve'}],['thetwo',{name:'jobs'}]...]
  

• 任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数

  const set = new Set([
    ['foo', 1],
    ['bar', 2]
  ]);
  const m1 = new Map(set);
  m1.get('foo') // 1
  
  const m2 = new Map([['baz', 3],['name':'steve']]);
  m2.get('baz') // 3
  

• 键的唯一性：

  • Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。
  • 如果用基本类型来当作健，则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

• map的属性和方法？

  map.constructor // 构造函数
  map.size // 返回字典中所包含的元素个数
  
  map.set(key, value) // 向字典中添加新元素
  map.get(key) // 通过键查找特定的数值并返回
  map.has(key) // 判断字典中是否存在键key
  map.delete(key) // 通过键 key 从字典中移除对应的数据
  map.clear() // 将这个字典中的所有元素删除
  
  map.Keys() // 将字典中包含的所有键名以迭代器形式返回
  map.values() // 将字典中包含的所有数值以迭代器形式返回
  map.entries() // 返回所有成员的迭代器
  map.forEach((item,key) => console.log(key,item)) // 遍历字典的所有成员
  

WeakMap

• 什么是 WeakMap？

  • WeakMap 对象是一组键值对的集合，其中的键是弱引用对象，而值可以是任意。
  • WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

• 属性和方法

  wm.constructor // 构造函数
  wm.has(key) // 判断是否有 key 关联对象
  wm.get(key) // 返回key关联对象（没有则则返回 undefined）
  wm.set(key) // 设置一组key关联对象
  wm.delete(key) // 移除 key 的关联对象
  

总结

• Set
  • 成员唯一、无序
  • [value, value]，键值与键名是一致的（或者说只有键值，没有键名）
  • 可以遍历，方法有：add、delete、has、clear、keys、values、entries、forEach
• WeakSet
  • 成员唯一、都是对象
  • 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
  • 不能遍历，方法有 add、delete、has
• Map
  • 本质上是键值对的集合，类似集合
  • 可以遍历，方法很多可以跟各种数据格式转换：set、get、has、delete、clear、keys、values、entries、forEach
• WeakMap
  • 只接受对象作为键名（null除外），不接受其他类型的值作为键名
  • 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
  • 不能遍历，方法有get、set、has、delete