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
DDDoriginal
2024-12-24 07:57:14903parcourir

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} ];

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

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

let result = objArray.map(({ foo }) => foo);

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:
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