Entonces, aprendimos sobre conjuntos.
Ahora, es hora de aprender
sobre la otra nueva estructura de datos de JavaScript
y eso son los mapas.
Y déjame empezar diciéndote
que los mapas son mucho más útiles que los conjuntos.
Entonces, ¿qué es exactamente un mapa?
Bueno, ciertamente no es lo mismo
que usamos en la vida real
para encontrar nuestro camino alrededor.
Ahora, en lugar de JavaScript,
un mapa es una estructura de datos
que podemos usar para mapear valores a claves.
Entonces, como un objeto
los datos se almacenan en pares de valores clave en los mapas.
Ahora, la gran diferencia entre objetos y mapas
es que en mapas, las claves pueden ser de cualquier tipo
y esto puede ser enorme.
Entonces, en los objetos, las claves son básicamente siempre cadenas.
Pero en los mapas podemos tener cualquier tipo de clave.
Incluso podrían ser objetos, matrices u otros mapas.
Entonces, eso puede conducir a cosas realmente geniales y avanzadas.
Entonces, vamos a crear un mapa de restaurantes aquí.
Entonces, solo lo llamo descansar aquí.
Y así, usamos de nuevo el constructor
tal como lo usamos para el set,
pero este se llama mapa.
Y la forma más fácil de crear un mapa
es crear un mapa vacío
así como esto
sin pasar nada.
Y luego, para llenar el mapa
podemos usar el método set.
Y luego aquí, pasamos a los argumentos.
El primero es el nombre de la clave.
Entonces, llamémoslo nombre.
Y luego, el nombre del propio restaurante.
Lo sé, italiano clásico.
Y, como ves, que este método set es bastante similar
al método add que teníamos en sets.
Entonces, ambos nos permiten agregar un nuevo elemento.
a la estructura de datos.
Y recuerda que podemos usar cualquier tipo de dato que queramos.
Entonces, digamos que el restaurante tiene dos ubicaciones.
Entonces, podemos crear una clave con un número.
No tiene que ser una cadena.
Entonces, digamos que uno está en Florencia, Italia.
Y el otro,
Entonces, un número dos
está en Lisboa, Portugal.
Y llamando al método set así
no solo actualiza el mapa al que se llama,
pero también devuelve el mapa.
Entonces, déjame mostrarte eso aquí.
Bien, así es como se ve el conjunto.
después de agregar esta clave número dos.
(clic del ratón)
Entonces, aquí tenemos las entradas.
el primero es el nombre
que luego se asigna a Classico Italiano.
Y luego, los otros dos que acabamos de agregar.
Ahora, el hecho de que el método set
en realidad devuelve el mapa actualizado
nos permite cambiar el método establecido de esta manera.
Entonces, establezcamos categorías aquí
como una matriz y simplemente tomaré eso desde aquí arriba.
Bien, una vez más,
el valor puede ser cualquier cosa.
Y ahora, puedo encadenar el siguiente set aquí.
(clic del ratón)
Entonces, ahora puedo decir abrir y configurarlo en 11.
Y de nuevo, puedo cambiar el siguiente
y decir cerrar a las 23.
Entonces, guardémoslo.
Y esto luego formateará esto muy bien.
Entonces, de nuevo, llamando al método set
devuelve el mapa actualizado.
Y así, todo esto es ahora el mapa actualizado.
Y así, podemos volver a llamar a set en ese mapa.
Y, podemos continuar esto aún más.
Entonces, eso no es en realidad
incluso use booleanos como la clave aquí.
Y podemos decir que queremos mapear True
a Estamos abiertos.
(clic del ratón)
Y luego, también podemos establecer False
a Estamos cerrados.
Y, veremos en un minuto
cómo esto puede llegar a ser útil, ¿de acuerdo?
Ahora, para leer datos de un mapa
usamos el método Get.
Y así, ese método get está disponible en todos los mapas.
Entonces, todo lo que tenemos que hacer es pasar el nombre de la clave.
Entonces, veamos.
Vamos a registrar esto en la consola en realidad.
Y, dupliquémoslo aquí y también registremos True.
Y, verá, que la clave Verdadera aquí se mapea
Estamos abiertos
y nombró a Classico Italiano por supuesto.
Y aquí, cuando tengamos los elementos
por supuesto, el tipo de datos de los asuntos clave.
Entonces, si lo intentamos a través de la cuerda
entonces eso sería indefinido.
Y, si tratamos de recuperar uno, como una cadena,
eso también sería indefinido.
Porque aquí tenemos uno, el número, como clave.
Y así, con esto obtendremos Firenze, Italia.
Está bien.
Ahora, solo por diversión
usemos el hecho
que podemos tener claves booleanas.
Entonces, esto de Verdadero y Falso aquí, ¿verdad?
Y también tenemos la hora de apertura y de cierre.
Entonces, ves que todos están relacionados.
Entonces, creemos algo divertido con esto.
Entonces, digamos que tenemos algo de tiempo actual.
Y, de hecho, podríamos llegar a la hora actual desde JavaScript
pero aún no sabemos cómo.
Entonces, digamos que son las 21 horas.
Entonces, son las 9:00 p. m.
Y luego, podríamos hacer algo realmente inteligente como esto.
Entonces, descansa.
y así, cuando pasamos en True,
entonces vamos a llegar, Estamos abiertos.
Y, cuando pasamos en Falso,
vamos a llegar, estamos cerrados.
Entonces, para obtener la cadena correcta aquí
según el tiempo,
todo lo que tenemos que hacer es comparar la hora actual
con estos dos Abrir y Cerrar, ¿de acuerdo?
Entonces, hagamos eso.
Podemos decir,
o podemos preguntar,
es la hora,
entonces, la hora actual es mayor
que descansar.obtener, abrir.
Y al mismo tiempo,
está debajo de rest.get, close.
Así que básicamente, aquí estamos preguntando
si la hora actual es entre las 23 y las 11.
Y entonces, esto aquí es un valor Verdadero Falso.
Y, este es un valor Verdadero Falso entonces, Booleano.
Y así, el resultado de esta operación final
será Verdadero o Falso.
Y luego, Verdadero o Falso mapeará
a uno de estos valores.
Entonces, eso es realmente inteligente, ¿verdad?
Entonces, vamos a desregistrar los resultados en la consola.
Y, vamos a comprobarlo.
Y así, a las 21 horas, estamos abiertos.
Y eso tiene sentido.
Es entre estos dos tiempos.
Pero, si fueron como ocho horas,
entonces estamos cerrados, increíble.
Ahora, esto es como dije bastante inteligente,
pero en realidad no es tan legible.
Entonces, no abuses de este tipo de patrón, ¿de acuerdo?
Esto realmente demuestra el poder
de tener booleanos como claves de mapa.
Pero de todos modos, ahora sigamos explorando los métodos.
que están disponibles en los mapas.
Entonces, ya tenemos métodos para establecer y obtener.
Ahora, también podemos comprobar si un mapa contiene una determinada clave.
Entonces, iniciemos sesión en la consola.
el resultado de llamar al método has.
Entonces, categorías, y así, esto debería ser Verdadero.
Y, de hecho, es cierto.
Luego, también podemos eliminar elementos del mapa.
Y nuevamente, eso sucede en función de la clave.
Entonces, rest.delete.
Y, digamos que la segunda ubicación
debería estar cerrado ahora.
Entonces, este de aquí, el de Lisboa.
Y así, tomamos esa clave y la borramos del mapa.
Y como resultado, eso desaparecerá aquí.
Entonces, ya ves, ya no está.
Ahora comparando esto con objetos,
en realidad también podemos eliminar propiedades de los objetos
usando algo llamado el operador de eliminación.
Pero, ese es un proceso muy lento.
Y por lo general, no se anima a hacer eso aquí.
Sobre el método has.
En realidad, los objetos también tienen un método.
que se llama hasOwnProperty.
Pero, vamos a hablar de eso.
en la sección de programación orientada a objetos, ¿de acuerdo?
A continuación, los mapas también tienen la propiedad de tamaño.
Entonces, rest.size, por supuesto.
Y, eso debería ser siete como podemos ver aquí.
Y sí, tiene siete elementos.
Y luego, para terminar, también podemos despejar.
Básicamente, elimine todos los elementos del mapa.
Pongamos eso aquí.
Y así, ahora se ha ido y tiene un tamaño de cero.
Dejemos eso atrás.
Entonces, como puedes ver aquí,
hay cierta superposición en la forma en que trabajamos
con mapas y conjuntos.
Y eso se debe a que ambos se introdujeron en ES6.
Y ahora solo para terminar,
déjame mostrarte que, de hecho, podemos usar matrices
u objetos como claves de mapa.
Entonces, vamos a establecer aquí algo más.
Y así, ahora como clave
Usaré esta matriz
y lo pondré en Prueba, ¿de acuerdo?
Y, vamos a poner eso realmente aquí.
Entonces, es antes del registro.
para que podamos echarle un vistazo.
Y así, aquí de hecho vemos
esta es ahora la clave.
Esta matriz, ¿de acuerdo?
Pero ahora, para obtener los datos basados ​​en esa matriz
déjame ver cómo podemos hacer eso.
Entonces, descansa.
Y, piensa en lo que estamos haciendo aquí.
¿Crees que esto funcionará?
Y, de hecho, necesitamos registrarlo en la consola.
Pero, dado lo que aprendimos
en la sección anterior
sobre cómo funciona JavaScript entre bastidores.
Especialmente, primitivos versus objetos.
¿Crees que esto ahora recuperará Test?
Bien, veamos.
Y, no, no lo hizo.
Y la razón de eso,
es que estas dos matrices
en realidad no son el mismo objeto.
Entonces, esta matriz, y esta,
aunque las escribimos de la misma manera
y por lo tanto, tienen los mismos elementos,
no son el mismo objeto en el montón, ¿de acuerdo?
Y, la clave aquí es exactamente este objeto.
Este objeto en la memoria,
y no este.
Y así, esto no puede funcionar.
Para que funcione
tendríamos que hacer esto.
Creando una matriz, uno, dos.
Y luego, usamos esa matriz.
Y luego, también usamos la misma matriz
para leer el valor del mapa.
Y ahora, va a funcionar, ¿de acuerdo?
porque ahora claro
estos dos se refieren al mismo lugar en la memoria.
Genial, y así con esto demostramos
que de hecho podemos usar objetos como claves de mapa.
Y esto puede ser muy útil con elementos tontos.
que, de hecho, tampoco son más que simples
un tipo especial de objeto.
Hagamos eso aquí también.
Hagamos rest.set.
Y ahora como clave,
usaremos document.queryselector.
Y luego, vamos a seleccionar
estos elementos h1 que tenemos aquí.
Entonces, esto es solo un h1.
Entonces, nada lujoso.
Y así, el resultado de esto será un objeto.
Entonces, digamos que este es el encabezado.
Que ahora, mientras lo comprobamos aquí,
verás que está aquí de hecho.
Entonces, mientras lo muevo
incluso puedes verlo aquí visible en la página web.
¿Ves eso?
¿Lo más destacado allí?
Esa es exactamente la clave de esta entrada del mapa.
Suena loco, pero es posible
y puede habilitar algunas funciones avanzadas.
Está bien.
Entonces, aprendimos aquí cómo crear mapas
y, cómo trabajar con ellos.
Entonces, esto debería ser suficiente para una conferencia.
Y así, terminemos esto ahora.
Y sigue aprendiendo sobre mapas
en el siguiente.