Question

我正在为搜索结果构建一个包含一些过滤器控件的页面。我有一个像这样的数组：

var vehicles = [
    {
        make: 'Audi',
        wheels: 4
    },
    {
        make: 'Chrysler',
        wheels: 3
    },
    {
        make: 'Toyota',
        wheels: 4
    },
    {
        make: 'Harley Davidson',
        wheels: 2
    }
];

var vehiclesToDisplay = [];

在我的界面中，我有3个复选框，允许访客根据车轮数量选择车辆，如：

2轮车
3轮车
4个或更多车轮

现在，用户可以选择其中任何一个复选框。假设他们只选择2和4或更多。在这种情况下，我必须遍历数组，验证这两个条件并将对象推送到变量vehiclesToDisplay。同样，用户可以选择只看到2轮车或4轮或更多等等。

我如何验证这些多重条件？我有一些变量可以保存复选框的状态，如下所示：

var wheels2 = true, // the value of the checkbox
    wheels3 = true,
    wheelsMore = true;

这些变量的任何组合都可能是false / true。似乎没有必要预测所有组合并为每个组合编写IF语句。我该怎么做呢？

Answer 1

只需使用多个&&＆amp; ||语句来过滤您的数组：

vehicles.filter(function(car){
    return wheels2 && car.wheels === 2
           || wheels3 && car.wheels === 3
           || wheelsMore && car.wheels > 3
});

如果您碰巧有30个轮子的过滤器（和车辆），您不想单独写下来，以保持干燥检查@DavidThomas的答案。

Answer 2

我建议形成一个已检查复选框值的数组，然后使用wheels检查每个对象的filter()值是否保存在该数组中：< / p>

// getting a NodeList of all the checked <input> elements with
// a type of 'checkbox':
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked'),

    // Function.prototype.call() allows us to use the 
    // Array method, 'filter()', on the array-like NodeList:
    values = Array.prototype.filter.call(checkboxes, function (checkbox) {
        // within the anonymous function, the first argument
        // 'checkbox' is a reference to the array element of the
        // array over which we're iterating.

        // if the checkbox is checked (checkbox.checked
        // evaluates to a Boolean true) then we retain the
        // current array-element in the new Array returned
        // by Array.prototype.filter():
        return checkbox.checked;
    });

// iterating over the vehicles array:
vehiclesToShow = vehicles.filter(function (vehicle) {
    // as above the first (and only) argument of filter()
    // is a reference to the current array-element of the
    // array over which we're iterating.

    // if the value held in the vehicle.wheels property
    // is found within the values array (and so the index
    // returned by indexOf() is greater than -1, we retain
    // the current element in the newly-created array:
    return values.indexOf(vehicle.wheels) > -1;
});

这种方法并不需要您提前知道各种组合或轮数，或者要求您提前手动写出每个潜在值（这导致维护噩梦，在某些时候，忘记了更新条件）。

轻松检查JavaScript中的几个可能的条件？

2 个答案: