JavaScript如何按值比较两个对象数组并过滤下拉框已选选项

核心逻辑：不需要直接对比整个对象，下拉选项的value为唯一标识，仅对比该字段即可实现筛选，以下是两种常用实现：

方案1：直接遍历对比（适合小数据量） #

通过filter遍历全量选项，配合some判断当前选项是否在已选列表中存在：

const filteredMenu = menu.filter(menuItem => 
  !values.some(selectedItem => selectedItem.value === menuItem.value)
)

方案2：Set缓存已选值（适合大数据量，性能更高） #

先提取所有已选值存入Set，查找时间复杂度为O(1)，避免每次遍历整个已选数组：

// 提取所有已选的value存入Set
const selectedValueSet = new Set(values.map(item => item.value))
// 过滤掉已存在于Set中的选项
const filteredMenu = menu.filter(menuItem => !selectedValueSet.has(menuItem.value))

特殊场景补充 #

如果需要同时对比多个字段（比如label+value双校验），可以调整判断逻辑：

const filteredMenu = menu.filter(menuItem => 
  !values.some(selectedItem => 
    selectedItem.value === menuItem.value && selectedItem.label === menuItem.label
  )
)

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