Comment parcourir les clés d'objet à l'aide de JavaScript

Les objets personnalisés ne peuvent pas être utilisés for...of 循环进行迭代。此外，您不能使用 map() 和 forEach() 等迭代器方法。如果这样做，您将在每个实例中收到 TypeError .

Au lieu de cela, utilisez for...in pour parcourir les objets. Cette méthode parcourt toutes les propriétés énumérables et non symboliques de l'objet.

Dans l'exemple ci-dessous, nous l'utilisons pour parcourir les trois propriétés de obj et pour chaque propriété, nous enregistrons une chaîne composée du nom de la propriété (c'est-à-dire sa clé) et de sa valeur correspondante.

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Nous initialisons la boucle avec une variable prop qui contiendra un nom de propriété différent (également appelé clé) à chaque itération des propriétés de l'objet. Le code spécifié dans le bloc sera exécuté à chaque itération.

Voici une petite démo pour démontrer cela (cliquez sur Résultats pour voir le résultat) :

À l'intérieur de la boucle, à chaque itération, nous enregistrons l'un des noms et valeurs de propriété de l'objet dans la console.

Une autre façon de parcourir les propriétés d'un objet consiste à transmettre l'objet dans Object.entries() et à appeler cette méthode. Cela renverra toutes les propriétés énumérables de cet objet dans un tableau multidimensionnel (tableau de tableaux) :

const obj = {a: 1, b: 2, c: 3};

let result = Object.entries(obj)

console.log(result)
// [["a", 1], ["b", 2], ["c", 3]]

Ensuite, nous pouvons parcourir dessus en utilisant n'importe quelle méthode d'itérateur de tableau :

Object.entries(obj).forEach(entry => {
  // do something
})

Object.entries(obj).map(entry => {
  // do something
})

Object.entries(obj).every(entry => {
  // do something
})

Vous pouvez également utiliser for...of Boucle :

for (const entry of Object.entries(obj)) {
  // do something
}

for (const [key, value] of Object.entries(obj)) {
  // do something
}

Voici quelques démos :

Ici, puisque nous obtenons un tableau de clés et de valeurs à chaque itération, nous utilisons simplement respectivement entry[0] et entry[1] pour les visiter. Si vous n'avez besoin que de clés au lieu de clés et de valeurs, utilisez Object.keys() au lieu de entry[0] 和 entry[1] 来访问它们。如果您只需要键而不是键和值，请使用 Object.keys() 代替 Object.entries().

for...of Fondamentalement pareil :

Conclusion

Ce sont les méthodes par lesquelles nous pouvons facilement parcourir les propriétés et les clés d'un objet en JavaScript. Consultez notre article JavaScript pour plus d'articles et de didacticiels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!