javascript

Objeto a arreglo en JavaScript – Conversión

Convertir un objeto a arreglo en JavaScript

En este post te voy a mostrar a convertir un objeto o diccionario a un arreglo o array en JavaScript.

Vamos a repasar 3 funciones:

  1. Object.entries
  2. Object.values
  3. Object.keys
Objeto a arreglo en JavaScript usando Object.entries, values y keys

Tema de la captura: SynthWave ’84.

Esas funciones nos van a servir para convertir un objeto a arreglo en JavaScript de 3 formas. El primero extrayendo cada clave y valor como un nuevo arreglo, el segundo extrayendo únicamente los valores y el tercero obteniendo únicamente las claves.

Object.entries – Pares de arreglos

Comencemos viendo el método entries. Este método crea un nuevo arreglo de arreglos, en donde cada valor del arreglo es otro arreglo con dos valores.

El primer valor es la clave y el segundo el valor (suena confuso pero no lo es). Veamos un ejemplo:

/**
 * Convertir un objeto a un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */let alumnosConCalificaciones = {
 "Luis": 100,
 "Pedro": 90,
 "María José": 100,
 "John Galt": 99
};

// Object.entries convierte tanto clave y valor. Cada
// par es convertido a un arreglo. Al final tenemos un array de arrays
let arregloDeClavesYValores = Object.entries(alumnosConCalificaciones);
console.log("Claves y valores: ", arregloDeClavesYValores);
/*
Salida:
Claves y valores:  [ [ 'Luis', 100 ],
  [ 'Pedro', 90 ],
  [ 'María José', 100 ],
  [ 'John Galt', 99 ] ]
*/

Como ves, el objeto se ha convertido en un arreglo. Cada entrada del arreglo tiene un nuevo arreglo; en el índice 0 tiene la clave del objeto (el nombre del alumno) y en el índice 1 la calificación del mismo.

Object.keys – Solo las claves

Para extraer únicamente las claves del objeto podemos usar el método Object.keys. Como su nombre lo dice, pondrá cada clave del objeto dentro de un arreglo.

Al final tendremos un arreglo de valores, valores que eran las claves del objeto anteriormente.

Veamos el ejemplo:

/**
 * Convertir un objeto a un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */let alumnosConCalificaciones = {
 "Luis": 100,
 "Pedro": 90,
 "María José": 100,
 "John Galt": 99
};

// Object.keys toma las claves, para este ejemplo serían
// los nombres de alumnos
let alumnos = Object.keys(alumnosConCalificaciones);
console.log("Claves: ", alumnos);
/*Salida:
Claves:  [ 'Luis', 'Pedro', 'María José', 'John Galt' ]
*/

En este caso tenemos como resultado un arreglo de cadenas, pues son las claves del objeto o, en otras palabras, los nombres de los alumnos.

Objeto a arreglo en JavaScript con Object.values

Ahora veamos el tercer ejemplo. El método Object.values toma todos los valores del objeto (no las claves) y los coloca dentro de un arreglo.

Veamos su uso:

/**
 * Convertir un objeto a un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */let alumnosConCalificaciones = {
 "Luis": 100,
 "Pedro": 90,
 "María José": 100,
 "John Galt": 99
};

// Object.values toma los valores, para este ejemplo serían
// las calificaciones
let calificaciones = Object.values(alumnosConCalificaciones);
console.log("Valores: ", calificaciones);
/*Salida:
Valores:  [ 100, 90, 100, 99 ]
*/

Ahora la salida son los valores, que en este caso son las calificaciones.

Conclusión

Cabe mencionar que estos métodos funcionan mejor en navegadores modernos.

Nota: estos ejemplos corren en el navegador y en Node.JS. Es decir, del lado del cliente y del servidor.

En mi blog puedes encontrar más sobre JavaScript moderno.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

33 min hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esta web usa cookies.