Índice
1.Introducción
Los objetos como bien sabemos todos son una de las piedras angulares en JavaScript, a diferencia de los arreglos donde tenemos a nuestra disposición gran cantidad de métodos, en los objetos esta cantidad es reducida, a mi criterio 3 de estos sobresalen y es importante comprenderlos:
2.Object.keys()
Object.keys()
recibe un objeto como entrada y regresa un array con todas las llaves de dicho objeto.
Sintaxis
Object.keys(objeto)
Por ejemplo:
const persona = {
nombre: "Eduardo",
edad:15,
soltero: true
}
console.log(Object.keys(persona));
//salida:["nombre", "edad", "soltero"]
Puede ser útil para verificar si un objeto está vacío o no:
const persona = {
}
console.log( (Object.keys(persona).length === 0) ? "esta vacio" : "no esta vacio" )
//salida: "esta vacio"
3.Object.values()
Object.values()
recibe un objeto como parámetro y regresa un arreglo que contiene todos los valores del objeto.
Sintaxis
Object.values(objeto)
Por ejemplo:
const persona = {
nombre:"Camila",
edad:23,
soltera: false
}
console.info(Object.values(persona));
//salida: ["Camila", 23, false]
4.Object.entries()
Object.entries()
es como una fusión de Object.keys()
y Object.values()
recibiendo un objeto como parámetro y regresando un arreglo individual por cada llave-valor de dicho objeto.
Sintaxis
Object.entries(objeto)
Por ejemplo:
const perro = {
nombre:"Coquito",
raza:"Pastor aleman",
edad:7,
color:"cafe",
sexo: "M"
}
console.info(Object.entries(perro));
//salida:
// 0: Array [ "nombre", "Coquito" ]
// 1: Array [ "raza", "Pastor aleman" ]
// 2: Array [ "edad", 7 ]
// 3: Array [ "color", "cafe" ]
// 4: Array [ "sexo", "M" ]
5.Referencias
- https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
- https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/values
- https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
6.Conclusiones
Prácticamente en todos los desarrollos que involucren javascript verás objetos tarde o temprano, es importante que conozcas al menos el funcionamiento básico de estos 3 métodos.
Puedes ver mas post de mi autoría a continuación:
![duxtech](https://res.cloudinary.com/practicaldev/image/fetch/s---pbEE5q_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F391281%252Ffe9f8985-2f7e-4614-af22-73b275663b9a.jpg)
React: state para dummies con una analogía simple
Cristian Fernando ・ May 17 '21
![duxtech](https://res.cloudinary.com/practicaldev/image/fetch/s---pbEE5q_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F391281%252Ffe9f8985-2f7e-4614-af22-73b275663b9a.jpg)