Javascript 删除重复项并按最频繁的标记对数组排序

我有一个对象数组。对象具有标记数组

例如：

const tags =
[{
      id:"1,
      Category: "Food"
      tags: ["One", "Two", "Three"],
},
{
      id:"2,
      Category: "Drinks"
      tags: ["Four", "Five", "Six"],
},
{
      id:"3,
      Category: "Herbs"
      tags: ["One", "Two", "Three"], // These tags are duplication of the first object and should not be in final list of tags (output).
}];

我的JSX代码示例：

tags.map(tags =>
        [...new Set(tags.tags)] // ?? I was playing with set, because I need delete duplications and also sort the final output by most frequent used tags
          .map(tag => (
            <Link to={"/" + tags.category + "/" + tag}>
              {tag}
            </Tag>
          ))
      )

tags.map（tags=>
[…new Set（tags.tags）]/？我在玩Set，因为我需要删除重复项，并根据最常用的标记对最终输出进行排序
.map（标记=>(
{tag}
))
)

---

我正在尝试删除标记的最终输出列表中重复的标记。正如您在我的代码中所看到的，我尝试过的解决方案之一是[…new Set（tags.tags）]——因为我需要两件事：1）对最常用的标记进行排序，并删除重复项。这个解决方案对排序很有效（简单数组对两者都有效），但是由于对象的数组，仍然存在重复。我尝试了一些在codepen中设置的魔法，但没有成功。你知道怎么解决吗？我知道有lodash，但我更愿意使用没有lib的自己的解决方案。谢谢大家!

将数组缩小为一个映射，如果标记在映射中，则使用

array.forEach（）

添加标记及其类别，并计算标记的出现次数（

freq

）。转换为

[tag，{freq，category}]

对数组，按

freq

排序，并映射到JSX：

const{usemo}=React；
const getTagsWithCategories=tags=>Array.from(
减少（（r，o）=>{
o、 tags.forEach（tag=>{
if（！r.has（tag））r.set（tag，{category:o.category，freq:0}）；//init
r、 get（tag）.freq++；//增加频率
});
返回r；
}，新映射（））
.sort（（[，a]，，b]）=>b.freq-a.freq）//按频率排序
常量标记=（{Tags}）=>{
const pairs=useMemo（（）=>getTagsWithCategories（标记），[tags]）；
返回pairs.map（（[tag，{category}]）=>(
))
};
const tags=[{“id”：1，Category:“Food”，“tags:[“一”，“二”，“三”]}，{“id”：2，Category:“饮料”，“tags:[“四”，“五”，“六”]}，{“id”：3，Category:“香草”，“tags:[“一”，“二”，“三”]}；
ReactDOM.render(
,
根
);
a:not（：最后一个孩子）{
右边距：1米；
}

应该使用哪个类别，例如，
一个
-
食品
或
草药
？这无关紧要：因为我只需要输出简单的（过滤、排序的..）标签列表。：）