Maison > interface Web > js tutoriel > Comment puis-je extraire efficacement les valeurs de propriété dans un tableau en JavaScript ?

Comment puis-je extraire efficacement les valeurs de propriété dans un tableau en JavaScript ?

DDD
Libérer: 2024-12-24 07:57:14
original
994 Les gens l'ont consulté

How Can I Efficiently Extract Property Values into an Array in JavaScript?

Extraire des valeurs de propriété sous forme de tableaux en JavaScript

En JavaScript, travailler avec des tableaux d'objets est un scénario courant. Une tâche fréquente consiste à extraire des valeurs de propriété spécifiques de chaque objet et à créer un tableau contenant ces valeurs. Bien que les fonctions personnalisées puissent accomplir cela, il existe des approches plus élégantes et idiomatiques.

Question originale

Étant donné un tableau d'objets avec une structure spécifique, l'objectif est d'extraire un champ (propriété) de chaque objet et renvoie un tableau contenant ces valeurs. Par exemple, l'extraction du champ "foo" devrait produire un tableau [1, 3, 5] à partir du tableau d'objets suivant :

objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];
Copier après la connexion

Solutions idiomatiques

Au lieu d'utiliser une boucle for traditionnelle et l'approche push, envisagez ces solutions idiomatiques :

Méthode 1 : Array.map() avec Arrow Fonction

let result = objArray.map(a => a.foo);
Copier après la connexion

Méthode 2 : Array.map() avec déstructuration d'objet

let result = objArray.map(({ foo }) => foo);
Copier après la connexion

Description de la fonction

Les deux méthodes utilisent la méthode Array.prototype.map(), qui transforme chaque élément d'un tableau à l'aide d'une fonction de rappel fournie. Dans notre cas, la fonction de rappel extrait le champ spécifié ("foo") de chaque objet. La fonction map() renvoie un nouveau tableau contenant les éléments transformés, qui sont ensuite affectés à la variable résultat.

Référence pour Array.map()

Pour plus d'informations sur Array.prototype. map(), reportez-vous au Mozilla Developer Network (MDN) documentation :
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map](https://developer.mozilla.org/en-US/docs /Web/JavaScript/Reference/Global_Objects/Array/map)

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!

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