ES6 Set and Map data structure

1. Set

Basic usage

ES6 a new data structure Set It is 数组 array, but the values of members are unique and have no duplicate values.

Set itself is a 构造函数 generates the Set data structure.

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

The above code adds members to the Set structure through the add() method, and the results show that the Set structure does not add duplicate values.

The Set function can accept an array (or other data structure with an iterable interface) as an argument for initialization.

// 例一
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
// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

In the above code, examples one and two are set functions that accept arrays as arguments, and example three accepts objects like arrays as arguments.

The above code also shows a way to remove duplicate members of an array.

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

The above method can also be used to remove duplicate characters from strings.

[...new Set('ababbc')].join('')
// "abc"

Type conversion does not occur when you add values to Set so 5 and "5" are two different values. Set internally determines whether the two values are different, using 精确相等运算符 an algorithm called “Same-value-zero equality” which is similar to the Precision Equality operator, the main difference being that when you add a value to Set, you think that NaN is equal to yourself, and the Precision Equality operator thinks that NaN is not equal to yourself.

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

The above code adds NaN to the Set instance twice, but only one. This indicates that within Set, the two NaNs are equal.

In addition, the two objects are always not equal.

let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

The code above indicates that two empty objects are considered two values because they are not equal.

The properties and methods of the Set instance

Instances of the Set structure have the following properties.

• Set.prototype.constructor: Constructor, the default is the Set function.
• Set.prototype.size: Returns the total number of members of the Set instance.

The methods for Set instances fall into two broad categories: 操作方法 (for operating data) and the 遍历方法 (for traversing members). Here are four ways to do this.

• Set.prototype.add (value): Add a value that returns the Set structure itself.
• Set.prototype.delete (value): Delete a value and return a Boolean value to indicate whether the deletion was successful.
• Set.prototype.has (value): Returns a Boolean value that indicates whether the value is a member of Set.
• Set.prototype.clear(): Clear all members with no return value.

Examples of these properties and methods are as follows.

s.add(1).add(2).add(2);
// 注意2被加入了两次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false

Here's a comparison to see if the Object structure and set structure are written differently in determining whether to include a key.

// 对象的写法
const properties = {
  'width': 1,
  'height': 1
};
if (properties[someName]) {
  // do something
}
// Set的写法
const properties = new Set();
properties.add('width');
properties.add('height');
if (properties.has(someName)) {
  // do something
}

The Array.from method converts the Set structure into an array.

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

This provides another way to remove duplicate members of an array.

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]

Traverse the operation

Instances of set structures have four traversal methods that can be used to traverse members.

• Set.prototype.keys(): The traverser that returns the key name
• Set.prototype.values(): The traverser that returns the key value
• Set.prototype.entries(): The traverser that returns the key value pair
• Set.prototype.forEach(): Use the callback function to traverse each member

In particular, Set's Set order is 插入 Order. This feature is sometimes useful, such as using Set to save a list of callback functions, which guarantees that the call will be made in the order in which it was added.

（1） keys() ， values() ， entries()

keys values method, entries method all return 遍历器对象 objects (see chapter Iterator Objects for details). Because the Set structure does not have a key name, only the key value (or the key name and key value are the same keys values exactly the same.

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

In the above code, entries method 键名 returns 键值 a traverser that includes both the key name and the key value, so that each time an array is output, its two members are exactly equal.

Set of the Set structure is 可遍历 by default, and its default traverser generator is its value method.

Set.prototype[Symbol.iterator] === Set.prototype.values
// true

This means that the values method values and used for...of through set.

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

（2） forEach()

Instances of the Set structure, like arrays, also forEach method that performs an operation on each member without returning a value.

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

As the code above explains, the parameters of the forEach method are a handler. T he parameters of the function are consistent with the forEach of the array, followed by the key value, key name, and the collection itself (the parameter was omitted in the example above). It is important to note here that the key name of the Set structure is the key value (both are the same value), so the first argument is always the same as the value of the second argument.

In addition, forEach method can have a second argument that represents the this object inside the binding handler.

(3) Traversing the app

扩展运算符 ( ... I nternal use for...of so it can also be used Set structures.

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

扩展运算符 operator with the Set structure, you can remove duplicate members of the array.

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

Also, the map and filter filter can also be used indirectly for Set.

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构：{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构：{2, 4}

So you can easily implement Union, Intersect, and Difference with Set.

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}
// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

If you want to change the original Set structure synchronously during the traversal operation, there is currently no direct method, but there are two workables. One uses the original Set structure to map out a new structure and then assigns it to the original Set structure;

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

The above code provides two ways to change the original Set structure directly during the traversal operation.

2. WeakSet

Meaning

WeakSet structure is Set and is a collection of non-repeating values. However, it differs from Set in two.

First, the members of WeakSet can only be objects, not other types of values.

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

The above code attempted to add a value and Symbol value to WeakSet, which resulted in an error because WeakSet could only place objects.

Second, the objects in WeakSet are weak references, meaning that the garbage collection mechanism does not take into account weakSet's reference to the object, that is, if no other objects reference the object, the garbage collection mechanism automatically reclaims the memory occupied by the object, not considering that the object still exists in WeakSet.

This is because the garbage collection mechanism relies on a reference count, and if the number of references to a value is not 0, the garbage collection mechanism does not free up this memory. A t the end of the use of this value, you sometimes forget to undring, causing memory to not be freed, which can lead to memory leaks. R eferences in WeakSet do not count in the garbage collection mechanism, so there is no such problem. T herefore, WeakSet is suitable for temporarily storing a set of objects, as well as information that is bound to the object. As long as these objects disappear externally, their references in WeakSet disappear automatically.

Because of this feature above, the members of WeakSet are not suitable for reference because it disappears at any time. In addition, because of the number of members inside WeakSet, depending on whether the garbage collection mechanism is running, it is likely that the number of members before and after running is different, and when the garbage collection mechanism runs is unpredictable, ES6 states that WeakSet cannot be traversed.

The same features apply to the WeakMap structure to be described later in this chapter.

Grammar

WeakSet is a constructor 构造函数 use new command to create a WeakSet data structure.

const ws = new WeakSet();

As a constructor, WeakSet can accept an array or an array-like object as an argument. ( In fact, any object with an Iterable interface can be used as an argument to WeakSet.) All members of the array automatically become members of the WeakSet instance object.

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

In the code above, a is an array with two members, both of which are arrays. Using a as an argument to the WeakSet constructor, the member of a automatically becomes a member of the WeakSet.

Note that the members of the a array become members of WeakSet, not the a array itself. This means that the members of the array can only be objects.

const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)

In the code above, if the member of array b is not an object, joining WeakSet will report an error.

The WeakSet structure has three methods.

• WeakSet.prototype.add(value): Add a new member to the WeakSet instance.
• WeakSet.prototype.delete(value): Clears the specified member of the WeakSet instance.
• WeakSet.prototype.has (value): Returns a Boolean value that indicates whether a value is in the WeakSet instance.

Here's an example.

const ws = new WeakSet();
const obj = {};
const foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo);    // false
ws.delete(window);
ws.has(window);    // false

WeakSet does not have a size property and there is no way to traverse its members.

ws.size // undefined
ws.forEach // undefined
ws.forEach(function(item){ console.log('WeakSet has ' + item)})
// TypeError: undefined is not a function

The above code attempted to get the size and forEach properties, and the results were not successful.

WeakSet cannot be traversed because members are weak references that can disappear at any time, and the traversal mechanism does not guarantee the existence of members, and it is likely that members will not be available as soon as the traversal is over. One use of WeakSet is to store DOM nodes without worrying about memory leaks when they are removed from the document.

Here's another example of WeakSet.

const foos = new WeakSet()
class Foo {
  constructor() {
    foos.add(this)
  }
  method () {
    if (!foos.has(this)) {
      throw new TypeError('Foo.prototype.method 只能在Foo的实例上调用！');
    }
  }
}

The above code guarantees that Foo's instance method can only be called on Foo's instance. The benefit of using WeakSet here is that foos references to instances are not counted in the memory recycling mechanism, so when deleting instances, there is no need to consider foos and no memory leaks.

Map

Meaning and basic usage

JavaScript's 对象 (Object) is essentially 键值对 key-value pairs (Hash structure), but traditionally only strings are used 字符串 keys. This has put a lot of restrictions on its use.

const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

The code above was intended to use a DOM node as the key to the object data, but because the object only accepts strings as key names, element is automatically converted to strings . . . object HTMLDivElement.

To solve this problem, ES6 provides a Map data structure. I t is similar to an object and is a collection of key value pairs, but the scope of a key is not limited to strings, and various types of values, including objects, can be used as keys. T hat is, the Object structure provides a "string-value" correspondence, and the Map structure provides a "value-value" correspondence, which is a better Hash structure implementation. Map is more appropriate than Object if you need a "key value pair" data structure.

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

The above code uses the set method of the Map structure, treats object o as a key to m, then reads the key using the get method, and then deletes the key using the delete method.

The example above shows how to add members to map. A s a constructor, Map can also accept an array as an argument. The members of the array are arrays that represent key value pairs.

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"

When the above code creates a new Map instance, it specifies two keys name and title.

The Map constructor accepts the array as an argument and actually executes the following algorithm.

const items = [
  ['name', '张三'],
  ['title', 'Author']
];
const map = new Map();
items.forEach(
  ([key, value]) => map.set(key, value)
);

In fact, it's not just arrays, any data structure of an array with an Iterator interface and each member is a two-element array (see Chapter Iterator) can be used as an argument to the Map constructor. This means that both Set and Map can be used to generate new Map.

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

In the code above, we use Set Map respectively, as arguments to the Map constructor, and the result is that the new Map object is generated.

If you assign more than one value to the same key, the subsequent value overrides the previous value.

const map = new Map();
map
.set(1, 'aaa')
.set(1, 'bbb');
map.get(1) // "bbb"

The above code assigns key 1 twice in a row, and the 1st value overrides the previous value.

If an unknown key is read, undefined is returned.

new Map().get('asfddfsasadf')
// undefined

Note that the Map structure treats the same object as the same key only if it is referenced. Be very careful about that.

const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

The set and get methods in the code above are surfaced for the same key, but in fact these are two different array instances with different memory addresses, so the get method cannot read the key and returns undefined.

Similarly, two instances of the same value are considered two keys in the Map structure.

const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
.set(k1, 111)
.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

In the above code, the values of the variables k1 and k2 are the same, but they are considered two keys in the Map structure.

As you know, Map's keys are actually bound to memory addresses, which are considered two keys as long as the memory addresses are different. This solves the problem of collision of properties of the same name, and when we extend someone else's library, if we use the object as the key name, we don't have to worry about our own property having the same name as the original author's property.

If map's key is a simple type of value (number, string, Boolean value), Map treats it as a key, such as 0 and -0, as long as the two values are strictly equal, and Boolean true and string true are two different keys. I n addition, undefined and null are two different keys. Although NaN is not strictly equivalent to itself, Map treats it as the same key.

let map = new Map();
map.set(-0, 123);
map.get(+0) // 123
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3
map.set(NaN, 123);
map.get(NaN) // 123

The properties and operation methods of the instance

Examples of map structures have the following properties and methods of operation.

(1) size property

The size property returns the total number of members of the Map structure.

const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

（2）Map.prototype.set(key, value)

The set method sets the key value for the key name key to value, and then returns the entire Map structure. If the key already has a value, the key value is updated, otherwise the key is generated new.

const m = new Map();
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

The set method returns the current Map object, so you can write in chains.

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

（3）Map.prototype.get(key)

The get method reads the key value corresponding to the key and returns the undefined if the key cannot be found.

const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello)  // Hello ES6!

（4）Map.prototype.has(key)

The has method returns a Boolean value that indicates whether a key is in the current Map object.

const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

（5）Map.prototype.delete(key)

The delete method removes a key and returns true. If the deletion fails, false is returned.

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true
m.delete(undefined)
m.has(undefined)       // false

（6）Map.prototype.clear()

The clear method clears all members and does not return a value.

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

The traversal method

Map structure native provides three traverser 生成函数 traversal 遍历方法

• Map.prototype.keys(): The traverser that returns the key name.
• Map.prototype.values(): The traverser that returns the key value.
• Map.prototype.entries(): Returns the traverser for all members.
• Map.prototype.forEach(): Traverses all members of the Map.

It is important to note that the Map order of map is 插入顺序

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

The last example of the code above, which represents the default traverser interface (Symbol.iterator property) of the Map structure, is the entries method.

map[Symbol.iterator] === map.entries
// true

The Map structure is converted to an array structure, and the quicker way to do this is to use an extension operator (... ）。

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

Combined with the array's map method, the filter method, you can implement map traversal and filtering (map itself does not have a map and filter method).

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

In addition, Map has a forEach method, similar to the array's forEach method, that can also be traversed.

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

The forEach method can also accept a second argument to bind this .

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};
map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

In the code above, this of the callback function for the Each method points to the reporter.

Transform with other data structures

(1) Map becomes an array

As mentioned earlier, the most convenient way for Map to turn into an array is to use an extension operator (... ）。

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

(2) Array to Map

By passing the array into the Map constructor, you can convert it to Map.

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

(3) Map becomes an object

If all of Map's keys are strings, it can be turned into objects without loss.

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 }

If there is a key name that is not a string, the key name is converted to a string and then used as the key name of the object.

(4) The object is converted to Map

The object can be converted to Map through Object.entries().

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

In addition, you can implement a conversion function yourself.

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}

(5) Map becomes JSON

Map to JSON distinguishes between two situations. In one case, map's key names are strings, at which point you can choose to convert to object 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}'

In another case, Map has a key name that is non-string, at which point you can choose to convert to array 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"]]]'

(6) JSON turns to Map

JSON turns to Map, and normally all key names are strings.

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

However, there is a special case where the entire JSON is an array, and each array member itself is an array with two members. A t this point, it can be converted to Map one by one. This is often an inverse operation of map-to-array JSON.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

4. WeakMap

Meaning

WeakMap structure is similar to the Map structure and is also used to 键值对 pairs.

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2
// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

There are two differences between WeakMap and Map.

First, WeakMap accepts only objects as key names (except null) and not other types of values as key names.

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

In the code above, if you use the values 1 and Symbol as the key names for WeakMap, you will report an error.

Second, the object to which WeakMap's key name points does not count toward the garbage collection mechanism.

WeakMap is designed so that sometimes we want to store some data on an object, but this creates a reference to that object. Take a look at the example below.

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

In the code above, e1 and e2 are two objects, and we add some text descriptions to them through the arr array. This results in arr references to e1 and e2.

Once these two objects are no longer needed, we must manually remove the reference, otherwise the garbage collection mechanism will not free up the memory consumed by e1 and e2.

// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

It's obviously inconvenient to write like this. Once you forget to write, there is a memory leak.

WeakMap was born to solve this problem, and its key names refer to objects that are weak references, i.e. garbage collection mechanisms do not take that reference into account. T herefore, as long as the other references to the referenced object are cleared, the garbage collection mechanism frees up the memory occupied by the object. That is, once no longer needed, the key name objects and corresponding key value pairs in WeakMap automatically disappear without manually deleting the reference.

Basically, you can use WeakMap if you want to add data to an object without interfering with the garbage collection mechanism. A typical scenario is to add data to the DOM element of a Web page and you can use the WeakMap structure. When the DOM element is cleared, its corresponding WeakMap record is automatically removed.

const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'some information');
wm.get(element) // "some information"

In the code above, create a new Weakmap instance first. A DOM node is then stored as a key name in the instance, and some additional information is stored as a key value in WeakMap. At this point, the reference to element in WeakMap is a weak reference and is not counted as a garbage collection mechanism.

That is, the reference count for the DOM node object above is 1, not 2. A t this point, once the reference to the node is eliminated, the memory it consumes is freed by the garbage collection mechanism. This key value pair saved by Weakmap also disappears automatically.

In short, WeakMap's special case is that the object to which its key corresponds may disappear in the future. The WeakMap structure helps prevent memory leaks.

Note that WeakMap weakly refers to only the key name, not the key value. The key value is still a normal reference.

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

In the code above, the key value obj is a normal reference. Therefore, even if the reference to obj is eliminated outside of WeakMap, the reference inside WeakMap still exists.

The syntax of WeakMap

The main difference between WeakMap and 遍历操作 Map in the API is two, one is that there is no traversal operation (i.e., no keys(), values() and entries() methods, and size property. B ecause there is no way to list all key names, whether a key name exists is completely unpredictable and is related to whether the garbage collection mechanism is working. T his moment can get the key name, the next moment garbage collection mechanism suddenly run, this key name is gone, in order to prevent uncertainty, the unified provisions can not get the key name. T he second is that the clear method is not supported if it cannot be emptied. Therefore, WeakMap has only four methods available: get(), set(), has(), delete().

const wm = new WeakMap();
// size、forEach、clear 方法都不存在
wm.size // undefined
wm.forEach // undefined
wm.clear // undefined

The purpose of WeakMap

As you said earlier, a typical scenario for a WeakMap application is DOM 节点 is the key 键名 Here's an example.

let myWeakmap = new WeakMap();
myWeakmap.set(
  document.getElementById('logo'),
  {timesClicked: 0})
;
document.getElementById('logo').addEventListener('click', function() {
  let logoData = myWeakmap.get(document.getElementById('logo'));
  logoData.timesClicked++;
}, false);

In the code above, document.getElementById ('logo') is a DOM node that updates its status whenever a click event occurs. W e put this state as a key value in WeakMap, and the corresponding key name is the node object. Once this DOM node is removed, the state automatically disappears and there is no risk of memory leakage.

Another use of WeakMap is to deploy private properties.

const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}
const c = new Countdown(2, () => console.log('DONE'));
c.dec()
c.dec()
// DONE

In the code above, the two internal properties of the Countdown class, _counter and _action, are weak references to the instance, so if you delete the instance, they disappear without causing a memory leak.