Map、Set、Proxy

726 阅读3分钟

一、Set:类似集合,但有序

  1. 成员的值是唯一的、不重复的,形式是 {}
  2. 可以接收一个数组作参数,用于初始化。
  3. size、has()、add()、delete()、clear()
  4. 可迭代对象,可以用 for of 遍历,遍历顺序就是元素的插入顺序。
let set = new Set([1, 1, 1, 2, 3]);  // {1, 2, 3}
[...set]     // [1, 2, 3],可用于数组去重
set.size     // 3
set.add(4)   // {1, 2, 3, 4}
set.delete(1)  // {2, 3, 4}
set.has(1)  // 返回布尔值 true
set.clear()  // {},清空所有成员
  1. 遍历
    • keys()、values()、entries():键值、键名、键值对,for (let item of set.values())默认值。
    • set 的遍历顺序就是插入顺序

1. Set 和数组区别

  • 是否可重复

2. WeakSet 和 Set 区别

  • WeakSet 的成员只能是对象,而不能是其他类型的值。
  • WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用。如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。
  • WeakSet 不可遍历,没有 size 属性和 clear 方法

二、Map:类似字典

  1. 相比对象,Map 的键可以是各种类型,更适用于Hash。
  2. 可以接收一个数组作为参数,双方括号,内部全部用逗号隔离
  3. size、has()、set( , )、get()、delete()、clear()
  4. Map 的键是和内存地址绑定的,只要键的内存地址不一样,就视为两个键,不会覆盖。当键是基本类型时,会使用严格相等运算符,和Set一样,NaN也被认为等于自身。
  5. for of 遍历。
const map = new Map([  // 双方括号,内部只有逗号
  ['name', 'Jack'],
  ['title', 'Author']
]);
map.size    // 2
map.has('name')  // true
map.get('name')  // 'Jack'
map.set('age', '30');
map.set('age', '20');  // 对同一个键多次赋值,会覆盖

1. Map 和数组之间的转换

(1)Map => 数组:

const map = new Map([
  ['name', 'Jack'],
  ['title', 'Author']
]);
[...map]
// [ [ 'name', 'Jack' ], [ 'title', 'Author' ] ]

(2)数组 => Map:

new Map([
  ['name', 'Jack'],
  ['title', 'Author']
]);
// { 'name' => 'Jack', 'title' => 'Author' }

2. Map 与 Object 区别

  • 键名的类型:Map 可以是任何类型,Object 只能是字符串或 Symbol
  • 可迭代:Map 具备Iterator接口,可以用for of遍历,Object 不能遍历。
  • 长度:size属性可以获取长度,Object 没有。
  • 有序性:填入 Map 的元素,会保持原有的顺序(按插入顺序),而 Object 无法做到。

3. WeakMap 和 Map 的区别

  • WeakMap 只接受对象作为 key(null除外),不接受其他类型的值作为键名。

  • WeakMap 的 key 所指向的对象,不计入垃圾回收机制。(键值指向的对象仍是正常引用)

  • WeakMap 没有遍历操作、没有 size 属性和 clear 方法

4. 使用场景

当 key 所指向的对象在将来可能会消失时,可以使用 WeakMap,有利于防止内存泄漏。

三、Proxy 代理

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写

// 给目标对象定制拦截行为
var proxy = new Proxy(target, handler);

1. 数据劫持的方法

数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。

  • Object.definProperty()
  • Proxy