如何在JavaScript中按属性UID组合过滤嵌套变体数组

需求说明 #

现有如下产品变体JSON数据，需筛选出attributes数组中同时包含指定颜色UID（Y29uZmlndXJhYmxlLzkzLzE0MQ==）和尺寸UID（Y29uZmlndXJhYmxlLzEzOC84MA==）的变体条目：

{
 "variants": [
 {
  "product": {
    "uid": "MzU5",
    "name": "AISLING BODYSUIT - MEDIUM / OAT",
    "sku": "LBK-3514260",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": 8,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "OAT",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
    },
    {
      "label": "MEDIUM",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC80"
    }
  ]
},
{
  "product": {
    "uid": "MzY0",
    "name": "AISLING BODYSUIT - MEDIUM / VANILLA",
    "sku": "LBK-3516025",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": null,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "VANILLA",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
    },
    {
      "label": "MEDIUM",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC80"
    }
  ]
},
{
  "product": {
    "uid": "MzYw",
    "name": "AISLING BODYSUIT - LARGE / OAT",
    "sku": "LBK-3513388",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": 4,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "OAT",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
    },
    {
      "label": "LARGE",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC81"
    }
  ]
},
{
  "product": {
    "uid": "MzY1",
    "name": "AISLING BODYSUIT - LARGE / VANILLA",
    "sku": "LBK-3517556",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": 6,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "VANILLA",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
    },
    {
      "label": "LARGE",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC81"
    }
  ]
},
{
  "product": {
    "uid": "MzY2",
    "name": "AISLING BODYSUIT - EXTRA-LARGE / VANILLA",
    "sku": "LBK-3514153",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": 4,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "VANILLA",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
    },
    {
      "label": "EXTRA-LARGE",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC84Mg=="
    }
  ]
},
{
  "product": {
    "uid": "MzYy",
    "name": "AISLING BODYSUIT - EXTRA-SMALL / VANILLA",
    "sku": "LBK-35199",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": null,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "VANILLA",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
    },
    {
      "label": "EXTRA-SMALL",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC84MQ=="
    }
  ]
},
{
  "product": {
    "uid": "MzU4",
    "name": "AISLING BODYSUIT - SMALL / OAT",
    "sku": "LBK-3519478",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": 5,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "OAT",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
    },
    {
      "label": "SMALL",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC84MA=="
    }
  ]
},
{
  "product": {
    "uid": "MzYz",
    "name": "AISLING BODYSUIT - SMALL / VANILLA",
    "sku": "LBK-3515626",
    "stock_status": "IN_STOCK",
    "only_x_left_in_stock": null,
    "price_range": {
      "minimum_price": {
        "regular_price": {
          "value": 125,
          "currency": "USD"
        }
      }
    }
  },
  "attributes": [
    {
      "label": "VANILLA",
      "code": "color",
      "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
    },
    {
      "label": "SMALL",
      "code": "size",
      "uid": "Y29uZmlndXJhYmxlLzEzOC84MA=="
    }
   ]
  }
 ]
}

实现代码 #

可以通过Array.filter()结合Array.map()和Array.includes()来实现筛选：

// 定义目标属性UID
const targetColorUid = "Y29uZmlndXJhYmxlLzkzLzE0MQ==";
const targetSizeUid = "Y29uZmlndXJhYmxlLzEzOC84MA==";

// 假设原始数据存储在data变量中（替换为你的实际数据变量）
const data = /* 你的原始JSON数据 */;

// 筛选符合条件的变体
const filteredVariants = data.variants.filter(variant => {
  // 提取当前变体的所有属性UID
  const attributeUids = variant.attributes.map(attr => attr.uid);
  // 检查是否同时包含两个目标UID
  return attributeUids.includes(targetColorUid) && attributeUids.includes(targetSizeUid);
});

// 输出结果
console.log(filteredVariants);

代码说明 #

1. 先定义需要匹配的两个属性UID；
2. 使用filter()遍历所有变体，对每个变体：
   • 用map()提取其所有属性的UID，生成一个UID数组；
   • 用includes()检查该数组是否同时包含两个目标UID，满足条件的变体将被保留；
3. 最终filteredVariants即为符合要求的变体数据。

也可以用更简洁的方式，把目标UID存入数组后用every()检查：

const targetUids = ["Y29uZmlndXJhYmxlLzkzLzE0MQ==", "Y29uZmlndXJhYmxlLzEzOC84MA=="];

const filteredVariants = data.variants.filter(variant => {
  const attributeUids = variant.attributes.map(attr => attr.uid);
  return targetUids.every(uid => attributeUids.includes(uid));
});

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