ES6之Set & Map

435 阅读7分钟

这是我参与8月更文挑战的第1天,活动详情查看: 8月更文挑战

1.Set是什么

Set是ES6的一种数据结构,类似于数组,但是成员的值是唯一的,没有重复的(当向Set中添加成员时,相同的值不会被添加进去)。

Set本身是一个构造函数,用来生成Set数据结构。

let set = new Set()
set.add(1) //向set中增加元素
set.add('1')
set.size // 2

let set1 = new Set([NaN,NaN])
set1.size  //1
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2    由于两个空对象不相等,所以它们被视为两个值。

向 Set 加入值的时候,不会发生类型转换,所以1和"1"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。

let set = new Set([1, 2, 3, 4, 4]); //接收一个数组作为参数用来初始化
set.size // 4
[...set] // [1, 2, 3, 4]

Set可以用于去除重复的成员,用法如下:

//去除数组重复成员
let array = [1,3,4,4,5,2,2]
[...new Set(array)] // [1,3,4,5,2]

Array.from(new Set(array))

//去除字符串重复成员
[...new Set('ababbc')].join('') //abc

2. Set的属性和方法

Set.prototype.constructor : 构造函数,默认就是Set函数

Set.prototype.size: 返回Set实例的成员总数

Set的操作方法:

add(value) : 添加某个值,返回Set结构本身

delete(value) :删除某个值,返回一个布尔值,表示是否删除成功

has(vaule) : 返回一个布尔值,表示参数知否为Set的成员

clear() : 清除所有成员,没有返回值

let set = new Set()
set.add(1).add(2).add(2)
set.size // 2
set.delete(1) // true
set.has(1) //false
set.clear()

Set的遍历方法:

keys() : 返回键命的遍历器

values() : 返回键值的遍历器

entries() : 返回键值对的遍历器

forEach : 使用回调函数遍历每个成员

注意:Set的遍历顺序就是插入顺序

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

3.WeakSet是什么

WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。

  • WeakSet 的成员只能是对象,而不能是其他类型的值。
  • WeakSet 中的对象都是弱引用。

弱引用

即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

这是因为垃圾回收机制根据对象的可达性(reachability)来判断回收,如果对象还能被访问到,垃圾回收机制就不会释放这块内存。结束使用该值之后,有时会忘记取消引用,导致内存无法释放,进而可能会引发内存泄漏。WeakSet 里面的引用,都不计入垃圾回收机制,所以就不存在这个问题。因此,WeakSet 适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在 WeakSet 里面的引用就会自动消失。

由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。

let ws = new WeakSet();

let a = [[1, 2], [3, 4]];
let ws = new WeakSet(a); //是a数组的成员成为 WeakSet 的成员,而不是a数组本身。这意味着,数组的成员只能是对象。

WeakSet的操作方法:

add():向 WeakSet 实例添加一个新成员。

delete():清除 WeakSet 实例的指定成员。

has():返回一个布尔值,表示某个值是否在。

注意:WeakSet没有size属性,不能用forEach遍历它的成员,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。

4.Map是什么

JavaScript 的对象(Object)只能用字符串当作键。Map 它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。

let m = new Map();
let o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

const map = new Map([  // Map可以接受一个数组作为参数,该数组的成员是一个个表示键值对的数组。 
  ['name', '张三'], //不仅仅是数组,任何具有Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。
  ['title', 'Author']
]);
map.size // 2
map.get('name') // "张三"
map.get('title') // "Author"

5.Map的属性和方法

size:属性, 返回 Map 结构的成员总数。

set(key, value):方法,设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

get(key):方法,读取key对应的键值,如果找不到key,返回undefined。

has(key):方法,返回一个布尔值,表示某个键是否在当前 Map 对象之中。

delete(key):方法,删除某个键,返回true。如果删除失败,返回false。

clear():方法,清除所有成员,没有返回值。

let map = new Map()
map.set('a',23).set('b',44)
map.size // 2
map.get('a') //23
map.has('a') //true
map.delete('a') //true
map.delete('a') // false
map.clear()

遍历方法(Map 的遍历顺序就是插入顺序)

keys():返回键名的遍历器。

values():返回键值的遍历器。

entries():返回所有成员的遍历器。

forEach():遍历 Map 的所有成员。

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']]

6.Map与其他类型相互转换

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
[...map] //Map转数组

new Map([ //数组转Map,把数组传入Map构造函数
  [true, 7],
  [{foo: 3}, ['abc']]
])

function strMapToObj(map) { //map转对象
  for (let [k,v] of map) {
    obj[k] = v;
  }
  return obj;
}
strMapToObj(map) // {1: "one", 2: "two", 3: "three"} 如果所有 Map 的键都是字符串,它可以无损地转为对象。如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
  let obj = {};

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj)); //对象转map

7.Map的应用

Map 的应用最直接的就是策略模式。举个例子抽奖:一等奖是手机,二等奖是耳机,三等奖是数据线,四等奖是徽章。那一般会这么写:

function getPrizes(level) {
  if (level === "一等奖") {
    return "手机"
  } else if (level === "二等奖") {
    return "耳机"
  } else if (level === "三等奖") {
    return "数据线"
  } else if (level === "四等奖") {
    return "徽章"
  }
}
getPrizes("一等奖");
// 或者
function getPrizes(level) {
  switch (level) {
    case "一等奖":
      return "手机"
    case "二等奖":
      return "耳机"
    case "三等奖":
      return "数据线"
    case "四等奖":
      return "徽章"
    default:
      break;
  }
}
getPrizes("一等奖");

上述两种写法,如果条件越来越多的话,那写的 if...else...和 case 越来越长,代码相当的臃肿。 运用 Map 来写策略模式,简洁明了:

let prizes = new Map([
  ['一等奖', '手机'],
  ['二等奖', '耳机'],
  ['三等奖', '数据线'],
  ['四等奖', '徽章']
]);
function getPrizes(level) {
  return prizes.get(level);
}
getPrizes("一等奖");

8.WeakMap是什么

WeakMap结构与Map结构类似,也是用于生成键值对的集合。

与Map也有区别:

  • WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。
  • WeakMap的键名所指向的对象,不计入垃圾回收机制。
  • WeakMap没有遍历操作(即没有keys()、values()和entries()方法),也没有size属性。

why

因为没有办法列出所有键名,某个键名是否存在完全不可预测,跟垃圾回收机制是否运行相关。这一刻可以取到键名,下一刻垃圾回收机制突然运行了,这个键名就没了,为了防止出现不确定性,就统一规定不能取到键名。

  • WeakMap无法清空,即不支持clear方法。
  • WeakMap只有四个方法可用:get()、set()、has()、delete()。