如何基于指定多层级过滤对象筛选数组中的多层级对象元素？

核心逻辑 #

• 先实现一个递归匹配函数，逐层级对比数组元素和过滤规则的所有字段，只有所有嵌套字段完全匹配才返回true
• 基于Array.prototype.filter实现自定义方法，过滤时调用上述匹配函数校验每个元素

完整代码 #

// 递归匹配工具函数
function isMatch(item, filter) {
  // 遍历过滤规则的所有属性
  for (const key in filter) {
    const filterVal = filter[key]
    // 被校验对象没有对应属性，直接判定不匹配
    if (!item.hasOwnProperty(key)) return false
    const itemVal = item[key]
    // 如果过滤值是对象，递归校验下一层级
    if (typeof filterVal === 'object' && filterVal !== null) {
      if (!isMatch(itemVal, filterVal)) return false
    } else {
      // 基础类型直接比对值
      if (itemVal !== filterVal) return false
    }
  }
  // 所有规则校验通过
  return true
}

// 挂载到Array原型实现你需要的链式调用方式
Array.prototype.thisMagicFilter = function(filter) {
  return this.filter(item => isMatch(item, filter))
}

测试验证 #

// 你的示例数组
const list = [
  {  
    type: { name: 'dog', size:'medium'},
    entity: { name: 'Tobby',  age: '7'},
  },
  {  
    type: { name: 'cat', size:'small'},
    entity: { name: 'Garfield',  age: '7'},
  }
]

// 测试场景1：按type.name过滤
const filter1 = { type: { name:'dog'} }
console.log(list.thisMagicFilter(filter1)) // 输出第一个元素，符合预期

// 测试场景2：按entity.age过滤
const filter2 = { entity: { age:'7'} }
console.log(list.thisMagicFilter(filter2)) // 输出两个元素，符合预期

补充说明 #

如果不想污染Array原型，可以改用独立函数调用，避免全局原型污染：

function thisMagicFilter(list, filter) {
  return list.filter(item => isMatch(item, filter))
}
// 调用方式
const filtered = thisMagicFilter(list, filter1)

当前实现默认是「过滤规则的所有字段都匹配才通过」，符合常规过滤需求，如果需要调整匹配逻辑可直接修改isMatch函数的判断规则。

内容的提问来源于stack exchange，提问作者ggonmar