如何在 JavaScript 中以公共屬性對數組項目進行分組？-js教程-PHP中文網

如何在 JavaScript 中以公共屬性對數組項目進行分組？

Susan Sarandon

發布： 2024-12-18 19:50:11

原創

980 人瀏覽過

How to Group Array Items by a Common Property in 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"]}
]

登入後複製

要實現此目的，您可以使用以下內容步驟：

建立一個映射對象，將每個「群組」屬性值對應到一個空數組。
迭代原始數組中的每個項目，並且：
檢索「group」屬性值。
b.如果映射物件包含該「group」屬性值的鍵，則將「color」屬性值推入關聯的陣列中。否則，向映射物件新增一個值為空數組的新鍵，並將「顏色」屬性值推入該數組。
最後，將映射物件轉換為所需的格式，其中鍵是「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中文網其他相關文章！