Question

我正在尝试使用带有4个输入字段的javascript创建一个过滤器，所以我猜测可能搜索的16种组合。我可以一次搜索所有4个或一次搜索1个输入但由于某种原因，当我添加其他语句时，我得到了很糟糕的结果。有没有更好的方法来实现过滤器？

var unfilteredFloorplans = floorplanJSON.floorplanData;

filteredFloorplans = [];

for (var i = 0; i < unfilteredFloorplans.length; i++) {

    if (unfilteredFloorplans[i].city == req.body.cityName && 
        unfilteredFloorplans[i].building == req.body.buildingName && 
        unfilteredFloorplans[i].bedrooms == req.body.minBedroom && 
        unfilteredFloorplans[i].baths == req.body.maxBathroom) {

           console.log(unfilteredFloorplans[i].city);
           filteredFloorplans.push(unfilteredFloorplans[i]);
    } 
}

所以现在我需要再写15个if语句？而不是复制它们我想问这是否正确，是否有人知道你如何用switch语句实现它？

编辑：当我说15个以上的陈述时，如果他们选择城市，我会指一个，如果他们选择城市和卧室等等，那么它似乎效率低下

Answer 1

最小的解决方法是将“和”与“或”结合起来，但请注意这会如何将代码变成难以阅读的混乱：

var unfilteredFloorplans = floorplanJSON.floorplanData;

filteredFloorplans = [];

for (var i = 0; i < unfilteredFloorplans.length; i++) {

    if ((req.body.cityName == '' || unfilteredFloorplans[i].city == req.body.cityName) && 
        (req.body.buildingName == '' || unfilteredFloorplans[i].building == req.body.buildingName) && 
        (req.body.minBedroom == '' || unfilteredFloorplans[i].bedrooms == req.body.minBedroom) && 
        (req.body.maxBathroom == '' || unfilteredFloorplans[i].baths == req.body.maxBathroom)) {

           console.log(unfilteredFloorplans[i].city);
           filteredFloorplans.push(unfilteredFloorplans[i]);
    } 
}

（顺便说一句，对于将连词与分离结合起来，这看起来很好。）

编辑我建议将过滤放到一个单独的函数中，并引入一个额外的帮助函数。此外，使用更一致的命名并使用“===”而不是“==”。

function filterByEquality(formValue, dataValue) {
    if (formValue === '') return true;
    if (formValue === dataValue) return true;
    return false;
}

function filterFloorplan(form, data) {
    if (!filterByEquality(form.city, data.city)) return false;
    if (!filterByEquality(form.building, data.building)) return false;
    if (!filterByEquality(form.minBedrooms, data.bedrooms)) return false;
    if (!filterByEquality(form.maxBathrooms, data.bathrooms)) return false;
    return true;
}

var unfilteredFloorplans = floorplanJSON.floorplanData;
filteredFloorplans = [];
for (var i = 0; i < unfilteredFloorplans.length; i++) {
    if (filterFloorplan(req.body, unfilteredFloorplans[i]);
        console.log(unfilteredFloorplans[i].city);
        filteredFloorplans.push(unfilteredFloorplans[i]);
    } 
}

通过了解Array.filter方法，您可以进一步减少此代码。你应该修复一些字段应该使用“＆gt; =”或“＆gt; =”而不是“===”的错误。但我会把这些东西留作练习。

Answer 2

以下是代码外观的简化示例（在此示例中，我对代表input选项的值进行了硬编码）：

var unfilteredFloorplans = [{
  city: 'NY',
  building: 'A',
  bedrooms: 2,
  baths: 1,
}];


var filteredFloorplans = unfilteredFloorplans.filter(
  function(el) {
    return el.city === 'NY' && el.building === 'A' && el.bedrooms >= 1 && el.baths >= 1;
  }
);

console.log(filteredFloorplans);

在filter内调用的匿名函数可以替换为命名函数，如下所示：

function filterFloorplans(floorplan) {
  return floorplan.city === 'NY' && floorplan.building === 'A' && floorplan.bedrooms >= 1 && floorplan.baths >= 1;
}

var filteredFloorplans = unfilteredFloorplans.filter(filterFloorplans);

您可能希望使用此路线，因为您可以选择4种输入选项。因此，您希望filterFloorplans函数可以从其他较小的检查中“构建”：

function testCity(userInputCity, floorplanCity) {
    return userInputCity ? userInputCity === floorplanCity : true;
}

function filterFloorplans(floorplan) {
  return testCity('NY', floorplan.city) && floorplan.building === 'A' && floorplan.bedrooms >= 1 && floorplan.baths >= 1;
}

这个足以让你入门;如果你遇到困难，请随时发表评论

过滤多个输入字段

2 个答案: