When looking at vue3 source code, SEE WeakMap and WeakSet, not very clear, usually only Set to do array to heavy. So take this opportunity to learn and fill in the blanks.

Set and Map are mainly used in data reorganization and data storage

A Set is a data structure called a collection, and a Map is a data structure called a dictionary

Map

MapThe difference withObjectThe most important feature of the web store is that it can store any type ofkey.

Here’s an example:

let map = new Map(a)let john = { name: 'John' }

map.set('1'.'str1') // a string key
map.set(1.'num1') // a numeric key
map.set(true.'bool1') // a boolean key
map.set(john, 123) // a object key

console.log(map.get(1)) // 'num1'
console.log(map.get('1')) // 'str1'
console.log(map.get(true)) // 'bool1'
console.log(map.get(john)) / / 123
console.log(map.size) / / 4
Copy the code

A Map preserves the key type, whereas an Object converts the key to a string (the key of an Object can also be a Symbol).

Properties and operations:

  • sizeProperty: ReturnsMapThe total number of members of a structure
  • Map.prototype.set(key, value)To:MapTo add or update elements
  • Map.prototype.get(key)Reading:keyCorresponding key value, if can’t findkeyTo return toundefined
  • Map.prototype.has(key)Judge:MapObjectKeyThe corresponding value is returnedtrueOtherwise returnfalse
  • Map.prototype.delete(key):deleteMethod to delete a key and returntrue. If the deletion fails, returnfalse
  • Map.prototype.clear(): Clears all members with no return value

Traversal method:

  • Map.prototype.keys(): returns a traverser for key names.
  • Map.prototype.values(): returns a traverser for key values.
  • Map.prototype.entries(): returns a traverser for all members.
  • Map.prototype.forEach(): Traverses each Map member.

WeakMap

WeakMap structure is similar to Map structure, the difference lies in:

The key name of a WeakMap can only be an object, which is a weak reference object. If there is no other reference to the same object as the key, the object will be garbage collected (the corresponding key becomes invalid), so WeakMap cannot be traversed.

Set

SetThe biggest difference from arrays is that the members are unordered and unique, and can be of any type.

The attributes, operation methods, and traversal methods of Set are similar to those of Map

WeakSet

The difference between WeakSet and Set is that its members are all objects and are weakly referenced, that is, garbage collection mechanism does not consider the application of WeakSet to the object.

application

After learning the above, you can choose your own data structure according to your needs.

The following describes the application scenarios:

  1. Array to heavy
Array.from(new Set([1.2.3.1.2])) / / [1, 2, 3]
Copy the code
  1. Implement and set(Union)And the intersection(Intersect)And the difference set
let set1 = new Set([1.2.3])
let set2 = new Set([4.3.2])

let intersect = new Set([...set1].filter(value= > set2.has(value))) // Set {2, 3}
let union = new Set([...set1, ...set2]) // Set {1, 2, 3, 4}
let difference = new Set([...set1].filter(value= >! set2.has(value)))// Set {1}
Copy the code
  1. WeakMap, VUe3 source track function collection dependent part
// Whether dependencies should be collected
let shouldTrack = true
// Effect currently active
let activeEffect
// Raw data object map
const targetMap = new WeakMap(a)function track(target, type, key) {
  if(! shouldTrack || activeEffect ===undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if(! depsMap) {// Each target corresponds to a depsMap
    targetMap.set(target, (depsMap = new Map()))}let dep = depsMap.get(key)
  if(! dep) {// Each key corresponds to a deP set
    depsMap.set(key, (dep = new Set()))}if(! dep.has(activeEffect)) {// Collect the currently active effects as dependencies
    dep.add(activeEffect)
    // The currently active effect collects the DEP collection as a dependency
    activeEffect.deps.push(dep)
  }
}
Copy the code