JavaScript で共通プロパティによって配列項目をグループ化するには?

オブジェクトを使用した配列項目のグループ化

オブジェクトを含む配列を扱う場合、共通のプロパティに基づいて項目をグループ化すると便利です。これは、グループ名と関連する値のマッピングを作成することで実現できます。

次のような配列があるとします。

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

それを、項目が含まれる新しい配列に変換したいとします。は「group」プロパティによってグループ化されます:

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

これを実現するには、次を使用できます。手順:

1. 各「グループ」プロパティ値を空の配列にマップするマッピング オブジェクトを作成します。
2. 元の配列内の各項目を反復処理して、次の操作を行います。
   a. 「グループ」プロパティ値を取得します。
   b.マッピング オブジェクトにその「group」プロパティ値のキーが含まれている場合は、「color」プロパティ値を関連する配列にプッシュします。それ以外の場合は、空の配列の値を持つ新しいキーをマッピング オブジェクトに追加し、その配列に「color」プロパティ値をプッシュします。
3. 最後に、マッピング オブジェクトを目的の形式に変換します。ここで、キーは「group」プロパティ値とその値は、「group」プロパティと「color」プロパティを持つオブジェクトです。

これは JavaScript の例です。実装:

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

実行すると、このコードは目的のグループ化された配列を生成します:

groups:

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

以上がJavaScript で共通プロパティによって配列項目をグループ化するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。