Obtener la clave de un objeto JavaScript
-
Obtener la clave de un objeto javascript con el método
Object.keys()
-
Obtener claves de un objeto javascript con el método
Object.entries(obj)
-
Obtener la
clave
de un objeto javascript usando el buclefor
![Obtener la clave de un objeto JavaScript](/img/JavaScript/feature-image---get-key-of-object-javascript.webp)
Un objeto javascript es una colección de pares clave-valor. Necesitamos una clave para obtener su valor de un objeto javascript. Los pares clave-valor se utilizan ampliamente en las comunicaciones cliente-servidor y en la programación de JavaScript. Somos conscientes de la recuperación de un valor de un objeto JSON siempre que tengamos su clave. Pero, ¿y si no tenemos el nombre de la clave
? ¿Cómo obtenemos su valor del objeto Javsscript? Veamos algunas formas en las que podemos obtener las claves de un objeto javascript.
Obtener la clave de un objeto javascript con el método Object.keys()
La función Object.keys()
devuelve un array que contiene las claves del objeto javascript. Pasamos el objeto javascript como parámetro a la función Object.keys()
. el array de salida contiene las claves en el mismo orden en que están en el objeto javascript original. Si pasamos un array a Object.keys()
, devolverá los índices del array como salida. Y el objeto de parámetro es con índices, entonces el Object.keys()
devolverá un array de esos índices. Consulte el siguiente código para comprender el uso y el comportamiento de la función Object.keys()
.
var fruitsArr1 = ['Apple', 'Orange', 'Mango', 'Banana'];
var fruitsObj2 = {0: 'Apple', 4: 'Orange', 2: 'Mango', 3: 'Banana'};
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));
Producción :
["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]
Si las claves son números, la función Object.keys()
devolverá un array de las teclas numéricas en orden ordenado. El fruitObj2
tiene las teclas numeradas 0
, 4
, 2
, 3
. Pero cuando aplicamos la función Object.keys()
, devuelve las claves como ["0", "2", "3", "4"]
que está en un orden ordenado. El valor-clave seguirá teniendo la misma asignación de valor que tenía para el objeto javascript original. Por ejemplo, fruitsObj2
contiene 4:" Naranja "
y 2: "Mango"
, pero Object.keys(fruitsObj2)
devolvió su orden como "2", "4"
. Si estuviéramos en console.log
sus valores en las teclas 2
y 4
, obtenemos los valores correctos como salida. Por lo tanto, la función no ha modificado nada en la asignación real de clave-valor, incluso si Object.keys
devuelve las claves numéricas de un array o un objeto en orden ordenado. Consulte el siguiente código.
console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);
Producción :
Mango
Orange
Obtener claves de un objeto javascript con el método Object.entries(obj)
El método Object.entries(obj)
es diverso y más flexible que la función Object.keys()
. Divide todo el objeto en pequeñas matrices. Cada matriz consta de pares clave-valor con el formato [clave, valor]
. Usando Object.keys()
, obtenemos solo las claves de un objeto, pero usando Object.entries(obj)
, podemos obtener todas las entradas en un objeto, incluyendo las claves
y sus valores
. Object.entries(obj)
no es un método de uso común. En la mayoría de los escenarios, necesitaremos obtener las claves de un objeto. Los valores correspondientes se pueden obtener fácilmente con la ayuda de claves
.
Sintaxis
Object.entries(object)
Parámetros
Al igual que el método Object.keys()
, el Object.entries(obj)
acepta el objeto javascript
como parámetro.
Regreso
Object.entries(obj)
devuelve los pares clave-valor destruidos en matrices. El tipo de retorno será un array de matrices, cada submatriz contiene dos elementos: la clave y el valor. Algo como [[clave1, valor1], [clave2, valor2], [clave3, valor3] ...]
. La función conserva el orden de los atributos del objeto. En la implementación detrás de escena, los pares clave-valor se forman iterando sobre las propiedades del objeto. Consulte el siguiente código para comprender mejor el comportamiento de la función Object.entries()
. Usamos JSON.stringify()
para obtener una versión de cadena legible por humanos de los valores generados por la función.
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));
Producción :
"[["id","1"],["name","mango"],["color","yellow"]]"
Podemos usar Object.entries()
de otra manera. Podemos iterar sobre el objeto javascript y registrar las claves de atributo y sus valores. El enfoque es como se muestra en el siguiente fragmento de código.
for (const [key, value] of Object.entries(fruitsObj3)) {
console.log(`${key}: ${value}`);
}
Producción :
id: 1
name: mango
color: yellow
Si estamos interesados en obtener la clave
solo de la función Object.entries()
, podemos registrar la clave
y descartar la parte del valor.
Obtener la clave
de un objeto javascript usando el bucle for
¿Podemos usar un simple bucle for
para obtener las claves de un objeto? No es una característica comúnmente conocida de un bucle for
. Podemos iterar a través de cualquier objeto javascript como lo hacemos con los arrays usando la combinación for-in
. Itera a través de cada parámetro con la i
(el iterador) sosteniendo la clave
del objeto y el object[i]
sosteniendo el valor correspondiente a la clave
en el objeto. Veamos el siguiente código para comprender mejor el concepto.
var obj = {'id': '1', 'name': 'mango', 'color': 'green'};
for (let i in obj) {
console.log(i); // key
console.log(obj[i]); // value against the key
}
Producción :
id
1
name
mango
color
green
Si deseamos extraer solo las claves del objeto, podemos usar el valor del iterador. Podemos usar console.log(i)
en el código anterior en el bloque for(let i in obj)
.
Si tenemos estructuras anidadas en el objeto javascript, se puede usar for(let i in obj)
para obtener la clave. Pero, el valor de la estructura anidada será la propia estructura. Consulte el siguiente código.
var a = {
'id': '1',
'name': 'mango',
'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
console.log(i);
console.log(a[i]);
}
Producción :
id
1
name
mango
color
{name: "yellow", appearance: "bright"}