Javascript React.js：组合来自对象数组的属性

我有一个对象数组，我试图组合几个属性，然后返回一个新的对象数组。以下是原始对象数组的结构示例：

[
      {
        "memID": "180",
        "memType": "Movie",
        "date": {
          "month": 5,
          "year": 1980
        },
        "favourite": null,
        "public": null,
        "music": [],
        "movie": [
          {
            "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
          }
        ],
        "tvshow": [],
        "game": []
      },
      {
        "memID": "65",
        "memType": "Game",
        "date": {
          "month": 5,
          "year": 1980
        },
        "favourite": null,
        "public": null,
        "music": [],
        "movie": [],
        "tvshow": [],
        "game": [
          {
            "boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
          }
        ]
      },
      {
        "memID": "178",
        "memType": "Movie",
        "date": {
          "month": 5,
          "year": 1980
        },
        "favourite": null,
        "public": null,
        "music": [],
        "movie": [
          {
            "poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
          }
        ],
        "tvshow": [],
        "game": []
      },
]

我想做的是返回一个新的对象数组，通过组合

月

和

年

属性，按

月

对数据进行分组，例如：

[
    {
        "monthYear": {
            "5-1980": {
                {
                    "memID": "180",
                    "memType": "Movie",
                    "favourite": null,
                    "public": null,
                    "music": [],
                    "movie": [
                        {
                            "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
                        }
                    ],
                    "tvshow": [],
                    "game": []
                },
                {
                    "memID": "65",
                    "memType": "Game",
                    "favourite": null,
                    "public": null,
                    "music": [],
                    "movie": [],
                    "tvshow": [],
                    "game": [
                        {
                            "boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
                        }
                    ]
                },
                {
                    "memID": "178",
                    "memType": "Movie",
                    "favourite": null,
                    "public": null,
                    "music": [],
                    "movie": [
                        {
                            "poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
                        }
                    ],
                    "tvshow": [],
                    "game": []
                },
            }
        }
    }
]

我一直在尝试将阵列展平，然后对其进行重组，但还没有找到最佳方法。我尝试过

.flat（）

，

.flatMap（）

和其他一些方法，但没有成功。

我建议使用它

const formatted = _.groupBy(data, item => `${item.date.month}-${item.date.year}`);

该函数将创建以下结构。这有点不同，但它根据月份和年份对项目进行分组

{
  "5-1980": [
    {
      "memID": "180",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    },
    {
      "memID": "65",
      "memType": "Game",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [],
      "tvshow": [],
      "game": [
        {
          "boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
        }
      ]
    },
    {
      "memID": "178",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    }
  ]
}

我建议用这个

const formatted = _.groupBy(data, item => `${item.date.month}-${item.date.year}`);

该函数将创建以下结构。这有点不同，但它根据月份和年份对项目进行分组

{
  "5-1980": [
    {
      "memID": "180",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    },
    {
      "memID": "65",
      "memType": "Game",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [],
      "tvshow": [],
      "game": [
        {
          "boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
        }
      ]
    },
    {
      "memID": "178",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    }
  ]
}

---

这应该可以做到：

inputData.reduce（（acc，item）=>{
常量键=`${item.date.month}-${item.date.year}`；
const{date，…realData}=item；
acc[键]=[…acc[键]| |[]，realData]；
返回acc；
}, {})

关于代码的解释

const key=`${item.date.month}-${item.date.year}`

-此部分创建项的键。在你的情况下，它是一个月组成的一年

const{date，…realData}=item

-这里我们从整体上删除date对象，因为您不再需要它（根据所需的输出）

…acc[key]| |[]

-如果这是循环中使用该键的第一个对象，

acc[key]

将为null，因此我们使用空数组初始化。如果这不是第一个键，那么

acc[key]

将已经是一个数组。然后，我们将新创建的对象添加到该数组中

---

希望这就是你所追求的。

这应该可以做到：

inputData.reduce（（acc，item）=>{
常量键=`${item.date.month}-${item.date.year}`；
const{date，…realData}=item；
acc[键]=[…acc[键]| |[]，realData]；
返回acc；
}, {})

关于代码的解释

const key=`${item.date.month}-${item.date.year}`

-此部分创建项的键。在你的情况下，它是一个月组成的一年

const{date，…realData}=item

-这里我们从整体上删除date对象，因为您不再需要它（根据所需的输出）

…acc[key]| |[]

-如果这是循环中使用该键的第一个对象，

acc[key]

将为null，因此我们使用空数组初始化。如果这不是第一个键，那么

acc[key]

将已经是一个数组。然后，我们将新创建的对象添加到该数组中

希望这就是您想要的。

使用自定义密钥进行分组，下面是一个示例

const数据=[{
“memID”：“180”，
“memType”：“电影”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[{
“海报”：https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}],
“电视秀”：[]，
“游戏”：[]
},
{
“memID”：“65”，
“memType”：“游戏”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[]，
“电视秀”：[]，
“游戏”：[{
“boxArt”：https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}]
},
{
“memID”：“178”，
“memType”：“电影”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[{
“海报”：https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}],
“电视秀”：[]，
“游戏”：[]
},
];
const groupedData=data.reduce（（acc，curr）=>{
常数{月，年}=当前日期；
常数k=`${month}-${year}`；
acc[k]=（acc[k]| |[]）concat（curr）；
返回acc；
}，Object.create（null））；
常数结果=[{
月份：分组数据
}];
控制台日志（结果）用于按自定义键分组，下面是一个示例


const数据=[{
“memID”：“180”，
“memType”：“电影”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[{
“海报”：https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}],
“电视秀”：[]，
“游戏”：[]
},
{
“memID”：“65”，
“memType”：“游戏”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[]，
“电视秀”：[]，
“游戏”：[{
“boxArt”：https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}]
},
{
“memID”：“178”，
“memType”：“电影”，
“日期”：{
“月”：5，
“年份”：1980年
},
“收藏夹”：空，
“公共”：空，
“音乐”：[]，
“电影”：[{
“海报”：https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}],
“电视秀”：[]，
“游戏”：[]
},
];
const groupedData=data.reduce（（acc，curr）=>{
常数{月，年}=当前日期；
常数k=`${month}-${year}`；
acc[k]=（acc[k]| |[]）concat（curr）；
返回acc；
}，Object.create（null））；
常数结果=[{
月份：分组数据
}];
控制台日志（结果）感谢您抽出时间查看此内容。我以前没用过lodash，但看起来很有用！我只是在测试一下——你知道有没有办法也按年度对订单进行排名？i、 e.5-1980，6-1980…1-1981，2-1981…1-1982，2-1982…你可以用。首先，我会对项目进行排序，然后使用groupBy（）对它们进行分组。如果排序看起来有点复杂，lodash还有另一个好方法：是的，我们只是在看orderBy——似乎已经做到了。非常感谢你的帮助