JavaScript est l’un des langages de programmation qui vous permet d’itérer sur les propriétés d’un objet sans utiliser d’outil ou d’API complexe.

Dans cet article, nous allons explorer, comment cette technique simple a évolué au fil des ans et Pourquoi nous avons quelque chose maintenant, qui peut être classé comme élégant !

Let have a look on below code and then we can talk further

var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}

Output:

a : 1
b : 2
c : 3

Beaucoup d’entre nous omettent la vérification obj.hasOwnProperty

En JavaScript, lorsque vous itérez, il est très critique d’éviter l’itération sur les propriétés parentales de l’objet( et ses propriétés parentales et son parent…Vous avez compris l’idée !). Manquer peut résulter en un code lent.

Heureusement, la plupart d’entre nous travaillant avec une sorte d’outil de linting qui donnera un avertissement si vous manquez cette vérification.

Mode moderne – Itération dans ES6+

Maintenant, passons au JavaScript moderne ou ES6+!

Consciente de ce problème, l’équipe de l’ECMA a ajouté un support pour une itération simple dans ES6.

Et cela commence avec – Object.entries()

La méthode Object.entries() renvoie un tableau de paires de propriétés énumérables propres à un objet donné , dans le même ordre que celui fourni par une boucle for…in (la différence étant qu’une boucle for-in énumère également les propriétés dans la chaîne de prototypes).

Par exemple, le code ci-dessous

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

donnera une sortie comme ci-dessous, Un tableau de tableaux de deux éléments, où à l’index : 0, nous aurons la clé et à l’indice:1, nous aurons la valeur

Maintenant, cette simple fonction va conduire à une itération élégante de l’objet, vérifiez le code ci-dessous.

Etape 1 : Commencez avec `Object.entries`

const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}

Sortie:

key: a : value: 1
key: b : value: 2
key: c : value: 3

C’était déjà bien, mais rendons-le génial

Etape 2 : Utiliser la destruction

Comprenons l' »entrée » si nous mettons à jour la boucle for ci-dessus comme ci-dessous

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

la sortie sera comme ci-dessous

Hmm…..Qu’est-ce que nous avons ici ?

Eh bien, chaque entrée est un tableau avec exactement deux éléments (appelé ‘tuple’), donc en utilisant ES6 Array destructuring, nous pouvons écrire du code comme

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

Appliquons le même concept sur la boucle for

const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}

Woohoo… c’est en effet Awesome !

Itération avec forEach

Vous voulez appliquer la même technique sur les fonctions intégrées Array, essayez le code ci-dessous

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Sortie:

a : 1
b : 2
c : 3

Merci!