Crear arrays asociativas en JavaScript

1. Cree un array asociativa en JavaScript utilizando el objeto Map
2. Crear un array asociativa en JavaScript usando objetos genéricos

La mayoría de los lenguajes de programación tienen una estructura de datos que le permite almacenar datos en un formato de clave-valor. Por ejemplo, Python tiene diccionarios que te permiten asociar una cadena con un valor o una lista de valores.

JavaScript tiene el objeto Map que logra lo mismo, también ten en cuenta que esta funcionalidad no es compatible con navegadores más antiguos. Históricamente, los objetos simples se han utilizado para crear arrays asociativas en JavaScript porque técnicamente hacen lo mismo.

Por otro lado, el uso de objetos genéricos para este propósito puede resultar bastante confuso a veces. Incluso el método Map tiene sus problemas, especialmente si eres nuevo en el idioma y estás acostumbrado a ciertas convenciones.

Cree un array asociativa en JavaScript utilizando el objeto Map

La primera y más correcta forma de manejar arrays asociativas en JavaScript es crear un objeto Map. Este método tiene varias ventajas sobre los objetos normales, como el hecho de que las claves no se limitan a cadenas: pueden ser funciones, otros objetos y prácticamente cualquier otra primitiva.

Además, los objetos Map también son iterables desde el principio. De acuerdo, puede iterar sobre las propiedades de un objeto utilizando un bucle for in, pero esa no siempre es una solución elegante.

Como tal, así es como puede crear y completar un array asociativa en JavaScript:

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log([...myMap]);

Producción :

[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]

Para crear entradas de clave/valor, puede utilizar el método set(). Como nota al margen, la sintaxis [...myMap] utilizada en el código anterior funciona porque Map implementa un método @@iterator bajo el capó. Es lo que lo distingue de los objetos normales, ya que debe crear un bucle explícito for in.

Si desea recuperar un valor específico, puede utilizar el método get():

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log(myMap.get('firstItem'));

Producción :

1

Otros métodos útiles incluyen has(), que comprueba si su objeto Map tiene una clave específica, y delete(), que le permite eliminar claves del objeto.

Evite el uso de la notación de corchetes cuando se trata de objetos de map en JavaScript

Todos sabemos que JavaScript está lleno de comportamientos extraños y, lamentablemente, los objetos Map no son diferentes.

Si tienes algo de experiencia en Python, podrías tener la tentación de usar algo como myMap["firstItem"] = 1 para establecer un par clave/valor Map. También es un enfoque válido cuando se trata de objetos genéricos.

La buena noticia es que esto no causará ningún error, y al principio parecerá que funciona según lo previsto. Aquí está el ejemplo anterior refactorizado usando la notación de paréntesis:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap);

Producción :

[object Map] {
  firstItem: 1,
  secondItem: 2,
  thirdItem: "third"
}

La mala noticia es que este ya no es el mismo tipo de estructura de datos. En cambio, esto se ha transformado en un objeto genérico. Debido a esto, si itera sobre el Mapa, ya no funcionará.

Además, el método has() tampoco devolverá los resultados deseados, como puedes ver en el siguiente código:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap.has('firstItem'));

Producción :

false

En conclusión, debe evitar el uso de la notación entre paréntesis cuando se trata de Map; de lo contrario, es posible que su código no funcione según lo previsto.

Crear un array asociativa en JavaScript usando objetos genéricos

Hasta hace unos años, el método Map descrito anteriormente no era compatible con la mayoría de los navegadores, por lo que los programadores usaban en su lugar objetos genéricos. En teoría, no hay nada de malo con este enfoque, pero debería intentar usar Map en la mayoría de los casos si la compatibilidad con versiones anteriores no es un problema.

Así es como puede crear un array asociativa en JavaScript usando objetos:

const myMap = {};

myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = 'third';

console.log(myMap);

Producción :

{ firstItem: 1, secondItem: 2, thirdItem: "third"}

Aquí usamos la notación de puntos para agregar propiedades a nuestro objeto. Si le gusta usar cadenas como claves, este método no funcionará según lo previsto si sus cadenas contienen espacios.

Para esos casos, puede usar el método de paréntesis como se detalla a continuación:

const myMap = {};

myMap['first item'] = 1;
myMap['second item'] = 2;
myMap['third item'] = 'third';

console.log(myMap);

Producción :

{ first item: 1, second item: 2, third item: "third"}

JavaScript acepta que ambos métodos pueden volver a ser extremadamente confusos en algunos casos. Si realmente desea utilizar cadenas como claves en sus arrays asociativas, entonces la notación de corchetes es el camino a seguir, ya que la notación de puntos es muy restrictiva.

Por otro lado, la notación entre paréntesis hace que los objetos de JavaScript se parezcan mucho más a los diccionarios clásicos, que no lo son. Por lo tanto, siempre es una idea mucho mejor utilizar el método Map siempre que tenga la oportunidad.