Obtenir la clé d'un objet JavaScript

1. Récupérer la clé d’un objet javascript avec la méthode Object.keys()
2. Récupérer les clés d’un objet javascript avec la méthode Object.entries(obj)
3. Obtenir la key d’un objet javascript en utilisant la boucle for

Un objet javascript est une collection de paires clé-valeur. Nous avons besoin d’une clé pour obtenir sa valeur à partir d’un objet javascript. Les paires clé-valeur sont largement utilisées dans les communications client-serveur et la programmation JavaScript. Nous sommes conscients de récupérer une valeur à partir d’un objet JSON à condition d’avoir sa clé. Mais que se passe-t-il si nous n’avons pas le nom key ? Comment obtient-on sa valeur à partir de l’objet Javsscript ? Voyons quelques façons d’obtenir les clés d’un objet javascript.

Récupérer la clé d’un objet javascript avec la méthode Object.keys()

La fonction Object.keys() retourne un tableau contenant les clés de l’objet javascript. On passe l’objet javascript en paramètre à la fonction Object.keys(). Le tableau de sortie contient les clés dans le même ordre que dans l’objet javascript d’origine. Si nous passons un tableau à Object.keys(), il renverra les indices du tableau en sortie. Et l’objet paramètre est avec des indices, alors le Object.keys() renverra un tableau de ces indices. Référez-vous au code suivant pour comprendre l’utilisation et le comportement de la fonction 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));

Production:

["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]

Si les touches sont des nombres, la fonction Object.keys() renverra un tableau des touches numériques dans l’ordre trié. Le fruitsObj2 a les touches numérotées 0, 4, 2, 3. Mais lorsque nous appliquons la fonction Object.Keys(), elle renvoie les clés sous la forme ["0", "2", "3", "4"] qui est dans un ordre trié. La valeur-clé contiendra toujours le même mappage de valeur que pour l’objet javascript d’origine. Par exemple, le fruitsObj2 contient 4: "Orange" et à 2: "Mango", mais Object.keys(fruitsObj2) a renvoyé son ordre sous "2", "4". Si nous étions console.log leurs valeurs aux touches 2 et 4, nous obtenons les valeurs correctes en sortie. Par conséquent, la fonction n’a rien modifié dans le mappage clé-valeur réel, même si Object.keys renvoie les clés numériques d’un tableau ou d’un objet dans l’ordre trié. Référez-vous au code suivant.

console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);

Production:

Mango
Orange

Récupérer les clés d’un objet javascript avec la méthode Object.entries(obj)

La méthode Object.entries(obj) est diversifiée et est plus flexible que la fonction Object.keys(). Il divise l’objet entier en petits tableaux. Chaque tableau se compose de paires clé-valeur sous la forme [clé, valeur]. En utilisant Object.keys(), nous n’obtenons que les clés d’un objet, mais en utilisant Object.entries(obj), nous pouvons obtenir toutes les entrées d’un objet, y compris les clés et leurs valeurs . Object.entries(obj) n’est pas une méthode couramment utilisée. Dans la plupart des scénarios, nous aurons besoin d’obtenir les clés d’un objet. Les valeurs correspondantes peuvent être obtenues facilement à l’aide de keys.

Syntaxe

Object.entries(object)

Paramètres

Identique à celle de la méthode Object.keys(), le Object.entries(obj) accepte l’objet javascript comme paramètre.

Revenir

Object.entries(obj) renvoie les paires clé-valeur détruites en tableaux. Le type de retour sera un tableau de tableaux, chaque sous-tableau contenant deux éléments : la clé et la valeur. Quelque chose comme [[key1, value1], [key2, value2], [key3, value3] ... ]. La fonction préserve l’ordre des attributs de l’objet. Dans l’implémentation en coulisses, les paires clé-valeur sont formées en itérant sur les propriétés de l’objet. Reportez-vous au code suivant pour mieux comprendre le comportement de la fonction Object.entries(). Nous utilisons JSON.stringify() pour obtenir une version de chaîne lisible par l’homme des valeurs sorties par la fonction.

var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));

Production:

"[["id","1"],["name","mango"],["color","yellow"]]"

Nous pouvons utiliser les Object.entries() d’une autre manière. Nous pouvons parcourir l’objet javascript et enregistrer les clés d’attribut et leurs valeurs. L’approche est illustrée par l’extrait de code suivant.

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}

Production:

id: 1
name: mango
color: yellow

Si nous souhaitons obtenir la key seule à partir de la fonction Object.entries(), nous pouvons enregistrer la key et supprimer la partie valeur.

Obtenir la key d’un objet javascript en utilisant la boucle for

Peut-on utiliser une simple boucle for pour récupérer les clés d’un objet ? Ce n’est pas une caractéristique communément connue d’une boucle for. Nous pouvons parcourir n’importe quel objet javascript comme nous le faisons pour les tableaux en utilisant la combinaison for-in. Il parcourt chaque paramètre avec le i (l’itérateur) contenant la key de l’objet et l’objet[i] contenant la valeur correspondant à la key dans l’objet. Regardons le code suivant pour mieux comprendre le concept.

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
}

Production:

id
1
name
mango
color
green

var a = {
  'id': '1',
  'name': 'mango',
  'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
  console.log(i);
  console.log(a[i]);
}

Production:

id
1
name
mango
color
{name: "yellow", appearance: "bright"}