在Javascript中链接可变数量的过滤器函数

假设我想重构这种方法，而不是使用for循环，还有其他方法吗 动态地执行此操作

  //to apply filter functions in one loop
  const booleanFilterFunctions = [
    (launchData) =>
      launchData.launch_year === filterState.year ||
      filterState.year === "0000",
    (launchData) => launchData.launch_success === filterState.launch,
    (launchData) => launchData.land_success === filterState.landing,
  ];
return (
 <div className={styles.grid}>
          {data
            .filter((launchData) => {
              let result = true;
              for (let i of booleanFilterFunctions)
                result = result && i(launchData);
              return result;
            })
            .map((launchData) => (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

//在一个循环中应用过滤器函数
常量布尔过滤器函数=[
（启动数据）=>
launchData.launch_year==filterState.year||
filterState.year==“0000”，
（launchData）=>launchData.launch\u成功===filterState.launch，
（launchData）=>launchData.land\u成功===filterState.landing，
];
返回(
{数据
.filter（（启动数据）=>{
让结果=真；
for（让我来看看BooleanFilterFunction）
结果=结果（&i）（启动数据）；
返回结果；
})
.map（（启动数据）=>(
{launchData.mission_name}{launchData.flight_number}
))}
);

您可以使用：

data.filter(launchData =>
  booleanFilterFunctions.every(i => i(launchData))
)

---

您是否考虑过将内部布尔逻辑链接起来，而不是一个接一个地应用3个过滤函数？从逻辑上看，您似乎只想在满足3个条件时显示内容。你可以这样做

const filterData = (launchData) =>
  (launchData.launch_year === filterState.year ||
    filterState.year === "0000") &&
  launchData.launch_success === filterState.launch &&
  launchData.land_success === filterState.landing;


return (
 <div className={styles.grid}>
          {data
            .filter(filterData)
            .map((launchData) => (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

const filterData=（launchData）=>
（launchData.launch_year==filterState.year||
filterState.year==“0000”）&&
launchData.launch\u success==filterState.launch&&
launchData.land_success===filterState.landing；
返回(
{数据
.filter（filterData）
.map（（启动数据）=>(
{launchData.mission_name}{launchData.flight_number}
))}
);

通过将条件直接放在内容上，您应该能够进一步优化，并且可以避免通过数据进行额外的迭代。大概

const shouldShowContent = (launchData) =>
  (launchData.launch_year === filterState.year ||
    filterState.year === "0000") &&
  launchData.launch_success === filterState.launch &&
  launchData.land_success === filterState.landing;


return (
 <div className={styles.grid}>
          {data
            .map((launchData) => shouldShowContent(launchData) && (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

const shouldShowContent=（launchData）=>
（launchData.launch_year==filterState.year||
filterState.year==“0000”）&&
launchData.launch\u success==filterState.launch&&
launchData.land_success===filterState.landing；
返回(
{数据
.map（（launchData）=>shouldShowContent（launchData）和(
{launchData.mission_name}{launchData.flight_number}
))}
);

我想你需要代码审查：嗯，也许是，但是审查和要求更好的方法之间的界限有点模糊，这当然不是为了工作：你可能想使用

和=（f，g）=>x=>f（x）和&g（x）

和

或=（f，g）=>x=>f（x）| g（x）检查组合谓词

如我在“是，我有”中所述，但这将默认问题的目的，以允许更动态的行为否，您不应“将条件直接放在内容上”。这将呈现一个包含

false

值的数组。@Bergi right。但是react不会呈现“false”值。这意味着它将只渲染非虚假元素。如果我遗漏了什么，请告诉我。是的，react可能会为您过滤掉它们，但在同一数组中混合不同类型仍然不是一个好的做法。

.filter（shouldShowContent）

调用更干净（几乎没有微优化的潜力）。至少使用类似于

shouldShowContent（launchData）？…：空值

如果您认为有必要。嗯。。右键，不让react渲染同一数组中的不同类型是有意义的。谢谢我在寻找一种组合方式，每个只需要一个函数，也许我应该更清楚，我想做的是获取可用函数的列表，比如说从用户那里，将它们全部应用到一个函数中go@IshankSharma否，我的答案中的

每个

都会在可用函数列表中调用（

booleanFilterFunctions

）并运行它们（

i（launchData）

）。它的作用与问题中的循环完全相同。