根据javascript中的属性过滤列表中的项目答案

【问题标题】：Filtering items in a list based on their properties in javascript根据javascript中的属性过滤列表中的项目
【发布时间】：2009-09-16 13:04:17
【问题描述】：

我正在编写一些简单的 javascript 来隐藏/显示列表中的项目，具体取决于复选框的选中/取消选中。

例如，我可能有 3 个复选框，分别代表红色、蓝色、绿色。以及可提供其中一种或多种颜色的产品列表。因此，如果选中红色和绿色复选框，则应隐藏红色或绿色均不可用的产品。

我很高兴我能做到这一点，但不是一个 javascript 开发人员，我不确定我正在做的事情是否非常优雅（事实上我很确定它不优雅）。我在电子表格中有原始数据，因此可以轻松获取每个产品数据的 csv 文件 - 例如“bike,x,,x”可能意味着自行车有红色和绿色，但没有蓝色。

所以可能会得到如下结果：

products = [
    {
        id: "bike",
        colours: ["x","","x"]
    },
    {
        id: "apple",
        colours: ["x","x",""]
    },
    {
        id: "cheese",
        colours: ["","","x"]
    }
];



function selectProducts(filter){
    var i;
    for(i=0; i<products.length; i++){
        var fi;
        for(fi=0; fi<filter.length; fi++){
            if(filter[fi]=='x' && products[i].colours[fi]=='x'){
            console.log(products[i].id+" will be visible ");
            break;
            }
        }
    }
}

传递给 selectProducts 的过滤器将是一个类似 ['x','x',''] 的数组，它可以表示红色或绿色，但不能表示蓝色 - 与产品的颜色属性完全相同。我的直觉最初是使用可用颜色的二进制表示（例如上面示例中的自行车为 101）并使用按位和过滤器，认为它会更容易和更有效，但是由于 javascript 将数字存储为浮点数，我看不到使用数字的二进制表示的简单方法，感觉这会违反规定。

也许像下面这样会更好，但它似乎有点冗长，并且从 csv 文件转换为稍微复杂一些......

colours: {
    red: "y",
    green: "n",
    blue: "y"
}

有什么想法吗？

我正在做这个客户端，因为最初我不能依赖任何 PHP 可用的服务器端，尽管后来我发现我可以使用 PHP。我仍然想在客户端做它只是为了响应能力，我认为只要列表不会太长，我认为会更好。我可能会尝试两者，看看它们的比较...

【问题讨论】：

filter 字符串是什么样的，它是如何传递给selectProducts 函数的？
另外，你在客户端而不是在服务器上这样做有什么特别的原因吗？
感谢查看 Ian - selectProducts 函数将按如下方式调用，selectProducts(['x','x','']);我将编辑问题以回答您的评论
您所做的似乎足以作为一个快速而肮脏的解决方案。一个更整洁的版本需要一些时间来计划。

标签： javascript filter

【解决方案1】：

几年后...这就是我要做的事情：JSFiddle 它不一定比你的做法更正确，只是不同，我想我会和你分享。将"x" 和"" 分别更改为布尔值true 和false 绝对是一个好主意，如果您要使用您的方法。

【讨论】：