如何匹配数组对象值并获取符合选中条件的Variant ID？

要实现从variants数组中找到与selected选项完全匹配的变体ID，我们可以分步骤处理，先提取关键信息，再做匹配检查：

实现代码 #

const selected = [ { "id": 14 }, { "id": 95 } ];
const variants = [ 
  { "id": 1, "option_values": [ { "id": 7 }, { "id": 95 } ] }, 
  { "id": 2, "option_values": [ { "id": 8 }, { "id": 95 } ] }, 
  { "id": 3, "option_values": [ { "id": 14 }, { "id": 95 } ] } 
];

function getMatchingVariantId(selectedOptions, variantsList) {
  // 把选中的ID提取到Set中，提升后续查找效率
  const selectedIds = new Set(selectedOptions.map(item => item.id));
  
  // 找到第一个完全匹配的变体：变体的option_values必须包含所有选中ID
  const matchedVariant = variantsList.find(variant => {
    const variantOptionIds = new Set(variant.option_values.map(opt => opt.id));
    // 检查所有选中ID是否都存在于当前变体的选项中
    return [...selectedIds].every(id => variantOptionIds.has(id));
  });
  
  // 返回匹配到的ID，无匹配则返回null
  return matchedVariant ? matchedVariant.id : null;
}

// 调用示例
console.log(getMatchingVariantId(selected, variants)); // 输出：3

代码说明 #

• 提取选中ID：用map把selected中的对象转为纯ID数组，再存入Set——Set的has方法比数组includes更快，数据量大时优势更明显。
• 查找匹配变体：用Array.find遍历变体数组，对每个变体提取其option_values的ID集合，再用every验证所有选中ID是否都在这个集合里。
• 返回结果：找到匹配项就返回它的id，没找到则返回null，你可以根据需求改成undefined或其他默认值。

如果需要获取所有符合条件的变体ID（而非第一个），只需把find换成filter，再用map提取ID即可：

function getAllMatchingVariantIds(selectedOptions, variantsList) {
  const selectedIds = new Set(selectedOptions.map(item => item.id));
  
  return variantsList
    .filter(variant => {
      const variantOptionIds = new Set(variant.option_values.map(opt => opt.id));
      return [...selectedIds].every(id => variantOptionIds.has(id));
    })
    .map(variant => variant.id);
}

console.log(getAllMatchingVariantIds(selected, variants)); // 输出：[3]

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