No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES8: object entries y object values

19/35
Recursos

Los m茅todos de transformaci贸n de objetos a arrays sirven para obtener la informaci贸n de las propiedades, sus valores o ambas.

Obtener los pares de valor de un objeto en un array

Object.entries() devuelve un array con las entries en forma [propiedad, valor] del objeto enviado como argumento.

const usuario = {
    name: "Andres",
    email: "[email protected]",
    age: 23
}

Object.entries(usuario) 
/* 
[
  [ 'name', 'Andres' ],
  [ 'email', '[email protected]' ],
  [ 'age', 23 ]
]  
*/

Obtener las propiedades de un objeto en un array

Object.keys() devuelve un array con las propiedades (keys) del objeto enviado como argumento.

const usuario = {
    name: "Andres",
    email: "[email protected]",
    age: 23
}

Object.keys(usuario) 
// [ 'name', 'email', 'age' ]

Obtener los valores de un objeto en un array

Object.values() devuelve un array con los valores de cada propiedad del objeto enviado como argumento.

const usuario = {
    name: 'Andres',
    email: "[email protected]",
    age: 23
}

Object.values(usuario) 
// [ 'Andres', '[email protected]', 23 ]

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 25

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si llegaste hasta ac谩 vas por la mitad del curso, no te rindas 馃槃

S铆ntesis de lo que hemos estado viendo; en solo una imagen:

Hola Chic@s
ES8:

  • Object entries
const countries = { MX: "Mexico", CO: "Colombia", CL: "Chile", PE: "Peru"}
console.log(Object.entries(countries));
  • Object values
const countries = { MX: "Mexico", CO: "Colombia", CL: "Chile", PE: "Peru"}
console.log(Object.values(countries));

Algo que me di cuenta, conn 鈥淥bject.entries鈥 es que, solo te transforma los objetos en array que est茅n en el primer nivel,

Pero si tienes un objeto que tiene otro objeto dentro, el objeto que esta mas adentro, permanecer谩 igual.

Pens茅 qu茅 pasar铆a si utilizo esta funci贸n y sus m茅todos con un array y adivinen qu茅 jaja, funciona perfectamente, ahora entiendo que los arrays y los objetos son exactamente lo mismo, pero, la clave de cada valor en un array es su 铆ndice o posici贸n, pues si usan object.keys(nombreDelArray), les aparecen los indices, y con object.entries aparecen los indices y el contenido.

hay muchos metodos que nos permiten transformar un object to array entre ellos Object.assign(Arraydata)

El m茅todo Object.assign() copia todas las propiedades enumerables de uno o m谩s objetos fuente a un objeto destino. Devuelve el objeto destino.

Estos m茅todos son muy 煤tiles cuando es necesario convertir un objeto en un array. Y tener un array es mucho mejor porque tiene m茅todos de manipulaci贸n muy 煤tiles como .map() .reduce() o .filter().
.
Pero sab铆an que tambi茅n es posible transformar un array en un objeto? es decir el proceso inverso?
.
Esto se hace con Object.fromEntries

02-object-keys.js

const countries = { MX: 'Mexico', CO: 'Colombia', CL: 'Chile', PE: 'Peru'};

console.log( Object.keys(countries) ); 
// >> [ 'MX', 'CO', 'CL', 'PE' ]

Tan potentes keys, values y entries 馃槃

ES8: object entries y object values

Estas caracter铆sticas se introdujeron en ECMAScript 2017 (ES8). Estas implementaciones est谩n relacionadas con la manipulaci贸n de objetos: Object.entries() y Object.values().

Veamos en qu茅 consisten estas caracter铆sticas:

  1. Object.entries():


Object.entries() es un m茅todo introducido en ES8 que devuelve un arreglo de pares [clave, valor] propios y enumerables de un objeto dado. Este m茅todo te permite recorrer de manera m谩s concisa las propiedades y valores de un objeto que utilizando bucles tradicionales.

Aqu铆 tienes un ejemplo de uso:

const persona = {
  nombre: 'Juan',
  apellido: 'P茅rez',
  edad: 30
};

const entradas = Object.entries(persona);

console.log(entradas);
// Salida: [ ['nombre', 'Juan'], ['apellido', 'P茅rez'], ['edad', 30] ]
  1. Object.values():


Object.values() es otro m茅todo introducido en ES8 que devuelve un arreglo con los valores propios y enumerables de un objeto dado.

Aqu铆 tienes un ejemplo de uso:

const persona = {
  nombre: 'Juan',
  apellido: 'P茅rez',
  edad: 30
};

const valores = Object.values(persona);

console.log(valores);
// Salida: ['Juan', 'P茅rez', 30]


Ambos m茅todos son muy 煤tiles para trabajar con objetos, especialmente cuando necesitas recorrer las propiedades o valores de un objeto. Pueden simplificar tu c贸digo y hacerlo m谩s legible.

Recuerda que el soporte de estos m茅todos en navegadores y Node.js puede variar seg煤n el entorno y la versi贸n que est茅s utilizando, por lo que es recomendable verificar la compatibilidad si est谩s apuntando a entornos espec铆ficos.


Espero sea de ayuda. 馃懆鈥嶐煉

![](https://static.platzi.com/media/user_upload/Screenshot%202024-01-12%20at%2011.11.34%E2%80%AFPM-3d9a4cca-0f84-4269-aab4-ad266552b411.jpg)

Transformando objetos

Los objetos carecen de muchos m茅todos que existen para los arrays, tales como聽map,filter聽y otros.

Si queremos aplicarlos, entonces podemos usar聽Object.entries聽seguido de聽Object.fromEntries:

  1. Use聽Object.entries(obj)聽para obtener un array de pares clave/valor de聽obj.
  2. Use m茅todos de array en ese array, por ejemplo聽map聽para transformar estos pares clave/valor.
  3. Use聽Object.fromEntries(array)聽en el array resultante para convertirlo nuevamente en un objeto.

Por ejemplo, tenemos un objeto con precios y queremos duplicarlos:

let prices = {
	banana: 1,
	orange: 2,
	meat: 4,
};

*let doublePrices = Object.fromEntries(
	// convertir precios a array, map - cada par clave/valor en otro par
	// y luego fromEntries nos devuelve el objeto
	Object.entries(prices).map(([key, value]) => [key, value * 2])
);*

alert(doublePrices.meat); // 8

Puede parecer dif铆cil a primera vista, pero se vuelve f谩cil de entender despu茅s de usarlo una o dos veces. Podemos hacer poderosas cadenas de transformaciones de esta manera.

Mi ejemplo:

const emojis = { 'happy': '馃槂', 'sad': '馃様', 'cool': '馃槑' }
console.log(Object.entries(emojis))
// OUT
[
  [ 'happy', '馃槂' ],
  [ 'sad', '馃様' ],
  [ 'cool', '馃槑' ]
]

con values

const emojis = { 'happy': '馃槂', 'sad': '馃様', 'cool': '馃槑' }
console.log(Object.values(emojis))
// OUT
[ '馃槂', '馃様', '馃槑' ]

crei que solo estaba la version ecmaScript 6

Crea una funci贸n que reciba el objeto inventario y una funci贸n de comparaci贸n, y devuelva un nuevo objeto que contenga solo las propiedades que cumplen la condici贸n especificada por la funci贸n de comparaci贸n. Por ejemplo, si la funci贸n de comparaci贸n verifica si la cantidad es mayor o igual a 5:

solucion:

const inventario = {
    item1: {
      nombre: 'L谩piz',
      cantidad: 5
    },
    item2: {
      nombre: 'Borrador',
      cantidad: 2
    },
    item3: {
      nombre: 'Cuaderno',
      cantidad: 10
    }
  };


  function filter2 (operator, parameter, array=inventario){
    const filtred2=[]
    const entry = Object.entries(array)
    
    for(const[x,y] of entry){
        const {nombre, cantidad} = y;
        switch(operator){
            case '<' :if(cantidad<parameter){filtred2.push([x,y])}; break;
            case '>' :if(cantidad>parameter ){filtred2.push([x,y])} break;
    }
    
  }
  console.log(filtred2)
}

solo un poco de ejercicio

No s茅 porque no mencionaron a Object.keys pero aqui dejo mi resumen:

Con object keys puedes obtener las llaves de tu objecto.

const countries = {
    MX: 'Mexico',
    CO: 'Colombia',
    CL: 'Chile',
    PE: 'Peru'
};

console.log(Object.keys(countries));

馃摐 Archivos del Proyecto 馃摐


Pasos 馃搶

  • 鈥 Dentro de la carpeta src, crear la carpeta: es8.
    • 鈥 Dentro de la carpeta es8, crear el archivo llamado: 00-object-entries.js
      鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1

const countries = {MX: 'Mexico', CO: 'Colombia', CL: 'Chile', PE: 'Peru'};
console.log(Object.entries(countries)); //Transforma el objeto a una representaci贸n de array

/*output:
[
[ 'MX', 'Mexico' ],
[ 'CO', 'Colombia' ],
[ 'CL', 'Chile' ],
[ 'PE', 'Peru' ]
]
*/

  • 鈥 Dentro de la carpeta es8, crear el archivo llamado: 01-object-values.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const countries = {MX: 'Mexico', CO: 'Colombia', CL: 'Chile', PE: 'Peru'};
console.log(Object.values(countries)); //Solo trae los valores

/*output:
[ 'Mexico', 'Colombia', 'Chile', 'Peru' ]
*/

19/35 ES8: object entries y object values
Los m茅todos de transformaci贸n de objetos a arrays son 煤tiles para extraer informaci贸n de un objeto y convertirla en un array. Hay tres m茅todos que podemos utilizar:

  • Object.entries()
  • Objetc.keys()
  • Object.values()

El m茅todo Object.entries() nos permite obtener los pares de valores de un objeto en un array. Cada entrada en el array contiene dos elementos: la propiedad del objeto y su valor correspondiente. Por ejemplo, si queremos obtener los pares de valor del objeto 鈥渦suario鈥 que contiene el nombre, correo electr贸nico y edad de un usuario, podemos utilizar Object.entries(usuario) y el resultado ser铆a un array con las entries en forma [propiedad, valor] del objeto.

El m茅todo Object.keys() nos permite obtener las propiedades de un objeto en un array. Si queremos obtener las propiedades del objeto 鈥渦suario鈥 mencionado anteriormente, podemos utilizar Object.keys(usuario) y el resultado ser铆a un array con las propiedades del objeto.

El Objeto.values() nos permite obtener los valores de cada propiedad de un objeto en un array. Si queremos los valores del objeto 鈥渦suario鈥, podemos utilozar Object.values(usuario) y el resultado ser铆a un array con los valores de cada propiedad del objeto.

Por ejemplo, si tenemos un objeto 鈥渃oche鈥 con propiedades como 鈥渕arca鈥, 鈥渕odelo鈥 鈥渁帽o鈥 podemos utilizar estos m茅todos para extraer informaci贸n espec铆fica del objeto y convertirla en un array. Por ejemplo:

const coche = {
	marca:"Toyota",
	modelo:"Corolla",
	a帽o: 2020
	}

Objet.entries(coche) //devuelve un array con entries [propiedad, valor]
//[['marca', 'Toyota'],{'modelo','Corolla'],['a帽o',2020]]

Object.keys(coche) // devuelve un array con las propiedades del objeto
// [ 'marca', 'modelo', 'a帽o' ]

Object.values(coche) // devuelve un array con los valores de cada propiedad del objeto
// [ 'Toyota', 'Corolla', 2020 ]

Dejo un extra a estos metodos para objetos. As铆 como est谩 object.values. Tambi茅n est谩 object.keys con la misma sintaxis para obtener las llaves de nuestros objetos solamente en un 煤nico array. Ej:

const countries = {
    MX: 'Mexico',
    CO: 'Colombia',
    CL: 'Chile',
    PE: 'Peru'
};

console.log(Object.keys(countries));

/*
Output: 
[ 'MX', 'CO', 'CL', 'PE' ]
*/
const obj = {
    MX: 'Mexico',
    CO: 'Colombia',
    CL: 'Chile',
    AR: 'Argentina'
}

// Convierte a los valores de un objeto literal en un array
console.log (Object.values (obj))
// [ 'Mexico', 'Colombia', 'Chile', 'Argentina' ]

// Convierte a los keys de un objeto literal en un array
console.log (Object.keys (obj))
// [ 'MX', 'CO', 'CL', 'AR' ]