Arrays asociativos en JavaScript explicados: objetos, uso y diferencias clave

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es uno de los lenguajes de programación esenciales en el desarrollo web. Entre sus muchas características, los “arreglos asociativos” son una estructura importante que ayuda a gestionar y procesar datos de manera eficiente.

En este artículo ofrecemos una explicación detallada de los arreglos asociativos en JavaScript, desde conceptos básicos hasta usos más avanzados. Se incluyen ejemplos de código para que el contenido sea fácil de entender, incluso para principiantes, por lo que puedes usar este artículo como referencia práctica.

2. ¿Qué es un arreglo asociativo?

2.1 Definición de un arreglo asociativo

Un arreglo asociativo es un tipo de estructura de datos que gestiona la información como pares de “claves” y “valores”. Mientras que los arreglos estándar utilizan índices numéricos (0, 1, 2, …), los arreglos asociativos permiten acceder a los datos mediante claves de cadena arbitrarias.

2.2 Arreglos asociativos en JavaScript

En JavaScript, los arreglos asociativos se representan mediante objetos. Los objetos se definen usando llaves {} y almacenan los datos como pares clave‑valor.

A continuación, un ejemplo básico de un arreglo asociativo en JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Diferencias entre arreglos asociativos y arreglos regulares

Los arreglos asociativos y los arreglos regulares difieren de las siguientes maneras.

2.4 Casos de uso

Los arreglos regulares son adecuados para gestionar datos tipo lista, mientras que los arreglos asociativos resultan convenientes para manejar datos con atributos específicos, como información de usuarios o configuraciones.

3. Cómo crear arreglos asociativos

3.1 Declarar con un literal de objeto

La forma más común de crear un arreglo asociativo en JavaScript es mediante un literal de objeto.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Crear con new Object()

Otro enfoque es crear un objeto usando new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Añadir claves y valores dinámicamente

Utilizando la notación de corchetes, también puedes usar variables como claves.

let key = "color";
let product = {};
product[key] = "red";

4. Manipular arreglos asociativos

4.1 Añadir elementos

Añadir con notación de punto

let user = {};
user.name = "Tanaka";
user.age = 30;

Añadir con notación de corchetes

let user = {};
user["email"] = "tanaka@example.com";

4.2 Recuperar elementos

Recuperar con notación de punto

console.log(user.name); // "Tanaka"

Recuperar con notación de corchetes

console.log(user["email"]); // "tanaka@example.com"

4.3 Actualizar elementos

Puedes actualizar un valor existente asignando un nuevo valor a la misma clave.

user.age = 35;
console.log(user.age); // 35

4.4 Eliminar elementos

Utiliza la palabra clave delete para eliminar un par clave‑valor.

delete user.phone;
console.log(user.phone); // undefined

5. Iterar sobre arreglos asociativos

5.1 Iteración con bucle for...in

El bucle for...in permite iterar sobre las claves de un arreglo asociativo.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Usando Object.keys() y forEach()

Puedes obtener un arreglo de claves con Object.keys() y luego iterar sobre él con forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Usando Object.entries() y for...of

Con Object.entries(), puedes iterar simultáneamente sobre claves y valores.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Ordenar arreglos asociativos

6.1 Ordenar por claves

Los objetos de JavaScript en sí no son directamente ordenables, pero puedes ordenar sus claves y luego acceder a los valores en el orden ordenado.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Ordenar por valores

Para ordenar por valores, convierta el objeto en una matriz de pares clave‑valor usando Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Notas importantes al ordenar

Cuando los valores se almacenan como cadenas, la ordenación numérica requiere una conversión explícita.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Notas importantes al usar arreglos asociativos

7.1 Claves duplicadas y sobrescritura

Si la misma clave se define varias veces, el valor posterior sobrescribe al anterior.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined y comprobación de existencia de clave

Para comprobar si una clave existe en un arreglo asociativo, use el operador in o hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 El método push no se puede usar

Los arreglos asociativos (objetos) no admiten el método push(), que solo está disponible para los arreglos normales.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Diferencias con los datos JSON

Los objetos de JavaScript y los datos JSON están relacionados pero no son lo mismo. Los objetos deben convertirse a cadenas JSON para el intercambio de datos.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Resumen

8.1 Puntos clave de los arreglos asociativos

• Los datos se gestionan mediante pares clave‑valor.
• Se pueden realizar operaciones flexibles, como agregar, obtener, actualizar y eliminar datos.
• Los arreglos asociativos admiten iteración y ordenación mediante métodos incorporados.

8.2 Ejemplos de uso práctico

A continuación se muestra un ejemplo de manejo de varios objetos de usuario usando una matriz combinada con arreglos asociativos.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. Preguntas frecuentes (FAQ)

P1. ¿Cuál es la diferencia entre los arreglos asociativos y los arreglos normales?

Los arreglos normales utilizan índices numéricos, mientras que los arreglos asociativos usan claves de texto para acceder a los valores.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

P2. ¿Cómo puedo comprobar si una clave existe?

Puede comprobar la existencia de una clave usando el operador in.

if ("age" in user) {
  console.log(user.age);
}

10. Resumen final

Los arreglos asociativos de JavaScript son extremadamente útiles para gestionar y organizar datos. En este artículo, cubrimos todo, desde conceptos básicos hasta patrones de uso más avanzados.

Next Steps:

• Ejecute los ejemplos de código usted mismo para profundizar su comprensión.
• Intente integrar los arreglos asociativos con datos JSON y operaciones de API.