如何按键分组 objects 并通过 reduce 函数 returns 修改数组？

Question

我使用 Redux 将我所有的产品存储在一个列表中。显示的列表如下所示：

[
  {
    "id": 1,
    "name": "BLACK TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 2,
    "name": "GREEN TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 3,
    "name": "PURPLE TEA",
    "supplieruuid": "BUNZL",
  },
  {
    "id": 4,
    "name": "RAINBOW TEA",
    "supplieruuid": "BUNZL",
  },
]

我正在使用这个 reduce 函数通过键 supplieruuid.

将这些产品分组在一起

export const selectSortedItems = (state) => state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});

这个 returns 这个按关键字 supplieruuid 分组的产品数组。

[
    {
        "SLIGRO": [
        {
            "id": 1,
            "name": "BLACK TEA",
            "supplieruuid": "SLIGRO",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
            "supplieruuid": "SLIGRO",
        },
        ],
        "BUNZL": [
        {
            "id": 3,
            "name": "PURPLE TEA",
            "supplieruuid": "BUNZL",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
            "supplieruuid": "BUNZL",
        },
        ],
    },
]

除非我需要返回如下：

 [
    {
        title: "SLIGRO",
        data: [
        {
            "id": 1,
            "name": "BLACK TEA",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
        },
        ],
    },
    {
        title: "BUNZL",
        data: [
        {
            "id": 3,
            "name": "PURPLE TEA",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
        },
        ],
    },
]

如何修改reduce函数来显示上面的数组？添加标题和数据。

Answer 1

保持你的 selectSortedItems 原样，我们可以创建另一个函数来按你的意愿映射它。

const selectSortedItems = (state) => {
  const sortedBySupplierUUID = state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});
  return Object.keys(selectSortedItems(sortedBySupplierUUID)).map(key => ({ title: key, data: sortedBySupplierUUID[key] }))};
}

Answer 2

因为你正在使用 reduce，所以你需要传递一个空的 [] 作为累加器。

其次，您需要搜索元素是否存在于 acc 数组中。如果存在，则将对象推送到 acc 中，否则添加一个包含 2 属性 title 和 data.

的新对象

const arr = [
  {
    id: 1,
    name: "BLACK TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 2,
    name: "GREEN TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 3,
    name: "PURPLE TEA",
    supplieruuid: "BUNZL",
  },
  {
    id: 4,
    name: "RAINBOW TEA",
    supplieruuid: "BUNZL",
  },
];

const result = arr.reduce((acc, curr) => {
  const { supplieruuid } = curr;
  const objInAcc = acc.find((o) => o.title === supplieruuid);
  if (objInAcc) objInAcc.data.push(curr);
  else acc.push({ title: supplieruuid, data: [curr] });
  return acc;
}, []);

console.log(result);

Answer 3

您可以对对象进行分组，对数据进行不需要的属性解构。最后只取对象的值。

const
    data = [{ id: 1, name: "BLACK TEA", supplieruuid: "SLIGRO" }, { id: 2, name: "GREEN TEA", supplieruuid: "SLIGRO" }, { id: 3, name: "PURPLE TEA", supplieruuid: "BUNZL" }, { id: 4, name: "RAINBOW TEA", supplieruuid: "BUNZL" }],
    result = Object.values(data.reduce((r, { supplieruuid: title, ...o }) => {
        (r[title] ??= { title, data: [] }).data.push(o);
        return r;
    }, {}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

如何按键分组 objects 并通过 reduce 函数 returns 修改数组？

How do I group objects by key and modify the array the reduce function returns?

javascript

reduce

reactjs

redux

react-redux-form