javascript - 使用多个动态用户输入进行过滤。如何更有效地进行过滤？

Question

我有来自范围输入的三个输入价格，来自文本输入的名称和来自选择的类别。T 尝试使用多个 if 语句并使用三个单独的函数作为参数。哪个更好，并且有更易读和更优雅的方式来做到这一点

//I will put the variables and the html in case you want to see  them

const elements = e.target.elements;
const name = elements.name.value.trim().toLowerCase();
const price = parseInt(elements.price.value);
const category = elements.categories.value;
const filterPriceMaxValue = parseInt(document.querySelector(".filter-price").max);

const filterAll = (products, category, name, price, filterPriceMaxValue) => {
    if (name && price < filterPriceMaxValue && category === '') {
        return products.filter(
            product => product.name === name && product.price <= price
        );
    } else if (name !== '' && price < filterPriceMaxValue) {
        return products.filter(
            product =>
            product.name === name &&
            product.price <= price &&
            product.category === category
        );
    } else if (name === '' && price < filterPriceMaxValue && category === '') {
        return products.filter(product => product.price <= price);
    } else if (name === '' && price === filterPriceMaxValue && category !== '') {
        return products.filter(product => product.category === category);
    } else if (name !== '' && price === filterPriceMaxValue) {
        return products.filter(product => product.name === name);
    } else if (name === '' && price < filterPriceMaxValue && category !== '') {
        return products.filter(
            product => product.price <= price && product.category === category
        );
    }
    return products;
};

//Or i tried using separate functions as arguments**strong text**
filterCategory(filterName(filterPrice(products, price, filterPriceMaxValue), name), category)
const filterName = (products, name) => {
    if (name !== '') {
        return products.filter(product => product.name === name)
    }
    return products
}
const filterPrice = (products, price, filterPriceMaxValue) => {
    if (price < filterPriceMaxValue) {
        return products.filter(product => product.price <= price);
    }
    return products;
};
const filterCategory = (products, category) => {
    if (category !== '') {
        return products.filter(product => product.category === category);
    }
    return products;
};

<form class="filter-form">
    <select name="categories" class="filter-categories">
    <option disabled selected value> -- select a category -- </option>
    <option value="sport">sport</option>
    <option value="accessories">accessories</option>
    <option value="shoes">shoes</option>
    <option value="clothes">clothes</option>
    </select>
    <input type="text" class="filter-name" name="name" placeholder="product">
    <input type="range" value="1000" min="0" max="1000" name="price" class="filter-price">
    <label for="price" class="price-label">Price Range:<span class="price-span"></span></label>
    <button class="filter-btn">Search</button>
</form>

标签： javascriptarrayshtmlfilterecmascript-6

Answer 1

您可以为每个想要的过滤器部件使用一个功能，并使用此功能来检查要过滤的产品。

var elements = e.target.elements,
    fName = elements.name.value.trim().toLowerCase(),
    fPrice = +elements.price.value,
    fCategory = elements.categories.value,
    fMaxPrice = +document.querySelector(".filter-price").max,
    filters = [],
    products = [
        {
            category: 'sport',
            price: 42,
            name: 'shorts'
        },
        // more products
    ],
    filtered;

if (fName) {
    filters.push(o => o.name.includes(fName));
}
if (fCategory) {
    filters.push(o => o.category === fCategory);
}
if (!isNaN(fPrice)) {
    filters.push(o => o.price <= fPrice);
}
if (!isNaN(fMaxPrice)) {
    filters.push(o => o.price <= fMaxPrice);
}

filtered = products.filter(p => filters.every(f => f(p)));