首页 > 解决方案 > Javascript按数组字段分组并减少

问题描述

我有这个数组。我想分组createdAt

 [
    {
      "createdAt": "2021-05-17T14:55:29.836Z",
      "machine": {
        "label": "MAQ_100",
      },
    },
    {
      "createdAt": "2021-03-10T13:22:45.694Z",
      "machine": {
        "label": "MAQ_33",
      },
    },
    {
      "createdAt": "2021-03-10T13:22:44.766Z",
      "machine": {
        "label": "MAQ_33",
      },
    },
    {
      "createdAt": "2019-04-13T10:06:13.120Z",
      "machine": {
        "label": "MAQ_33",
      },
    },
    {
      "createdAt": "2015-05-01T09:48:08.463Z",
      "machine": {
        "label": "MAQ_33",
      },
    },
    {
      "createdAt": "2015-05-01T09:48:08.463Z",
      "machine": {
        "label": "MAQ_77",
      },
    }
],

这是我的预期结果。我想要按 createdAt 分组的前一个数组,如果它具有相同的 createdAt,则推送每个项目。

[
    {"createdAtDates": ["17-05-2021"]}, 
    {"createdAtDates: ["10-03-2021","10-03-2021"]}, 
    {"createdAtDates": ["13-04-2019"]},
    {"createdAtDates": ["01-05-2015","01-05-2015"]}
]

这就是我所做的:

grouppedPallets() {
     return this.items.reduce(function (pallets, pallet) {
       const groups = pallets.filter((item) => item.date === pallet.date);
       const found = groups.length === 1;
       const group = found ? groups[0] : { createdAt: pallet.date, createdAtDates: [] };

       group.createdAtDates.push(pallet.date);
       if (!found) pallets.push(group);

       return pallets;
     }, []);
},

items() {
     return this.palletsConnection
       ? 
         this.palletsConnection.values.map((pallet) => ({
           ...pallet,
           date: formatDate(pallet.createdAt), //FORMAT DD-MM-YYYY
         }))
       : [];
   },

这就是我的做法grouppedPallet()

[
    {
      "createdAt": "17-05-2021",
      "createdAtDates": ["17-05-2021"]
    },
    {
      "createdAt": "10-03-2021",
      "createdAtDates": ["10-03-2021","10-03-2021"]
    },
    {
      "createdAt": "13-04-2019",
      "createdAtDates": ["13-04-2019"]
    },
    {
      "createdAt": "01-05-2015",
      "createdAtDates":["01-05-2015","01-05-2015"]
    }
]

我只想createdAtDates在减少数组之后存储。

标签: javascriptarraysvue.jsreduce

解决方案


items您可以轻松地在数组上实现第一个映射,并dd-mm-yyyy使用正则表达式获取格式数据,然后使用 reduce 生成最终结果。

const items = [
  {
    createdAt: "2021-05-17T14:55:29.836Z",
    machine: {
      label: "MAQ_100",
    },
  },
  {
    createdAt: "2021-03-10T13:22:45.694Z",
    machine: {
      label: "MAQ_33",
    },
  },
  {
    createdAt: "2021-03-10T13:22:44.766Z",
    machine: {
      label: "MAQ_33",
    },
  },
  {
    createdAt: "2019-04-13T10:06:13.120Z",
    machine: {
      label: "MAQ_33",
    },
  },
  {
    createdAt: "2015-05-01T09:48:08.463Z",
    machine: {
      label: "MAQ_33",
    },
  },
  {
    createdAt: "2015-05-01T09:48:08.463Z",
    machine: {
      label: "MAQ_77",
    },
  },
];

const result = items
  .map(({ createdAt }) => {
    return {
      createdAtDates: createdAt
        .split("T")[0]
        .replace(/(\d{4})-(\d{2})-(\d{2})/, "$3-$2-$1"),
    };
  })
  .reduce((acc, curr) => {
    const { createdAtDates } = curr;
    const isExist = acc.find((o) => {
      return o.createdAtDates[0] === createdAtDates;
    });
    if (isExist) {
      isExist.createdAtDates.push(createdAtDates);
    } else {
      acc.push({ createdAtDates: [createdAtDates] });
    }
    return acc;
  }, []);

console.log(result);


推荐阅读