preface

Original intention: recently read “Deep Understanding Es6” this book, before did not have a good comprehensive study of Es6 grammar, but also take advantage of the phase of not busy to read again to sort out the notes to share with you, do not like it.

For whom: Front end primary development, big guy detour.

Content structure: Map -> basic usage -> application scenarios

The Map syntax is similar to the set syntax we described in the previous section, “Understanding the Set of data Structures in 5 minutes.” The difference is that the Map syntax is an array key-value pair format, and the Map syntax also deals with preventing the cast of the object key. Maps are solved by using the array property. We all know that arrays can be passed values of any type, so the Map structure also accepts values of all types. We just said that values are not cast in the same way as objects. For example, 24 and “24” are two types that do not affect each other.

Basic grammar

The Map. Set to add

let map = new Map()
map.set("name"."Frogman")
console.log(map)
Copy the code

In the example above, we create a Map object, which is an array object. We also receive an array object, which is a two-dimensional array. The parameters in the array object are key-value pairs, and we set the Map value. The name value is added to the Map object

The Map. The size length

let map = new Map()
map.set("name"."Frogman")
console.log(map.size) / / 1
Copy the code

In the example above, the Map object provides the view size property to see how many sets of data the current Map structure has.

Map. Get access to

let map = new Map()
map.set("name"."Frogman")
console.log(map.get("name")) / / frogman
Copy the code

In example above, we use the map.get method to get the property value of the object. Return undefined if a Map object does not exist.

The Map from the query

let map = new Map()
map.set("name"."Frogman")
console.log(map.has("name")) // true
Copy the code

In the example above, map. has returns a Boolean value. It returns true if it is found in the Map, false if it is not.

Map. Delete delete

let map = new Map()
map.set("name"."Frogman")
console.log(map.delete("name")) // true
Copy the code

In example above, the map. delete method removes a value from the Map structure. It returns true if the value is deleted from the Map structure, and false if it is not.

The Map. The clear clear

let map = new Map()
map.set("name"."Frogman")
map.clear()
Copy the code

In example above, the map. clear method clears all the attributes in the Map structure.

The Map using the forEach

let map = new Map([["name"."Frogman"],
    ["age".24],
    ["sex"."male"]
])

map.forEach((value, key, self) = > {
    console.log(value, key, self) 
})
Copy the code

In the example above, you can see that the Map structure is a two-dimensional array of key-value pairs. The Map structure can also be traversed using forEach, which takes three arguments:

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

Note: This is different from the Set structure, where the first two arguments are object values, because the Set structure has no concept of a key value

Map transforms objects quickly

We’ve shown that maps can be forEach traversed, so that the loop resolution can also form a new object. The NEW Es6 method provides a quick way to turn 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"}
Copy the code

In the example above, you can quickly convert the Map data structure into a traditional object literal format. Can also look at me! The article “the summary | Es6 object extends what features?”

The difference between the Set structure and Map structure

The Set structure is used to determine whether a value exists in the object, and the Map structure is used to obtain the value of the object from the current structure.

Application scenarios

Data cache

In some cases we need to implement, I ask for the backend Api the first time, and then after I ask for the backend Api the second time I go to cache and I don’t send the Api.

let map = new Map(a)function fn() {
    if(! map.has("api")) {
        let res = axios.get("api")
        map.set("api", res.data)
        return res.data
    } else {
	return map.get("api")
    }
}
fn()
Copy the code

Discard the If Else man

When we are in the project requirements, we will definitely encounter a state corresponding to an operation, as follows:

let text = ""
if (status == 1) {
    text = "Enable"
} else if (status = 2) {
    text = "Stop"
}
/ / to omit...

// We need to write a bunch of if else's to make the code very tedious and redundant


let operation = new Map([[1."Enable"],
    [2."Stop"],
    [3."Cancel"]
])
text = operation.get(status) // This implementation code is very simple
Copy the code

Thank you

Thank you in spite of your busy schedule to open this article, I hope you can be helpful, if there is a problem welcome to corrections.

I am frogman, if you think this is ok, please click like.