个人中心
gpt4 book ai didi

javascript - 数组过滤没有按预期工作

转载 作者：行者123 更新时间：2023-12-01 09:18:06 24 4
gpt4 key购买 nike

我有一组对象，我想根据它们的大小、颜色和领子过滤它们。

每当我取消选中复选框时，一切都按预期工作，但当我再次重新选中它时，它会带回不需要的对象。

var DATABASE = [
    {id:0o1, size: "XL",  color:"red",    collar: "v-neck"},
    {id:0o2, size: "S",   color:"blue",   collar: "regular"},
    {id:0o3, size: "XXL", color:"red",    collar: "scoop"},
    {id:0o4, size: "L",   color:"green",  collar: "v-neck"},
    {id:0o5, size: "XL",  color:"blue",   collar: "turtle-neck"},
    {id:0o6, size: "L",   color:"red",    collar: "v-neck"}
];


window.onload = function () {

    var vNeckCollarCheckbox = document.querySelector('#vneck-collar-checkbox');
    var xlSizeCheckbox = document.querySelector('#xl-size-checkbox');
    var redColorCheckbox = document.querySelector('#red-color-checkbox');

    var div = document.querySelector('div');


    var DB = DATABASE;


    function filterByVneckCollar() {
        let vNeckCollar = DATABASE.filter(function (item) {
            return item.collar === "v-neck";
        });
        if(!vNeckCollarCheckbox.checked){
            DB = DB.filter(function (i) {
                return vNeckCollar.indexOf(i) < 0;
            });
            div.innerHTML = JSON.stringify(DB);
        }
        else{
            DB = DB.concat(vNeckCollar);
            div.innerHTML = JSON.stringify(DB);
        }
    }

    function filterByXlSize() {
        let xlSize = DATABASE.filter(function (item) {
            return item.size === "XL";
        });
        if(!xlSizeCheckbox.checked){
            DB = DB.filter(function (i) {
                return xlSize.indexOf(i) < 0;
            });
            div.innerHTML = JSON.stringify(DB);
        }
        else{
            DB = DB.concat(xlSize);
            div.innerHTML = JSON.stringify(DB);
        }
    }

    function filterByRedColor() {
        let redColor = DATABASE.filter(function (item) {
            return item.color === "red";
        });
        if(!redColorCheckbox.checked){
            DB = DB.filter(function (i) {
                return redColor.indexOf(i) < 0;
            });
            div.innerHTML = JSON.stringify(DB);
        }
        else{
            DB = DB.concat(redColor);
            div.innerHTML = JSON.stringify(DB);
        }

    }


    div.innerHTML = JSON.stringify(DB);

    vNeckCollarCheckbox.addEventListener('change', filterByVneckCollar);
    xlSizeCheckbox.addEventListener('change', filterByXlSize);
    redColorCheckbox.addEventListener('change', filterByRedColor);

};
<html>
<head>
    <script src="js.js"></script>
</head>

<body>
<form action="#">

    <input type="checkbox" id="vneck-collar-checkbox" checked>
    <label for="vneck-collar-checkbox">V-neck collar</label>
    <br>
    <input type="checkbox" id="xl-size-checkbox" checked>
    <label for="xl-size-checkbox">XL size</label>
    <br>
    <input type="checkbox" id="red-color-checkbox" checked>
    <label for="red-color-checkbox">Red color</label>

</form>
<div></div>
</body>
</html>

试试这个:

  1. 取消选中“红色”
  2. 取消选中“XL 码”
  3. 检查“XL 码”

您会看到包含“color: red”的对象出现。

我知道问题出在 DB = DB.concat(xxxxx); 的 else{} 语句中，但我不知道如何实现所需的输出。

任何其他实现这种过滤器的解决方案/概念都值得赞赏。

最佳答案

只需使用您需要的规则组合在 DATABASE 上过滤一次。

我已经为你在更复杂的函数上放了一个 JSDoc，我把它变成了通用的，所以也可以用于其他事情

/**
 * @callback FilterRuleTest
 * @param {Object} obj The target Object
 * @returns {Boolean} Whether obj passed the test
 */

/**
 * @typedef {Object} FilterRule
 * @property {String} [key] A property key to find on the target
 * @property {String} [value] The value assigned to the key of the target
 * @property {FilterRuleTest} [test] A function to run on target, return bool
 */

/** Filters an Array of Objects
 * @param {[Object]} arrayOfObjects The Array of Objects to filter
 * @param {[FilterRule]} arrayOfRules The Array of Objects to filter with
 * @param {Boolean} [invert] Return the opposite of the rules
 * @param {Boolean} [emptyRulePasses] Default behaviour of empty rule
 * @returns {[Object]} The filtered result
 */
function objFilter(arrayOfObjects, arrayOfRules, invert = false, emptyRulePasses = false) {
    return arrayOfObjects.filter(obj => {
        return invert !== arrayOfRules.every(rule => {
            if ('key' in rule) {
                if ('value' in rule)
                    return obj[rule.key] === obj[rule.value];
                return rule.key in obj;
            }
            if ('test' in rule) {
                return rule.test(obj);
            }
            return emptyRulePasses;
        });
    });
}

function createFilterRules(collar, size, color) {
    let rules = [];
    if (collar) rules.push({key: 'collar', value: collar});
    if (size) rules.push({key: 'size', value: size});
    if (color) rules.push({key: 'color', value: color});
    return rules;
}

const vNeckCollarCheckbox = document.querySelector('#vneck-collar-checkbox');
const xlSizeCheckbox = document.querySelector('#xl-size-checkbox');
const redColorCheckbox = document.querySelector('#red-color-checkbox');
const div = document.querySelector('div');

function filterClothes(db) {
    return objFilter(
        db,
        createFilterRules(
            vNeckCollarCheckbox.checked ? 'v-neck' : null,
            xlSizeCheckbox.checked ? 'XL' : null,
            redColorCheckbox.checked ? 'red' : null
        )
    );
}

function clothesHandle() {
    div.innerHTML = JSON.stringify(filterClothes(DATABASE));
}

vNeckCollarCheckbox.addEventListener('change', clothesHandle);
xlSizeCheckbox.addEventListener('change', clothesHandle);
redColorCheckbox.addEventListener('change', clothesHandle);

关于javascript - 数组过滤没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37497943/

24 4 0
文章推荐： docker - 在 Dockerfile 中获取主机 IP
文章推荐： rest - OneLogin REST API 与 PowerShell 的 Invoke-RestMethod
文章推荐： c - 如何让 XCode 在我的 C 代码中显示警告？
文章推荐： laravel-5 - 如何在指定队列运行 Laravel 作业
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com