如何在productVariants数组中找到selectedOptions匹配options所有对象的元素？

需求说明 #

给定两个数组：

• options：包含需要匹配的选项列表，每个元素是{name: string, value: string}结构
• productVariants：产品变体列表，每个变体的selectedOptions属性包含该变体的选项（可带额外属性）

需要找到**selectedOptions包含所有options中name和value完全匹配条目**的产品变体（允许selectedOptions有额外属性）。

类型定义 #

type Option = { name: string; value: string };
type ProductVariant = { selectedOptions: Array<Option & { optionalFields?: string }> };

解决方案 #

核心思路 #

1. 将options转换为以name-value为唯一标识的集合，方便快速校验匹配关系
2. 遍历每个产品变体，将其selectedOptions也转换为同样的标识集合
3. 检查options的所有标识是否都存在于变体的标识集合中，满足条件的即为目标变体

代码实现 #

// 将选项数组转换为name-value组合的键集合
function createOptionKeySet(options: Option[]): Set<string> {
  return new Set(options.map(opt => `${opt.name}-${opt.value}`));
}

// 查找匹配的产品变体
function findMatchingVariant(options: Option[], variants: ProductVariant[]): ProductVariant | undefined {
  const requiredOptionKeys = createOptionKeySet(options);
  
  return variants.find(variant => {
    const variantOptionKeys = createOptionKeySet(variant.selectedOptions);
    // 验证所有必填选项都在变体的选项中存在
    return Array.from(requiredOptionKeys).every(key => variantOptionKeys.has(key));
  });
}

示例测试 #

测试数据（原示例）

const options: Option[] = [
  { name: "Format", value: "Hardback" },
  { name: "Colour", value: "Pink" },
  { name: "Size", value: "Large" }
];

const productVariants: ProductVariant[] = [
  {
    selectedOptions: [
      { name: "Format", value: "Zine", optionalFields: "abc" },
      { name: "Colour", value: "Grey", optionalFields: "abc" }
    ]
  },
  {
    selectedOptions: [
      { name: "Format", value: "Zine", optionalFields: "abc" },
      { name: "Colour", value: "Pink", optionalFields: "abc" }
    ]
  }
];

执行结果

const matchingVariant = findMatchingVariant(options, productVariants);
console.log(matchingVariant); // 输出 undefined（原示例中无符合条件的变体）

含匹配项的测试数据

const productVariantsWithMatch: ProductVariant[] = [
  // 其他变体...
  {
    selectedOptions: [
      { name: "Format", value: "Hardback", optionalFields: "xyz" },
      { name: "Colour", value: "Pink", optionalFields: "xyz" },
      { name: "Size", value: "Large", optionalFields: "xyz" },
      { name: "Material", value: "Cotton", optionalFields: "xyz" } // 额外属性不影响匹配
    ]
  }
];

const matchingVariant = findMatchingVariant(options, productVariantsWithMatch);
console.log(matchingVariant); // 输出上述包含所有必填选项的变体对象

注意事项 #

• 匹配为严格字符串匹配，大小写敏感；若需要忽略大小写，可在生成键时统一转换为小写（如${opt.name.toLowerCase()}-${opt.value.toLowerCase()}）
• 若需要返回所有符合条件的变体，将variants.find()替换为variants.filter()即可
• 若options中存在同名不同值的选项，该方法依然有效（因为键是name-value的组合）

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