Arrays 在TypeScript中创建具有多个属性的数组时删除重复项

我从API收到一个数组，如下所示：

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

在此基础上，我想创建一个如下所示的数组：

countries = [
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'US'},
];

    const data = [
      {name: 'Ana', country: 'US', language: 'EN'},
      {name: 'Paul', country: 'UK', language: 'EN'},
      {name: 'Luis', country: 'PH', language: 'SP'},
      {name: 'Tom', country: 'US', language: 'EN'}
    ];

    let unique = [...new Set(data.map(item => item.country))].map(x => {return {filter: 'Country', value: x}});
    console.log(unique);

为此，我尝试的是：

countries = Array.from([...new Set(this.results.map(item => ({categoryOfFilter: 'country', value: item.country})))]);

因为我被告知要使用set。这确实会创建上面指定的数组，但它包含重复的数组。像这样：

countries = [
  {filter: 'country', value: 'US'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'US'},
];

你们知道吗？事实上，我一开始对js不太在行，所以我不想在这里拉伸。

看看这个代码笔：

大概是这样的：

countries = [
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'US'},
];

    const data = [
      {name: 'Ana', country: 'US', language: 'EN'},
      {name: 'Paul', country: 'UK', language: 'EN'},
      {name: 'Luis', country: 'PH', language: 'SP'},
      {name: 'Tom', country: 'US', language: 'EN'}
    ];

    let unique = [...new Set(data.map(item => item.country))].map(x => {return {filter: 'Country', value: x}});
    console.log(unique);

请参阅此代码笔：

大概是这样的：

countries = [
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'US'},
];

    const data = [
      {name: 'Ana', country: 'US', language: 'EN'},
      {name: 'Paul', country: 'UK', language: 'EN'},
      {name: 'Luis', country: 'PH', language: 'SP'},
      {name: 'Tom', country: 'US', language: 'EN'}
    ];

    let unique = [...new Set(data.map(item => item.country))].map(x => {return {filter: 'Country', value: x}});
    console.log(unique);

Set对象允许您存储任何类型的唯一值，无论 基本值或对象引用

对于对象，集合不是这样工作的。这些项都是不同的，因为它们具有不同的对象引用，即使它们的属性都具有相同的值

它将像这样工作，将它分成两行以保持可读性

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

// create a set with all country codes. Set works fine with strings
const countryCodes = new Set(results.map(item => item.country));

// spread the set values into a new array and map that to the target objects
const countries = [...countryCodes].map(value => {return {filter: 'country', value}});

console.log(countries);

Set对象允许您存储任何类型的唯一值，无论 基本值或对象引用

对于对象，集合不是这样工作的。这些项都是不同的，因为它们具有不同的对象引用，即使它们的属性都具有相同的值

它将像这样工作，将它分成两行以保持可读性

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

// create a set with all country codes. Set works fine with strings
const countryCodes = new Set(results.map(item => item.country));

// spread the set values into a new array and map that to the target objects
const countries = [...countryCodes].map(value => {return {filter: 'country', value}});

console.log(countries);

---

谢谢，凯尔，它工作得很好。但我可以问一下，为什么第二张地图中需要返回？很抱歉问这么一个听起来很傻的问题，但我真的是一个新手，我想完全理解，不仅仅是让它工作……下面的答案有一个更清晰的版本，更容易阅读。但本质上，我们在这里所做的是获得国家的不同版本，然后使用过滤器和值属性重建您想要的对象。实际上，返回并不是完全必要的，您可以像以前那样执行：x=>{filter:'Country'，value:x}。只是不同的语法。因为我使用了大括号，所以我声明了一个内联函数，然后需要返回结果。。。使用大括号可以执行多行语句。这在这里是不必要的。但是，如果我想做一个复杂的多行映射，那就是我使用内联函数的主要原因。谢谢Kyle，它工作得很好。但我可以问一下，为什么第二张地图中需要返回？很抱歉问这么一个听起来很傻的问题，但我真的是一个新手，我想完全理解，不仅仅是让它工作……下面的答案有一个更清晰的版本，更容易阅读。但本质上，我们在这里所做的是获得国家的不同版本，然后使用过滤器和值属性重建您想要的对象。实际上，返回并不是完全必要的，您可以像以前那样执行：x=>{filter:'Country'，value:x}。只是不同的语法。因为我使用了大括号，所以我声明了一个内联函数，然后需要返回结果。。。使用大括号可以执行多行语句。这在这里是不必要的。但这就是我之所以使用内联函数的主要原因，因为我想做一个复杂的多行映射。