使用array.filter筛选多个参数

Question

我有一个people数组，我希望能够根据它们的名称进行搜索。我有以下代码的工作

{peopleArray
.filter((people) => {
if (
people.name.includes(searchParams)     
) 


{
return true;
}

return false;
})
.map((people) => (
//map the data here

我有一个输入，它将用户键入的值设置为searchParams。这一切都很好，但我希望有两个输入，并且能够通过name和occupation进行搜索
所以我用jobSearchParams设置了另一个输入，并更新了我的过滤功能，如

{peopleArray
.filter((people) => {
if (
people.name.includes(searchParams)   || people.occupation.includes(jobSearchParams)
) 


{
return true;
}

return false;
})

然而，第二次过滤根本不起作用。当第二个输入具有值时，数组根本不会改变。我有console.log()’d来显示输入正在将值传递给jobSearchParam，但数组仍然没有改变。
有关更多信息，peopleArray看起来像这个

{
name: "Bob",
occupation: ["builder", "developer"]
}

searchBox值设置在输入端，如

<input className="nameSearch"
placeholder="Search by Job" 
value={jobSearchParam}
onInput={(e ) => setJobSearchParam(e.target.value)}
/>

Answer 1

我很难阅读您的示例，但我创建了一些符合您描述的东西：

var people = [
{ name: "John Citizen", occupation: "Developer" },
{ name: "April O'Neill", occupation: "Teacher" }
];
search = function(name, job) {
return people.filter(person => {
return person.name.includes(name) || person.occupation.includes(job);
});
};
var resultBoth = search("John", "Teacher");
var resultJohn = search("John", "Dev");
var resultTeach = search("Nonsense", "Teach");
console.log(resultBoth);
console.log(resultJohn);
console.log(resultTeach);

可能只是您的参数不正确，请记住它是区分大小写的，您可以在includes检查之前通过对person.name调用toLower来解决这个问题。

更新：修改以满足每人的一系列职业：

var people = [
{ name: "John Citizen", occupations: ["Developer", "Event Organiser"] },
{ name: "April O'Neill", occupations: ["Teacher", "Event Organiser"] }
];
search = function(name, job) {
return people.filter(person => {
return person.name.includes(name) || person.occupations.some(occupation => occupation.includes(job));
});
};
var eventOrganisers = search("John", "Event");
var developers = search(null, "Develop")
console.log(eventOrganisers);
console.log(developers);

Answer 2

您可以通过这种方式获得搜索结果。

const peopleArray = [
{ name: "Will Smith", occupation: ["builder", "developer"] },
{ name: "John Smith", occupation: ["Programmer", "developer"] },
{ name: "Katy Perry", occupation: ["Singer", "Programmer"] }
];
const getSearchResult = (nameSearch, jobSearchParams) => {
return peopleArray.filter((person) => { 
return person.name.includes(nameSearch) || person.occupation.includes(jobSearchParams) 
});
}
console.log(getSearchResult("XYZ", "Singer")) // get single result
console.log(getSearchResult("Smith", "Singer")) // get multiple result