Comment regrouper des éléments de tableau par une propriété commune en JavaScript ?

Regroupement d'éléments de tableau à l'aide d'un objet

Lorsque vous traitez des tableaux contenant des objets, il peut être utile de regrouper des éléments en fonction d'une propriété commune. Ceci peut être réalisé en créant un mappage des noms de groupe avec les valeurs associées.

Supposons que vous ayez un tableau comme celui-ci :

myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]

Vous souhaitez le convertir en un nouveau tableau où les éléments sont regroupés par la propriété "group":

myArray = [
  {group: "one", color: ["red", "green", "black"]},
  {group: "two", color: ["blue"]}
]

Pour y parvenir, vous pouvez utiliser ce qui suit étapes :

1. Créez un objet de mappage qui mappe chaque valeur de propriété « groupe » à un tableau vide.
2. Parcourez chaque élément du tableau d'origine et :
   a. Récupérez la valeur de la propriété "groupe".
   b. Si l'objet de mappage contient une clé pour cette valeur de propriété « groupe », insérez la valeur de propriété « couleur » dans le tableau associé. Sinon, ajoutez une nouvelle clé à l'objet de mappage avec la valeur d'un tableau vide et insérez la valeur de la propriété "color" dans ce tableau.
3. Enfin, transformez l'objet de mappage dans le format souhaité, où les clés sont les Les valeurs de propriété "group" et les valeurs sont des objets avec les propriétés "group" et "color".

Voici un exemple JavaScript implémentation :

var myArray = [
    {group: "one", color: "red"},
    {group: "two", color: "blue"},
    {group: "one", color: "green"},
    {group: "one", color: "black"}
];

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});

Lors de l'exécution, ce code produira le tableau groupé souhaité :

groups:

{
  "one": [
    "red",
    "green",
    "black"
  ],
  "two": [
    "blue"
  ]
}

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!