删除重复项并按最常用的标签对数组进行排序

Question

我有对象数组。该对象具有标记数组。

例如：

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>
))
)

我正在尝试删除最终输出标签列表中的重复标签。正如您在我的代码中看到的那样，我尝试过的解决方案之一是 [...new Set(tags.tags(] - 因为我需要两件事 = 1( 对最常用的标签进行排序并删除重复项。此解决方案适用于排序(简单数组适用于两者(，但由于对象数组，仍然存在重复项。我已经在代码笔中尝试了一些 SET 的魔法，但没有成功。您知道如何解决它吗？我知道有 lodash，但我宁愿使用没有 lib 的自己的解决方案。谢谢！

Answer 1

将数组缩减为 Map，如果标签在 Map 中，则使用Array.forEach()添加带有其类别的标签，并计算标签的出现次数 (freq(。转换为[tag, { freq, category }]对的数组，按freq排序，并映射到 JSX：

const { useMemo } = React;
const getTagsWithCategories = tags => Array.from(
tags.reduce((r, o) => {
o.tags.forEach(tag => {
if(!r.has(tag)) r.set(tag, { category: o.Category, freq: 0 }); // init      
r.get(tag).freq++; // increase freq
});

return r;
}, new Map()))
.sort(([, a], [, b]) => b.freq - a.freq) // sort by freq
const Tags = ({ tags }) => {
const pairs = useMemo(() => getTagsWithCategories(tags), [tags]);
return pairs.map(([tag, { category }]) => (
<a href={`/${category}/${tag}`} key={tag}>
{tag}
</a>
))
};
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"]}];
ReactDOM.render(
<Tags tags={tags} />,
root
);

a:not(:last-child) {
margin-right: 1em;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>