在 Typescript 中过滤掉键值数据结构中的唯一数据

Question

我想用“uniqBy”过滤我的输入数据。我是打字稿的新手，不知道如何实现它。我知道我必须遍历每个子列表并为每个元素（data1，data2）制作 uniqby。这是我的输入数据如下：

const data = [
     {
       data1: [
                {
                 id: "1",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "2",
                 label: "ONE",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "3",
                 label: "TWO",
                 anotherId: "11",
                 mygroupId: 1,
                 group: "Group_One",
                },
              ]
      },
        data2: [
                {
                 id: "4",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "5",
                 label: "TWO",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_One",
                }
               ]
     ]

我想过滤我的数据，以便在每个列表 data1 和 data2 中只有基于这些组中每个项目的“标签”的唯一信息。

我想要类似的东西：

...
map(data => {
  const grouped = groupBy(item => item.group, data);

  const uniq = uniqBy( ... );

  return uniq;
})
...

const uniqByLabel = [
     {
       data1: [
                {
                 id: "1",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "3",
                 label: "TWO",
                 anotherId: "11",
                 mygroupId: 1,
                 group: "Group_One",
                },
              ]
      },
        data2: [
                {
                 id: "4",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_Two",
                },
                {
                 id: "5",
                 label: "TWO",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_Two",
                }
               ]
     ]

Answer 1

您可以在Object.keys、reduce 和uniqBy 的帮助下转换您的数据结构。我在这里假设您的意思是 lodash uniqBy，因为您提到了它的确切名称。没有 lodash 的 uniqBy 版本使用 reduce 也很容易实现（请参阅下面的示例以获取灵感）。让我们以你的例子为例：

const res = uniqBy(x => x.label, data[0].data1);

将使用label 鉴别器过滤您的一个子数组以获取唯一条目（第一项获胜）。假设，数据结构可能包含多个值并且在其他方​​面类似于您的示例，您可以这样编码：

const newData = data.map((d, idx) =>
  // make Object.keys typed by assertion
  (Object.keys(d) as Array<keyof typeof data[number]>).reduce(
    (acc, cur) => ({
      ...acc,
      [cur]: uniqBy(x => x.label, d[cur])
    }),
    // keep same type as each top array item
    {} as typeof data[number]
  )
);

Codesandbox

完整示例（我在这里使用functional version of lodash）：

import uniqBy from "lodash/fp/uniqBy";

const data = [
  {
    data1: [
      {
        id: "1",
        label: "ONE",
        anotherId: "3",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "2",
        label: "ONE",
        anotherId: "33",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "3",
        label: "TWO",
        anotherId: "11",
        mygroupId: 1,
        group: "Group_One"
      }
    ]
  },
  {
    data2: [
      {
        id: "4",
        label: "ONE",
        anotherId: "3",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "5",
        label: "TWO",
        anotherId: "33",
        mygroupId: 1,
        group: "Group_One"
      }
    ]
  }
];

const res = data.map((d, idx) =>
  (Object.keys(d) as Array<keyof typeof data[number]>).reduce(
    (acc, cur) => ({
      ...acc,
      [cur]: uniqBy(x => x.label, d[cur])
    }),
    {} as typeof data[number]
  )
);

document.getElementById("app").innerHTML = `
<pre>
  ${JSON.stringify(res, null, 2)}
</pre>
`;