如何遍历数组并删除filterValueList为空的对象 附TypeScript业务代码

实现方案 #

你原有代码的核心问题是删除空filterValueList对应对象的逻辑错误，且两个处理函数重复代码过多，可按如下方式修改：

优化后完整代码（抽离公共逻辑，减少冗余）

// 给FilterCriterias添加明确类型，避免any类型隐藏问题
FilterCriterias: Array<{filtercolumnName: string, filterValueList: string[]}> = []

// 抽离公共的筛选规则更新方法
private updateFilter(columnName: string, filterValue: any) {
  // 查找当前列是否已经存在筛选规则
  const existRule = this.FilterCriterias.find(item => item.filtercolumnName === columnName)
  
  if (existRule) {
    const valueIndex = existRule.filterValueList.indexOf(filterValue.name)
    if (valueIndex >= 0) {
      // 已选中该值，执行取消选中移除
      existRule.filterValueList.splice(valueIndex, 1)
    } else {
      // 未选中该值，添加到筛选列表
      existRule.filterValueList.push(filterValue.name)
    }
  } else {
    // 没有对应列的筛选规则，新增规则
    this.FilterCriterias.push({
      filtercolumnName: columnName,
      filterValueList: [filterValue.name]
    })
  }

  // 过滤空值规则+去重二合一：直接排除filterValueList为空的项，同时过滤同列重复规则
  this.FilterCriterias = this.FilterCriterias.reduce((result, current) => {
    if (current.filterValueList.length > 0 && !result.find(item => item.filtercolumnName === current.filtercolumnName)) {
      result.push(current)
    }
    return result
  }, [] as typeof this.FilterCriterias)

  console.log('filtered', this.FilterCriterias)
}

// 产品类型变更直接调用公共方法
public productChanged(filterValue: any) {
  this.updateFilter('productType', filterValue)
}

// 合集变更直接调用公共方法
public collectionChanged(filterValue: any) {
  this.updateFilter('collections', filterValue)
}

最小改动方案（不抽离公共逻辑，仅修改原有代码）

如果不想调整原有代码结构，只需要在两个函数的去重reduce逻辑中增加空值判断，同时把过滤后的结果赋值回原数组即可，修改如下：

// 把原有去重的reduce代码替换为以下内容
var filtered = this.FilterCriterias.reduce((filtered: any, item: any) => {
  // 新增item.filterValueList.length > 0判断，过滤空值规则
  if(item.filterValueList.length > 0 && !filtered.some((filteredItem: any) => filteredItem.filtercolumnName === item.filtercolumnName)) {
    filtered.push(item)
  }
  return filtered
}, [])
// 把过滤后的结果赋值回原数组
this.FilterCriterias = filtered
console.log('filtered',filtered);

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