map与weakmap_Map和WeakMap

Map

含义和基本用法

JavaScript 的对象(Object)，本质上是键值对的集合(Hash 结构)，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适

const m = new Map();

const o = { p: 'Hello World' };

m.set(o, 'content')

m.get(o) // "content"

m.has(o) // true

m.delete(o) // true

m.has(o) // false

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组

const map = new Map([

['name', '张三'],

['title', 'Author']

]);

map.size // 2

map.has('name') // true

map.get('name') // "张三"

map.has('title') // true

map.get('title') // "Author"

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心

const map = new Map();

map.set(['a'], 555);

map.get(['a']) // undefined

如果 Map 的键是一个简单类型的值(数字、字符串、布尔值)，则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键

实例的属性和操作方法

size属性 返回成员总数

set(key,value) 设置键值对，返回Map结构

get(key) 读取key对应的值，找不到就是undefined

has(key) 返回布尔值，表示key是否在Map中

delete(key) 删除某个键，返回true，失败返回false

clear() 清空所有成员，没有返回值

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

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

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

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

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

需要特别注意的是，Map 的遍历顺序就是插入顺序。遍历行为基本与set的一致

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

Map 转为数组

const myMap = new Map()

.set(true, 7)

.set({foo: 3}, ['abc']);

[...myMap]

数组 转为 Map

new Map([

[true, 7],

[{foo: 3}, ['abc']]

])

// Map {

// true => 7,

// Object {foo: 3} => ['abc']

// }

Map 转为对象

如果所有 Map 的键都是字符串，它可以转为对象

function strMapToObj(strMap) {

let obj = Object.create(null);

for (let [k,v] of strMap) {

obj[k] = v;

}

return obj;

}

const myMap = new Map()

.set('yes', true)

.set('no', false);

strMapToObj(myMap)

// { yes: true, no: false }

对象转为 Map

function objToStrMap(obj) {

let strMap = new Map();

for (let k of Object.keys(obj)) {

strMap.set(k, obj[k]);

}

return strMap;

}

objToStrMap({yes: true, no: false})

// Map {"yes" => true, "no" => false}

// ["blue", "blue"]

Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {

return JSON.stringify(strMapToObj(strMap));

}

let myMap = new Map().set('yes', true).set('no', false);

strMapToJson(myMap)

// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON

function mapToArrayJson(map) {

return JSON.stringify([...map]);

}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);

mapToArrayJson(myMap)

// '[[true,7],[{"foo":3},["abc"]]]'

JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串

function jsonToStrMap(jsonStr) {

return objToStrMap(JSON.parse(jsonStr));

}

jsonToStrMap('{"yes": true, "no": false}')

// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是数组转为 JSON 的逆操作

function jsonToMap(jsonStr) {

return new Map(JSON.parse(jsonStr));

}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

// Map {true => 7, Object {foo: 3} => ['abc']}

WeakMap

含义

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

WeakMap与Map的区别有两点：

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

WeakMap的键名所指向的对象，不计入垃圾回收机制

WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。

const e1 = document.getElementById('foo');

const e2 = document.getElementById('bar');

const arr = [

[e1, 'foo 元素'],

[e2, 'bar 元素'],

];

//e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。

//一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');

wm.get(element) // "some information"

WeakMap 的语法

WeakMap只有四个方法可用：get()、set()、has()、delete()。

无法被遍历，因为没有size。无法被清空，因为没有clear()，跟WeakSet相似

WeakMap 应用的典型

let myElement = document.getElementById('logo');

let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {

let logoData = myWeakmap.get(myElement);

logoData.timesClicked++;

}, false);

上面代码中，myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险