使用键属性显示不同的值

Question

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

我有一个对象数组：

in_dir_1 (D1)

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

in_dir_2 (D2)

并且我试图用一个选项标签显示每个值，但是我只需要唯一的值。

out_dir (D3)

我该如何实现？

Answer 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是最好的选择：

Answer 2

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

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