如何基于数组键值对匹配筛选生成指定label数组？

现有以下两个JavaScript数组：

const raceOptions = [
    {
        "label": "race_option_american_indian_alaska_native",
        "value": "American Indian/Alaska Native"
    },
    {
        "label": "race_option_asian",
        "value": "Asian"
    },
    {
        "label": "race_option_black_african_american",
        "value": "Black/African American"
    },
    {
        "label": "race_option_native_hawaiian_pacific_islander",
        "value": "Native Hawaiian or Other Pacific Islander"
    },
    {
        "label": "race_option_white",
        "value": "White"
    },
    {
        "label": "prefer_not_to_say",
        "value": ""
    }
]

const selectedRace = [
    "American Indian/Alaska Native",
    "Native Hawaiian or Other Pacific Islander",
    "Black/African American"
]

需要从这两个数组中筛选出selectedRace里的值对应的raceOptions中的label，得到如下目标数组：

const filteredArray = [
  'race_option_american_indian_alaska_native',
  'race_option_native_hawaiian_pacific_islander',
  'race_option_black_african_american'
]

解决方案1：使用filter + includes #

直接通过数组方法链式调用完成筛选和映射：

const filteredArray = raceOptions
  // 筛选出value存在于selectedRace中的选项
  .filter(option => selectedRace.includes(option.value))
  // 提取这些选项的label字段
  .map(option => option.label);

解决方案2：用Set优化查询性能 #

如果raceOptions或selectedRace数据量较大，把selectedRace转为Set可以将查询效率从O(n)提升到O(1)：

// 将选中值转为Set，优化查询速度
const selectedRaceSet = new Set(selectedRace);

const filteredArray = raceOptions
  .filter(option => selectedRaceSet.has(option.value))
  .map(option => option.label);

两种方案都会自动排除prefer_not_to_say项，因为它的value为空字符串，并不存在于selectedRace数组中，符合需求。

内容的提问来源于stack exchange，提问作者Ralph David Abernathy