Javascript 如何筛选多个属性

我试图一次过滤多个属性。现在我只能过滤一个属性。例如，我想按类型、位置和经验进行筛选。假设我想要

type=PART\u TIME location=bangalore，experience=小于2

视图将返回

{
  id: 1,
  type: "PART_TIME",
  name: "Akash",
  location: "bangalore",
  experience: 1
},

下面是代码和沙箱

导入“/Search.css”； 类搜索扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 过滤器列表：[ { id:11， 姓名：“兼职”， 价值观：“兼职” }, { id:12， 姓名：“全职”， 值：“全职” }, { id:13， 姓名：“自由职业者”， 价值观：“自由职业者” }, { 身份证号码：14， 名称：“孟买”， 价值：“孟买” }, { 身份证号码：15， 名称：“费罗斯”， 价值：“费罗斯” }, { 身份证号码：16， 名称：“经验”， 价值观：“经验” } ], 搜索列表：[ { id:1， 类型：“兼职”， 名称：“阿卡什”， 地点：“班加罗尔”， 经验：1 }, { id:2， 类型：“兼职”， 名称：“费罗斯”， 地点：“孟买”， 经验：3 }, { id:3， 类型：“全职”， 姓名：“Farheen”， 地点：“agra”， 经验：5 }, { id:4， 类型：“自由职业者”， 姓名：“Raju”， 地点：“钦奈”， 经验：6 }, { id:5， 类型：“全职”， 名称：“Asif”， 地点：“维加斯”， 经验：7 } ], activeFilter:[] }; } onFilterChange（过滤器）{ const{filterList，activeFilter}=this.state； 如果（过滤器==“全部”）{ if（activeFilter.length==filterList.length）{ this.setState（{activeFilter:[]}）； }否则{ 这是我的国家({ activeFilter:filterList.map（（filter）=>filter.value） }); } }否则{ if（activeFilter.includes（filter））{ 常量filterIndex=activeFilter.indexOf（filter）； const newFilter=[…activeFilter]； 新过滤器。拼接（过滤器索引，1）； this.setState（{activeFilter:newFilter}）； }否则{ this.setState（{activeFilter:[…activeFilter，filter]}）； } } } render（）{ const{filterList，activeFilter}=this.state； 让过滤器列出； 如果( activeFilter.length==0|| activeFilter.length==filterList.length ) { filteredList=this.state.searchList； }否则{ filteredList=this.state.SearchList.filter（（项目）=> this.state.activeFilter.includes（item.type） ); } 返回( 全部的 this.onFilterChange（“全部”）} 选中={activeFilter.length===filterList.length} /> {this.state.filterList.map（（filter）=>( {filter.name} this.onFilterChange（filter.value）} /> ))}

{filteredList.map（（项）=>(
• {item.name}--{item.type}
))}

); } } 导出默认搜索；

---

动态方法是创建一个函数，该函数接受一个列表和一些过滤器参数。下面的示例使用一个对象，您可以在其中指定属性的值，以获得过滤结果

const searchlist=[{id:1，键入：“兼职”，姓名：“阿卡什”，地点：“班加罗尔”，经历：1}，{id:2，键入：“兼职”，姓名：“费罗斯”，地点：“孟买”，经历：3}，{id:3，键入：“全职”，姓名：“法赫恩”，地点：“阿格拉”，经历：5}，{id:4，键入：“自由职业者”，姓名：“拉朱”，地点：“钦奈”，经历：6}，{id:5，键入：“全职”，姓名：“阿西夫”，地点：“维加斯”，经验：7}]；
常量过滤器列表=（列表，过滤器args）=>
list.filter（项=>
Object.entries（filterArgs）.every（[prop，value]）=>
项目类型[prop]=“编号”？
item[prop]它似乎同时显示全职和自由职业者，对吗？@Axnyff是的工作/类型过滤器工作正常，但我不知道如何在上面添加另一个过滤器，例如如果我想兼职和定位班加罗尔。我不确定如何开始
import "./Search.css";

class Search extends React.Component {
  constructor() {
    super();
    this.state = {
      filterList: [
        {
          id: 11,
          name: "Part Time",
          value: "PART_TIME"
        },
        {
          id: 12,
          name: "Full Time",
          value: "FULL_TIME"
        },
        {
          id: 13,
          name: "Freelancer",
          value: "FREELANCER"
        },
        {
          id: 14,
          name: "mumbai",
          value: "MUMBAI"
        },
        {
          id: 15,
          name: "feroz",
          value: "FEROZ"
        },
        {
          id: 16,
          name: "experience",
          value: "EXPERIENCE"
        }
      ],
      searchLists: [
        {
          id: 1,
          type: "PART_TIME",
          name: "Akash",
          location: "bangalore",
          experience: 1
        },
        {
          id: 2,
          type: "PART_TIME",
          name: "feroz",
          location: "mumbai",
          experience: 3
        },
        {
          id: 3,
          type: "FULL_TIME",
          name: "Farheen",
          location: "agra",
          experience: 5
        },
        {
          id: 4,
          type: "FREELANCER",
          name: "Raju",
          location: "chennai",
          experience: 6
        },
        {
          id: 5,
          type: "FULL_TIME",
          name: "Asif",
          location: "vegas",
          experience: 7
        }
      ],
      activeFilter: []
    };
  }

  onFilterChange(filter) {
    const { filterList, activeFilter } = this.state;
    if (filter === "ALL") {
      if (activeFilter.length === filterList.length) {
        this.setState({ activeFilter: [] });
      } else {
        this.setState({
          activeFilter: filterList.map((filter) => filter.value)
        });
      }
    } else {
      if (activeFilter.includes(filter)) {
        const filterIndex = activeFilter.indexOf(filter);
        const newFilter = [...activeFilter];
        newFilter.splice(filterIndex, 1);
        this.setState({ activeFilter: newFilter });
      } else {
        this.setState({ activeFilter: [...activeFilter, filter] });
      }
    }
  }

  render() {
    const { filterList, activeFilter } = this.state;
    let filteredList;
    if (
      activeFilter.length === 0 ||
      activeFilter.length === filterList.length
    ) {
      filteredList = this.state.searchLists;
    } else {
      filteredList = this.state.searchLists.filter((item) =>
        this.state.activeFilter.includes(item.type)
      );
    }
    return (
      <div className="searchContainer">
        <form>
          <label htmlFor="myInput">All</label>
          <input
            id="myInput"
            type="checkbox"
            onClick={() => this.onFilterChange("ALL")}
            checked={activeFilter.length === filterList.length}
          />
          {this.state.filterList.map((filter) => (
            <React.Fragment>
              <label htmlFor={filter.id}>{filter.name}</label>
              <input
                id={filter.id}
                type="checkbox"
                checked={activeFilter.includes(filter.value)}
                onClick={() => this.onFilterChange(filter.value)}
              />
            </React.Fragment>
          ))}
        </form>
        <ul style={{ marginLeft: "70px" }}>
          {filteredList.map((item) => (
            <div key={item.id}>
              <li>
                {item.name} -- {item.type}
              </li>
            </div>
          ))}
        </ul>
      </div>
    );
  }
}

export default Search;