Map JavaScript data structure

Discover the Map data structure introduced in ES6 to associate data with keys. Before the introduction, people usually used objects as maps by associating some objects or values with specific key values.

What is a map

The Map data structure allows data to be associated with keys.

Before ES6

ECMAScript6 (also known as ES2015) introduces the Map data structureJavaScriptThe world, andput

Before its introduction, people usually used objects as maps by associating certain objects or values with specific key values:

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

Input map

ES6 introduces the Map data structure, which provides us with appropriate tools to deal with this type of data organization.

Initialize the Map by calling the following method:

const m = new Map()

Add items to the map

you can use itsetmethod:

m.set('color', 'red')
m.set('age', 2)

Get items from the map by pressing the button

You can use to extract items from the mapget:

const color = m.get('color')
const age = m.get('age')

Delete items from the map by pressing the key

usedelete()method:

m.delete('color')

Remove all items from the map

useclear()method:

m.clear()

Check whether the map contains items by key

usehas()method:

const hasColor = m.has('color')

Find the number of items in the map

usesizeproperty:

const size = m.size

Initialize the map with values

You can use a set of values to initialize the map:

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

Map key

Just like any value (object, array, string, number) can be used as the value of the key-value entry of a feature,Any value can be used as a key, Even objects.

If you try to use to get a key that doesn't existget()Step out of the map and it will returnundefined.

Strange situation hardly found in real life

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test

const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

Traverse the map

Traverse the map key

Map providedkeys()The method we can use to iterate over all keys:

for (const k of m.keys()) {
  console.log(k)
}

Traverse the map values

The Map object providesvalues()The method we can use to iterate over all values:

for (const v of m.values()) {
  console.log(v)
}

Traverse the map key, value pair

The Map object providesentries()The method we can use to iterate over all values:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

Can be simplified to

for (const [k, v] of m) {
  console.log(k, v)
}

Convert to array

Convert the map key to an array

const a = [...m.keys()]

Convert map value to array

const a = [...m.values()]

Weak map

WeakMap is a special kind of map.

In the map object, items are never garbage collected. On the contrary, WeakMap allows free garbage collection of all its items. Each key of WeakMap is an object. When the reference to the object is lost, the value can be garbage collected.

The main differences are as follows:

You cannot traverse the keys or values (or key values) of WeakMap
You cannot clear all items from WeakMap
You can't check its size

WeakMap exposes those methods, which are equivalent to Map methods:

get(k)
set(k, v)
has(k)
delete(k)

The use case of WeakMap is not as obvious as the use case of Map. You may never find their requirements, but in essence, it can be used to build memory-sensitive caches without interfering with garbage collection or performing careful packaging and information. hide.

Download mine for freeJavaScript beginner's manual