前端下拉框选中状态过滤后端数据的代码问题排查

问题描述 #

前端下拉框的选中状态由以下数组控制，其中Mar和May为选中状态：

let dropdownValues = [ 
  {key: 'Mar', checked: true},
  {key: 'May', checked: true}, 
  {key: 'June', checked: false} 
]

后端返回的输入数据如下：

let input  = [
  {month: "Mar", count: "45"}, 
  {month: "May", count: "12"}, 
  {month: "June", count: "5"} 
]

需要根据下拉框选中状态过滤input数组，只保留选中月份的数据，但尝试的代码无法实现预期效果：

let output = input?.filter((el) => {
  return dropdownValues.some((f) => {
    return f.checked;
  });
});

错误原因 #

你写的some方法逻辑完全偏离需求：dropdownValues.some(f => f.checked)只要数组里有任意一个checked为true的项，就会返回true。这会导致filter直接保留所有input元素，根本没有按月份匹配过滤。

正确实现 #

方法一：高效匹配（推荐大数据量场景） #

先提取所有选中的月份存入集合，再用集合快速查询过滤：

// 收集所有选中的月份key
const selectedMonths = new Set(
  dropdownValues.filter(item => item.checked).map(item => item.key)
);

// 过滤input数组
const output = input?.filter(el => selectedMonths.has(el.month));

方法二：简洁写法（适合小数据量场景） #

直接在filter里关联月份匹配与选中状态判断：

const output = input?.filter(el => {
  // 检查是否存在匹配月份且选中的项
  return dropdownValues.some(f => f.checked && f.key === el.month);
});

两种方法都能得到预期输出：

[ 
  {month: "Mar", count: "45"}, 
  {month: "May", count: "12"} 
]

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