Question

我有这样的数组。

[{
  id: 1,
  name: 'Stephen',
  Team: {
    name: 'Lion',
    color: 'blue'
  },
  skills: ['allrounder', 'middleorder']
}, {
  id: 2,
  name: 'Daniel',
  Team: {
    name: 'Panther',
    color: 'green'
  },
  skills: ['batsman', 'opener']
}, {
  id: 3,
  name: 'Mark',
  Team: {
    name: 'Lion',
    color: 'blue'
  },
  skills: ['bowler', 'fielder']
}]

我在每个领域都提供搜索工具。

名称：输入框
团队名称：dopdownlist（用于选择团队名称）
团队颜色：下拉列表（用于选择团队颜色）
技能：复选框

用户只能提供Name字段并单击“搜索”，也可以使用多个选项，例如仅技能或任何输入的组合。什么是基于这些条件筛选数组的最佳方法。例如

myArr.filter(item => item.Name.toLowerCase().startsWith(searchData.name.toLowerCase())
                      && / || item.skills.include(searchData.skillsArr)

预期的输出基于提供的任何单个或组合输入。

Answer 1

您可以使用filter这样编写函数：

检查name参数中是否有值。如果是，请检查数组对象includes的name属性的名称
如果没有，请以类似的方式检查teamName和color参数
然后检查所选skills的数组。检查对象的skills数组属性中是否有some个技能included

const input=[{id:1,name:'Stephen',Team:{name:'Lion',color:'blue'},skills:['allrounder','middleorder']},{id:2,name:'Daniel',Team:{name:'Panther',color:'green'},skills:['batsman','opener']},{id:3,name:'Mark',Team:{name:'Lion',color:'blue'},skills:['bowler','fielder']}]

function filter(array, name, teamName, color, skills) {
  return array.filter(a =>
    (!name || a.name.toLowerCase().includes(name.toLowerCase())) &&
    (!teamName || a.Team.name.toLowerCase().includes(teamName.toLowerCase())) &&
    (!color || a.Team.color.toLowerCase().includes(color.toLowerCase())) &&
    (!skills || skills.length === 0 || skills.some(s => a.skills.includes(s)))
  )
}

console.log(filter(input, "Mark"))
console.log(filter(input, null, "Panther"))
console.log(filter(input, null, null, "blue", ["bowler"]))

基于属性组合的JavaScript数组过滤

1 个答案: