使用键属性显示不同的值

Posted 2023-02-22

【中文标题】使用键属性显示不同的值

【英文标题】：Showing the distinct values using key property

【发布时间】：2019-12-10 22:58:10

【问题描述】：

我正在构建一个类别过滤器，但我一直在显示选项的重复项。

我有一个对象数组：

filterData = [
   name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA' ,
   name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA' ,
   name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK' ,
   name: 'Azula', bender: 'no', nation: 'Fire', person: 'yes', show: 'ATLA' 
];

如您所见，'bender' 属性只有两种变体：yes 和 no。我试图获得一个单独的是和否数组：

benderArray = this.filterData.map((e) => 
    return e.bender
  )

我正在尝试使用选项标签显示每个值，但我只需要唯一值。

<select id="bender" value=this.state.bender>
  benderArray.map(option => <option key=option value=option>option</option>)
</select>

我怎样才能做到这一点？

【参考方案1】：

您可以使用set，它会自动为您删除所有重复值：

const filterData = [ name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA' ,  name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA' ,  name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK' ,  name: 'Azula', bender: 'no', nation: 'Fire', person: 'yes', show: 'ATLA' ];

const filtered = [...new Set(filterData.map(i => i.bender))]
console.log(filtered)

您也可以将set 与reduce 一起使用，并随时添加值：

const filterData = [ name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA' ,  name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA' ,  name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK' ,  name: 'Azula', bender: 'no', nation: 'Fire', person: 'yes', show: 'ATLA' ];

const set = new Set([])
const filtered = filterData.reduce((a, bender:b) => (!set.has(b) && set.add(b) && a.push(b), a), [])
console.log(filtered)

最后，你可以单独使用reduce：

const filterData = [ name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA' ,  name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA' ,  name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK' ,  name: 'Azula', bender: 'no', nation: 'Fire', person: 'yes', show: 'ATLA' ];

const filtered = filterData.reduce((a, bender:b) => (!a.includes(b) && a.push(b), a), [])
console.log(filtered)

如果你愿意，你可以把它变成一个实用函数，这样你就可以在其他属性上调用它：

const filterData = [ name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA' ,  name: 'Appa', bender: 'yes', nation: 'Air', person: 'no', show: 'ATLA' ,  name: 'Asami', bender: 'no', nation: 'Republic City', person: 'yes', show: 'LOK' ,  name: 'Azula', bender: 'no', nation: 'Fire', person: 'yes', show: 'ATLA' ];

const getUniqueValues = (data, prop) => 
    const s = new Set([])
    return filterData.reduce((a, [prop]:p) =>
        (!s.has(p) && s.add(p) && a.push(p), a)
    , [])


console.log(getUniqueValues(filterData, 'bender'))
console.log(getUniqueValues(filterData, 'show'))
console.log(getUniqueValues(filterData, 'nation'))

从这个JSPerf可以看出set+reduce是最好的方法：

【参考方案2】：

您应该事先过滤您的数组以仅保留唯一值

benderArray = this.filterData.map((e) => 
    return e.bender
  ).filter((e, index, self) => self.indexOf(e) === index);