如何使用多个标准筛选JavaScript对象

我有一个包含食谱的JSON文件。 现在，在我的主页上有一个搜索栏，用户可以选中或取消选中复选框，以选择他要搜索的配方属性（名称、成分、标签、类别）。他还可以检查多个条件

现在，我想根据选定的条件筛选对象。 例如，我知道是否只勾选了“名称”，我可以选择

recipes.filter(e -> e.name.indexOf(searchString) >= 0)

但我如何动态地说“如果也检查了成分，则在名称或成分中过滤找到的结果”

我希望你能理解。多谢各位

编写一个函数

recipes.filter（e=>{
如果（无论什么）返回true；
否则{
//额外的检查。
}
});

就你而言，我猜是这样的：

recipes.filter（e=>{
如果（IngCreditsArechecked（））{
返回e.name.matchesSearchString（）| | e.components.some（i=>i.matchesSearchString（））；
}
否则{
返回e.name.matchesSearchString（）；
}
});

或者，如果

ingredientsAreChecked（）

在计算上不是一件轻松的事情，那么请执行以下操作：

if（ingredientsAreChecked（））返回recipes.filter（e=>…）；
else返回recipes.filter（e=>…）；

filter

是一个高阶函数，它接受一个谓词函数，该谓词函数返回

true

或

false

，具体取决于是否应保留当前项。在您的例子中，函数是一个单行程序，但是可以传递任何类型的函数

因此，如果您有复杂的逻辑，我建议您将其移到一个命名函数中，在该函数中可以检查多个条件，最后返回一个布尔值：

function isRecipeValid(recipe) {
  if (recipe.something) return false;
  // any arbitrary conditional checking here
  return recipe.conditionOne && recipe.conditionTwo;
}

recipes.filter(isRecipeValid);

---

您可以将所有属性放在一个数组中，然后使用

.some（）

检查是否有任何属性匹配

const配方=[
{名称：“比萨饼”，配料：“面团番茄肉末”，类别：“餐”}，
{名称：“馅饼”，配料：“面团糖”，类别：“甜点”}，
{名称：“炖肉”，配料：“土豆肉末”，类别：“膳食”}，
{名称：“甜甜圈”，成分：“糖”，类别：“甜点”}
];
//从复选框中获取以下内容：
const selected_属性=[
“姓名”，
“成分”
];
//从搜索栏获取此信息：
const seachbar_query=“do”；
//筛选名称或成分包含“do”的所有配方。
//我们期望“比萨饼”和“馅饼”，它们的原料中含有面团。
//我们也期待“甜甜圈”，它的名字以“do”开头
const filtered=recipes.filter（recipe=>{
返回选定的属性。某些（属性=>{
返回配方[属性]。包括（seachbar\u查询）；
});
});
log（已过滤）；

所以您有两件事要搜索：搜索词和字段

您可以构建一个过滤函数，该函数接受这两个参数和单个记录（单个配方），并返回true或false

假设您的复选框为

name

，

description

，

ingreedients

你要做的是向你的过滤函数发送项目名称，以及你想要搜索的字段的名称。然后在那里插入值

你可以有这样的东西：

//免责声明：这些食谱是由
常量配方=[{
名称：“柠檬蛋糕”，
描述：“美味的蛋糕”，
主要成分：[“柠檬”、“面粉”、“糖”]，
},
{
名称：“酸柠檬蛋糕”，
描述：“美味的蛋糕”，
配料：[“柠檬”、“面粉”、“非糖”]，
},
{
名称：“巧克力布朗尼”，
描述：“甜巧克力沙漠”，
配料：[“巧克力”、“牛奶”、“面粉”、“盐”、“糖”]，
},
{
名称：“香草牛角面包”，
描述：“香草味的美味糕点”，
香料：[“香草”、“牛奶”、“面粉”]，
}
];
//要进行搜索，我们需要搜索词和一组字段来进行搜索
//我们返回任何匹配项，这意味着如果搜索词位于任何字段中，则为匹配项
函数searchAnyField（searchTerm、searchFields）{
返回配方。过滤器（项目=>{
for（让字段为搜索字段）{
if（项[field].indexOf（搜索术语）>-1）{
返回true；
}
}
返回false；
});
}
//同样，但是我们要确保搜索词存在于所有字段中（这里看起来很傻，但可能是req）
函数searchAllFields（searchTerm、searchFields）{
返回配方。过滤器（项目=>{
//一种简单的方法是计算我们找到了多少字段，以及它是否与搜索字段长度匹配
设foundInFields=0；
for（让字段为搜索字段）{
if（项[field].indexOf（搜索术语）>-1）{
foundInFields++；
}
}
return foundInFields===searchFields.length；
});
}
//让我们看看它的实际行动
//我们会把找到的物品的名字打印出来
console.log（'Brownie in name:'，printNames(
searchAnyField（'brownie'，['name']）；
console.log（'Cake in name:'，printNames(
searchAnyField（'cake'，['name']）；
//让我们尝试多个字段
console.log（'Choc in name and desc:'，printNames(
searchAnyField（'choc'，['name'，'description']）；
console.log（'freakanywhere:'，printNames(
searchAnyField（'面粉'，['名称'，'描述'，'ingreedients']）；
console.log（'sweet anywhere:'，printNames(
searchAnyField（'sweet'、['name'、'description'、'ingreedients']）；
//关于搜索：
console.log（'cake in name AND desc:'，printNames(
searchAllFields（'cake'，['name'，'description']）；
console.log（'cake everywhere:'，printNames(
searchAllFields（'cake'，['name'，'description'，'ingreedients'）；
函数打印名（配方）{
返回recipes.map（r=>r.name）.join（'，'）；
}

在filter中使用

&&

或

|

运算符？我如何处理复选框可以选中或不选中？我不想一直筛选这两个条件。@DannyBergs我不知道您的完整代码，所以这里的任何假设都不可行，因为复选框的格式是I just c