从数组中删除/过滤重复国籍答案

【问题标题】：Angular remove/filter duplicate nationality from array从数组中删除/过滤重复国籍
【发布时间】：2020-11-24 23:20:42
【问题描述】：

我有两个下拉选项，一个是国家，一个是国籍。两个下拉列表共享一个数组：countryAndNationalityList。

我试图只显示一次匹配的国籍，因为每个国家/地区都相同。

<select class="form-control" formControlName="residence_country">
    <option *ngFor="let item of removeNationalityDuplicates(countryAndNationalityList.sort(sortCountryAsc))" [ngValue]="item.country">{{item.country}}</option>
</select>

<select class="form-control" formControlName="nationality">
    <option value="" disabled>Your Nationality?</option>
    <option *ngFor="let item of countryAndNationalityList.sort(sortNationalityAsc)" [ngValue]="item.nationality">{{item.nationality}}</option>
</select>

我的 countryAndNationalityList 数组如下所示：

[{country: "United Arab Emirates Abu Dhabi", nationality: "Emirati"},
{country: "United Arab Emirates Ajman", nationality: "Emirati"},
{country: "United Arab Emirates Al-Quwain", nationality: "Emirati"},
{country: "United Arab Emirates Dubai", nationality: "Emirati"},
{country: "United Arab Emirates Fujairah", nationality: "Emirati"},
{country: "United Arab Emirates Ras Al Khaimah", nationality: "Emirati"},
{country: "United Arab Emirates Sharjah", nationality: "Emirati"}]

我正在尝试使用以下函数删除国籍下拉列表中的重复阿联酋：removeNationalityDuplicates 删除重复项，如下所示：

<select class="form-control" formControlName="nationality">
    <option value="" disabled>Your Nationality?</option>
    <option *ngFor="let item of removeNationalityDuplicates(countryAndNationalityList.sort(sortNationalityAsc))" [ngValue]="item.nationality">{{item.nationality}}</option>
</select>

removeNationalityDuplicates 在哪里

  removeNationalityDuplicates(array) {
    return [... new Set(array)];
  }

  sortNationalityAsc(previous, next) {
    return previous.nationality > next.nationality;
  }

我也尝试过使用：

removeNationalityDuplicates(array) {
  return array.reduce((uniqueArr, curVal)=> {
    if (!uniqueArr.includes(curVal.nationality)) {
      uniqueArr.push(curVal);
    }
    return uniqueArr;
  }, []);
}

如何去除重复的国籍？

【问题讨论】：

标签： javascript arrays angular duplicates ngfor

【解决方案1】：

如果您正在寻找过滤原始数组但不更改其属性的可能性，请使用以下解决方案：

const removeNationalityDuplicates = (arr) => [...new Map(arr.map(item => [item.nationality, item])).values()]


const list = [{
    country: "United Arab Emirates Abu Dhabi",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Ajman",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Al-Quwain",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Dubai",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Fujairah",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Ras Al Khaimah",
    nationality: "Emirati"
  },
  {
    country: "United Arab Emirates Sharjah",
    nationality: "Emirati"
  }
]

console.log(removeNationalityDuplicates(list))

如果您只想获得国籍列表，请查看enno.void's solution。

【讨论】：

【解决方案2】：

removeNationalityDuplicates(array) {
  return Array.from(new Set(array.map(x => x.nationality)));
}

解释：

array.map(x => x.nationality) 仅使用 nationality 键创建一个新数组
new Set(array.map(x => x.nationality)) 创建一组这个数组（像 distinct 一样工作）
Array.from(new Set(array.map(x => x.nationality))); 将集合转换为数组。

【讨论】：