Map for easy understanding of data structure



Original intention:I’ve been reading recentlyDeep understanding of ES6This book, I haven’t learned ES6 grammar thoroughly before, so I’ll read it again when I’m not busy. I’ll share my notes with you. Don’t spray if you don’t like it.

Suitable for people:The primary development of the front-end, big man detour.

Content structure:Understanding Map > basic usage > application scenarios

The map structure is similar to the set structure syntax we explained in the previous sectionUnderstanding data structure: only 5 minutesThe difference is that map syntax is an array key value pair format, and map also deals with the problem of preventing the forced type conversion of object key values. Map is solved by using the array property. We all know that the array can pass in any type value, so the map structure also receives all type values. We have just said that values will not be forced to type conversion like objects. For example, “24” and “24” are two types of relationships, which do not affect each other.

Basic grammar

Map.set add

let map = new Map()
Map. Set ("name", "frogman")

In the example above, create aMapObject, as we said aboveMapIs an array object, which also receives an array object, that is, a two-dimensional array, in which the parameters are the form of key value pairs, and then setmapValue,map.setMethod receives two parameters, the former iskeyThe value of the latter isvalueValue. The map object is addednamevalue

Map.size length

let map = new Map()
Map. Set ("name", "frogman")
console.log(map.size) // 1

In the example above,MapObject provides a viewsizeProperty to view the currentMapStructure has several sets of data.


let map = new Map()
Map. Set ("name", "frogman")
Console.log (map. Get ("name") // Frogman

In the example above, we useMap.getMethod to get the property values of the object. If you get oneMapObject does not exist in theundefined

Map.has query

let map = new Map()
Map. Set ("name", "frogman")
console.log(map.has("name")) // true

In the example above,Map.hasWhat is returned is aBooleanIt’s worth it. I’ll go to thisMapIf found, returntrueOtherwise, returnfalse, which is generally used to detect the existence of this value in this map.

Map.delete delete

let map = new Map()
Map. Set ("name", "frogman")
console.log(map.delete("name")) // true

In the example above,Map.deleteMethod to delete a value in the structure if it existsMapStructure to delete the returntrueTo delete a nonexistent valuefalse


let map = new Map()
Map. Set ("name", "frogman")

In the example above,Map.clearThis method will clear theMapStructure.

Map uses foreach

let map = new Map([
    ["name", "frogman],
    ["age", 24],
    ["sex", "male"]

map.forEach((value, key, self) => {
    console.log(value, key, self) 

In the example above, you can see thatMapStructure is a two-dimensional array, which is in the form of key value pairs. The map structure can also be traversed with foreach, which takes three parameters:

  • The value of the object
  • The key value of the object
  • The object itself

be careful:Different from the set structure, the first two parameters of the set structure are object values, because the set structure does not have the concept of key value

Map fast conversion object

We talked about it aboveMapsureforEachTraversal, so that loop parsing can also form a new object. So the ES6 method provides a new way to quickly convert this structure into an object.

let map = new Map([
    ["name", "frogman],
    ["age", 24],
    ["sex", "male"]
Console.log (object. Fromentries (map)) // {Name: "frogman", age: 24, sex: "male"}

In the above example, the data structure map can be quickly converted to the traditional object literal format. You can also read my articleSummary what features does ES6 object extend

The difference between set structure and map structure

In a word: set structure is mainly used to determine whether a value exists in the object, while map structure is mainly used to obtain the value of the object from the current structure.

Application scenarios

Data cache

In some cases, if we want to implement the requirement, I request the background interface API for the first time. When I request it, I leave the cache for the second time, not the sending interface API.

let map = new Map()
function fn() {
    if (!map.has("api")) {
        let res = axios.get("api")
    } else {
    return map.get("api")

If else

When we need a project, we will definitely encounter a state corresponding to an operation, as follows:

let text = ""
if (status == 1) {
    Text = "enable"
} else if (status = 2) {
    Text = "disabled"

//Above we need to write a pile of if else, so the code is very cumbersome and redundant

let operation = new Map([
    [1, "enable"],
    [2, "stop"],
    [3, "write off"]
Text = operation. Get (status) // the implementation code is very concise


Thank you for opening this article at the middle of your busy schedule. I hope it can help you. If you have any questions, please correct them.

I’m frog man. If you think it’s OK, please like it.

Interested partners can joinFront end entertainment exchange groupWelcome to exchange and discuss

Good articles in the past

Do you know all the JavaScript tips used in these jobs

Understanding the set of data structure, only 5 minutes

How to solve some git commands and special problem scenarios

Deconstruction: making data access more convenient

Do you really understand the properties of functions in ES6

The difference among VaR, let and Const