Le lleva a comprender fácilmente el mapa de la estructura de datos

Prefacio

Intención original : Recientemente estaba leyendo el libro "Comprensión profunda de Es6" . Antes no había aprendido completamente la gramática de Es6. También aproveché la etapa ocupada para volver a leer y organizar las notas para compartir con todos. no te gusta, no rocíes.

Adecuado para la multitud: el desarrollo primario de front-end, el desvío de los grandes.

Estructura de contenido: Conozca el mapa -> Uso básico -> Escenarios de aplicación

La estructura del mapa es similar a la sintaxis de la estructura de conjuntos que explicamos en la sección anterior "Comprender el conjunto de estructuras de datos, solo toma 5 minutos" . La diferencia es que la sintaxis del mapa es un formato de par clave-valor de matriz, y el mapa también maneja el problema de evitar la conversión de tipo forzada de clave-valor de objeto. El mapa se resuelve utilizando las características de las matrices. Todos sabemos que las matrices se pueden pasar en cualquier tipo de valor, por lo que la estructura del mapa también recibe todo tipo de valores. Acabamos de decir que el valor no se verá obligado a escribir como el objeto. Por ejemplo, 24 y "24" son dos tipos de relación, que no se afectarán entre sí.

Gramática básica

Map.set agregar

let map = new Map()
map.set("name", "蛙人")
console.log(map)

En el ejemplo anterior, Mapse crea un objeto. Como dijimos anteriormente, Mapes un objeto de matriz. También recibe un objeto de matriz, que es una matriz bidimensional. Los parámetros en el interior están en forma de pares clave-valor, y luego mapse establece el valor El map.setmétodo recibe dos parámetros, el primero El keysegundo es el valuevalor. En este momento, el objeto Mapa ha agregado un namevalor

Longitud del tamaño del mapa

let map = new Map()
map.set("name", "蛙人")
console.log(map.size) // 1

En el ejemplo anterior, el Mapobjeto proporciona sizeatributos de visualización para ver Mapvarios conjuntos de datos en la estructura actual .

Map.get get

let map = new Map()
map.set("name", "蛙人")
console.log(map.get("name")) // 蛙人

En el ejemplo anterior, usamos el Map.getmétodo para obtener el valor del atributo del objeto. Si obtiene un Mapobjeto que no existe, regrese undefined.

Map.has consulta

let map = new Map()
map.set("name", "蛙人")
console.log(map.has("name")) // true

En el ejemplo anterior, lo que se Map.hasdevuelve es un Booleanvalor, y se Mapbuscará en este si se encuentra y se devuelve true, de lo contrario se devolverá false, lo que generalmente se usa para detectar la existencia del valor en este Mapa.

Map.delete eliminar

let map = new Map()
map.set("name", "蛙人")
console.log(map.delete("name")) // true

En el ejemplo anterior, el Map.deletemétodo elimina un valor en la Mapestructura y regresa si el valor existe en la estructura, y regresa truesi elimina un valor inexistente false.

Map.clear clear

let map = new Map()
map.set("name", "蛙人")
map.clear()

En el ejemplo anterior, Map.cleareste método borrará Maptodos los atributos de la estructura.

Usos del mapa para cada uno

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

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

En el ejemplo anterior, puede ver que la Mapestructura es una matriz bidimensional, que tiene la forma de pares clave-valor. La estructura del mapa también se puede recorrer utilizando forEach, que recibe 3 parámetros:

El valor del objeto
El valor clave del objeto
Objeto en sí

Nota: Esto es diferente de la estructura Set. Los dos primeros parámetros de la estructura Set son valores de objeto. Esto se debe a que la estructura Set no tiene el concepto de un valor clave.

Mapa convertir objetos rápidamente

Mencionamos anteriormente que se Mappuede forEachatravesar, por lo que el análisis de bucle también puede formar un nuevo objeto. Entonces, el método Es6 proporciona una nueva forma de convertir rápidamente esta estructura en un objeto.

let map = new Map([
    ["name", "蛙人"],
    ["age", 24],
    ["sex", "male"]
])
console.log(Object.fromEntries(map)) // {name: "蛙人", age: 24, sex: "male"}

En el ejemplo anterior, la estructura de datos de Map se puede convertir rápidamente a un formato literal de objeto tradicional. También puede leer mi artículo "Resumen | ¿Qué características extiende el objeto Es6?" 》

La diferencia entre la estructura del conjunto y la estructura del mapa

Resumen de una frase: la estructura Set se utiliza principalmente para determinar si existe un valor en el objeto, y la estructura Map se utiliza principalmente para obtener el valor del objeto a partir de la estructura actual.

Escenarios de aplicación

Caché de datos

En algunos casos, debemos darnos cuenta. Solicito la API de la interfaz de backend por primera vez, y después de solicitarla, la guardaré en caché por segunda vez, en lugar de enviar la API de la interfaz.

let map = new Map()
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()

Abandonado si más hombre

Cuando estemos en requisitos de proyecto, definitivamente encontraremos un estado correspondiente a una operación, como sigue:

let text = ""
if (status == 1) {
    
    
    text = "启用"
} else if (status = 2) {
    
    
    text = "停用"
}
// 省略...

// 以上我们需要写一堆的 if else这样代码非常的繁琐冗余


let operation = new Map([
    [1, "启用"],
    [2, "停用"],
    [3, "注销"]
])
text = operation.get(status) // 这样实现代码非常简洁