如何在TypeScript中使用多选选项从对象中筛选数据

Question

const myArray = [
{ name: "Alice", age: 35, state: "MI", salary:"60000" },
{ name: "Bob", age: 40, state: "MI", salary:"60000"},
{ name: "Carmen", age: 50, state: "MA", salary:"60000"},
{ name: "Danilo", age: 35, state: "MI", salary:"60000"}
{ name: "Carmen", age: 50, state: "MA", salary:"70000"},
{ name: "Carmen", age: 50, state: "FL", salary:"70000"},
]

我对年龄、州和薪水有多种选择。

如果我选择多个年龄=35、40、州=MI和工资=60000，那么它应该返回以下内容：

[
{ name: "Alice", age: 35, state: "MI", salary:"60000" },
{ name: "Bob", age: 40, state: "MI", salary:"60000"},
{ name: "Danilo", age: 35, state: "MI", salary:"60000"}
]

因此，它应该显示年龄=(35或40(、状态=MI、工资=60000 的记录

如果我选择多个州=MI、MA和多个薪水=60000、70000，那么它应该返回以下内容：

[
{ name: "Alice", age: 35, state: "MI", salary:"60000" },
{ name: "Bob", age: 40, state: "MI", salary:"60000"},
{ name: "Carmen", age: 50, state: "MA", salary:"60000"},
{ name: "Danilo", age: 35, state: "MI", salary:"60000"}
{ name: "Carmen", age: 50, state: "MA", salary:"70000"},
]

因此，它应该显示状态=(MI或MA(和工资=(60000或70000(的记录

如何在TypeScript中编写一个返回上述结果的方法。提前谢谢。

Answer 1

正如您所提到的，过滤条件是动态的。您必须对数据进行多次筛选。幸运的是，数组的过滤函数是链式的。示例：

x = [1,2,3,4]
x.filter(i => i > 1).filter(i => i > 2).filter(i => i > 3) // 4

现在我们有了功能

const filterEmployee = (employees: Employee[], ages: number[], states: string[], salaries: string[]) => 
employees.filter(({age}) => ages&&ages.length ? ages.indexOf(age) > -1 : true)
.filter(({state}) => states&&states.length ? states.indexOf(state) > -1 : true)
.filter(({salary}) => salaries&&salaries.length ? salaries.indexOf(salary) > -1 : true)

您可以使用动态参数调用函数，如：

filterEmployee(myArray, [35, 40])
filterEmployee(myArray, [35, 40], ['MA'])
filterEmployee(myArray, [35, 40], ['MA', 'MI'])
filterEmployee(myArray, [35, 40], ['MA'], ['60000'])

你会得到结果的。

Answer 2

如果对象中的所有属性都是强制性的，您可以用这种方式解决

applyFilter(data, age, state, salary) {
return data.filter(
item => age === item.age && state === item.state && salary === item.salary
);
}

其中数据是选项数组。

Answer 3

您可以使用filter选项根据您的条件筛选您的数组。

案例1:多个年龄=35、40，州=MI，工资=60000

myArrary.filter((item) => (item.age === 35 || item.age === 40) && item.state === 'MI' && item.salary === '60000');

情况2:多个州=MI、MA和多个工资=60000、70000

myArray.filter((item) => (item.state === 'MI' || item.state === 'MA') && (item.salary === '60000' || item.salary === '70000'))