javascript - 如何允许过滤器 bool 值是非互斥的？

Question

我正在尝试使用值为 true 或 false 的对象过滤我的结果。但是，这些过滤器并不相互排斥，这意味着不止一个可以为真。

显示的代码只允许一个过滤器工作，我想我需要想出一种方法来使 showData 动态，但我不太确定如何。

const filters = {
  letter: {
    A: false,
    B: false,
    C: false,
    D: false,
    E: false
  },
  number: {
    1: false,
    2: false,
    3: false,
    4: false
  },
  //...
};

const data = [
  {
    letter: "A",
    number: "1",
  },
  {
    letter: "B",
    number: "1",
  },
  {
    letter: "B",
    number: "2",
  },
  //...
],

const results = data.map((result, index) => {
  let showData = true;

  if (filters.letter.A) showData = result.letter === "A";
  if (filters.letter.B) showData = result.letter === "B";
  //...

  return (showData && result)
})}

预期输出的一个例子是如果 filters.letter.A 和 filters.letter.B 都是 true，那么 结果 将返回匹配这两个过滤器的对象数组。

Answer 1

预先在filters.letter中构造一个truthy keys数组，然后可以根据.letter是否存在来设置showCard当前正在迭代的卡片的数量包含在该数组中:

const trueLetterKeys = Object.entries(filters.letter)
  .filter(([, val]) => val)
  .map(([key]) => key);
// ...
{data.map(({ letter }, index) => {
  const showCard = trueLetterKeys.includes(letter);
  // ...

当项目不多时没关系，但为了降低复杂性，您可以使用 Set 的 truthy keys 而不是数组，因为 Set' s .has 比数组的 .includes 更快:

const trueLetterKeys = new Set(
  Object.entries(filters.letter)
    .filter(([, val]) => val)
    .map(([key]) => key)
);
// ...
{data.map(({ letter }, index) => {
  const showCard = trueLetterKeys.has(letter);
  // ...