Maison > Tutoriel CMS > WordPresse > le corps du texte

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

WBOY
Libérer: 2023-08-27 09:17:12
original
782 Les gens l'ont consulté

Comment parcourir les clés dobjet à laide 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"
Copier après la connexion

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]]
Copier après la connexion

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
})


Copier après la connexion

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
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal