Dado un objeto y la tarea es obtener la primera clave de un objeto JavaScript. Dado que el objeto de JavaScript no contiene un índice numerado, usamos los siguientes enfoques para obtener el primer nombre clave del objeto.
Enfoque 1:
- Primero tome el Objeto JavaScript en una variable.
- Utilice el método object.keys(objectName) para obtener acceso a todas las claves del objeto.
- Ahora, podemos usar la indexación como Object.keys(objectName)[0] para obtener la clave del primer elemento del objeto.
Ejemplo: Este ejemplo ilustra el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the first key name
of a JavaScript object ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP1" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_UP2" style =
"font-size: 15px; font-weight: bold; color: green;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up1 = document.getElementById('GFG_UP1');
var up2 = document.getElementById('GFG_UP2');
var down = document.getElementById('GFG_DOWN');
var obj = {
"Prop_1": ["Val_11", "Val_12", "Val_13"],
"Prop_2": ["Val_21", "Val_22", "Val_23"],
"Prop_3": ["Val_31", "Val_32", "Val_33"]
};
up1.innerHTML = "Click on the button to get the "+
"first key of Object.";
up2.innerHTML = JSON.stringify(obj);
function GFG_Fun() {
down.innerHTML = "The first key = '" +
Object.keys(obj)[0] + "' <br> Value = '"
+ obj[Object.keys(obj)[0]] + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Primero tome el Objeto JavaScript en una variable.
- Con la ayuda de loop, comience a acceder a todas las claves de JavaScript Object.
- Después de ejecutarlo una vez, rómpelo. Luego obtendremos la primera clave de Object.
Ejemplo: Este ejemplo ilustra el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the first key name
of a JavaScript object ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP1" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_UP2" style =
"font-size: 15px; font-weight: bold; color: green;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up1 = document.getElementById('GFG_UP1');
var up2 = document.getElementById('GFG_UP2');
var down = document.getElementById('GFG_DOWN');
var obj = {
"Prop_1": ["Val_11", "Val_12", "Val_13"],
"Prop_2": ["Val_21", "Val_22", "Val_23"],
"Prop_3": ["Val_31", "Val_32", "Val_33"]
};
up1.innerHTML = "Click on the button to get "
+ "the first key of Object.";
up2.innerHTML = JSON.stringify(obj);
function GFG_Fun() {
var key;
for (var k in obj) {
key = k;
break;
}
down.innerHTML = "The first key = '" + key +
"' <br> Value = '" + obj[key] + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA