Javascript基于多个字段过滤数据

Question

我有多个输入字段，用户可以在其中输入数据，并且根据该输入，必须过滤列表。

在下面的代码中有用户数组，我尝试过滤 2 个字段数据，然后加入两个数组结果，然后删除重复数据，但这不能正常工作。

我的代码过滤器数组用于一个字段，但我无法过滤多个字段。

const users = [
    {
        "id": 1,
        "firstname": "John",
        "lastname": "Bravo",
        "email": "John@bravo.com",
        "specialty": "Surgeon",
        "location": "Los Angeles",
        "about": "Blablabla" 
    },
    {
        "id": 2,
        "firstname": "Phil",
        "lastname": "Kiwil",
        "email": "phil@kiwil.com",
        "specialty": "Business & Entrepreneurship",
        "location": "Location",
        "about": "Something"
    },
    {
        "id": 3,
        "firstname": "John",
        "lastname": "Doe",
        "email": "john@doe.com",        
        "specialty": "Surgeon",
        "location": "NY",
        "about": "Some text lorem ipsum"
    },
    {
        "id": 4,
        "firstname": "Jimi",
        "lastname": "Henix",
        "email": "jimi@henix.om",
        "specialty": "Expert",
        "location": "Woodstock",
        "about": "Something goes here",
    },
    {
        "id": 5,
        "firstname": "Janis",
        "lastname": "Jopn",
        "email": "janis@jopn.com",
        "specialty": "Surgeon",
        "location": "Los Angeles",
        "about": "Something something description text",
    }
]

我的代码

this.state = {
            users:[],
            filter:[],
            location:"",
            specialty:""
        }
const {location,specialty,users} = this.state;
        var trimedLocation = location.trim(); 
        var trimedSpecialty = specialty.trim(); 
        const filter = users.filter(user =>{
            if(location == "" || specialty == ""){
                return (user.location.toLowerCase().indexOf(trimedLocation.toLowerCase()) !== -1) &&
                (user.specialty.toLowerCase().indexOf(trimedSpecialty.toLowerCase()) !== -1)
            } else {
                return (user.location.toLowerCase().indexOf(trimedLocation.toLowerCase()) !== -1) ||
                (user.specialty.toLowerCase().indexOf(trimedSpecialty.toLowerCase()) !== -1)
            }
        });
        this.setState({filter});

Answer 1

不确定您是否需要同时过滤用户甚至位置。如果您打算过滤具有多种条件的用户，您可以尝试这种方法。

const userFiltered = users.filter(user =>{
 return user.location.toLowerCase().includes(trimedLocation.toLowerCase() &&
        user.specialty.toLowerCase().includes(trimedSpecialty.toLowerCase()) ;
});

这是和AND 条件。如果您想将&& 替换为||，可以将其更改为OR。

更新： 这是一个处理部分字符串和null 或undefined 值的工作示例。 https://codesandbox.io/s/great-rosalind-8ztzq?file=/src/App.tsx:1386-1387