如何根据选中的attribute_value禁用不匹配的attribute_value？

AI 小北

2026-7-22

属性值联动禁用逻辑实现

原始数据

1. 属性对象（attributes）

const attributes=[
  {
    "attribute_id": "1",
    "translation": {
      "en": {
        "name": "RAM"
      }
    }
  },
  {
    "attribute_id": "2",
    "translation": {
      "en": {
        "name": "ROM"
      }
    }
  },
  {
    "attribute_id": "3",
    "translation": {
      "en": {
        "name": "Camera"
      }
    }
  }
]

2. 属性值对象（attribute_values）

const attribute_values=[
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "1",
    "translations": {
      "en": {
        "name": "8 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "2",
    "translations": {
      "en": {
        "name": "12 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "3",
    "translations": {
      "en": {
        "name": "256 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "4",
    "translations": {
      "en": {
        "name": "512 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "3",
    "attribute_value_id": "5",
    "translations": {
      "en": {
        "name": "12 MP"
      }
    }
  }
]

3. 变体组合对象（variants）

const variants=[
  {
    "sku": "variant_1",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "2",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "3",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "8 GB"
          }
        },
        "attribute_id": "1",
        "attribute_value_id": "1"
      },
      {
        "translations": {
          "en": {
            "name": "256 GB"
          }
        },
        "attribute_id": "2",
        "attribute_value_id": "3"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_value_id": "5"
      }
    ]
  },
  {
    "sku": "variant_2",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "2",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "3",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "12 GB"
          }
        },
        "attribute_id": "1",
        "attribute_value_id": "2"
      },
      {
        "translations": {
          "en": {
            "name": "512 GB"
          }
        },
        "attribute_id": "2",
        "attribute_value_id": "4"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_value_id": "5"
      }
    ]
  },
  {
    "sku": "variant_3",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "2",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "3",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "12 GB"
          }
        },
        "attribute_id": "1",
        "attribute_value_id": "2"
      },
      {
        "translations": {
          "en": {
            "name": "256 GB"
          }
        },
        "attribute_id": "2",
        "attribute_value_id": "3"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_value_id": "5"
      }
    ]
  }
]

需求描述

当从attribute_values中选择任意attribute_value_id时，需依据variants中的属性值组合关系，将无法与选中值形成有效变体组合的attribute_value的isEnable属性设为false。例如选中attribute_value_id="1"（8 GB）时，需将attribute_value_id="4"（512 GB）的isEnable设为false，因为二者无对应的变体组合。

尝试实现的代码

const attributes=[
  {
    "attribute_id": "1",
    "translation": {
      "en": {
        "name": "RAM"
      }
    }
  },
  {
    "attribute_id": "2",
    "translation": {
      "en": {
        "name": "ROM"
      }
    }
  },
  {
    "attribute_id": "3",
    "translation": {
      "en": {
        "name": "Camera"
      }
    }
  }
]

const attribute_values=[
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "1",
    "translations": {
      "en": {
        "name": "8 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "2",
    "translations": {
      "en": {
        "name": "12 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "3",
    "translations": {
      "en": {
        "name": "256 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "4",
    "translations": {
      "en": {
        "name": "512 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "3",
    "attribute_value_id": "5",
    "translations": {
      "en": {
        "name": "12 MP"
      }
    }
  }
]

const variants=[
  {
    "sku": "variant_1",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "8 GB"
          }
        },
        "attribute_id": "1",
        "attribute_Value_id": "1"
      },
      {
        "translations": {
          "en": {
            "name": "256 GB"
          }
        },
        "attribute_id": "2",
        "attribute_Value_id": "3"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_Value_id": "5"
      }
    ]
  },
  {
    "sku": "variant_2",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "12 GB"
          }
        },
        "attribute_id": "1",
        "attribute_Value_id": "2"
      },
      {
        "translations": {
          "en": {
            "name": "512 GB"
          }
        },
        "attribute_id": "2",
        "attribute_Value_id": "4"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_Value_id": "5"
      }
    ]
  },
  {
    "sku": "variant_3",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }
      },
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "Camera"
          }
        }
      }
    ],
    "attribute_values": [
      {
        "translations": {
          "en": {
            "name": "12 GB"
          }
        },
        "attribute_id": "1",
        "attribute_Value_id": "2"
      },
      {
        "translations": {
          "en": {
            "name": "256 GB"
          }
        },
        "attribute_id": "2",
        "attribute_Value_id": "3"
      },
      {
        "translations": {
          "en": {
            "name": "12 MP"
          }
        },
        "attribute_id": "3",
        "attribute_Value_id": "5"
      }
    ]
  }
]


const selectedAttributeValueIds = ["1"]; 

// 查找选中的属性值
const selectedAttributeValues = selectedAttributeValueIds.map((selectedId) =>
  attribute_values.find((value) => value.attribute_value_id === selectedId)
);

// 获取选中的属性ID
const selectedAttributeIds = selectedAttributeValues.map((value) => value.attribute_id);

// 查找包含选中属性值的变体组合
const matchingVariantCombinations = variants.filter((variant) =>
  variant.attribute_values.every((attributeValue) =>
    selectedAttributeIds.includes(attributeValue.attribute_id) &&
    selectedAttributeValueIds.includes(attributeValue.attribute_Value_id)
  )
);

// 获取匹配变体中其他属性的属性值ID
const matchingAttributeValues = matchingVariantCombinations.flatMap((variant) =>
  variant.attribute_values
    .filter(
      (attributeValue) =>
        !selectedAttributeIds.includes(attributeValue.attribute_id) &&
        !selectedAttributeValueIds.includes(attributeValue.attribute_Value_id)
    )
    .map((attributeValue) => attributeValue.attribute_Value_id)
);

// 禁用匹配变体中不存在的属性值
attribute_values.forEach((value) => {
  if (
    !selectedAttributeIds.includes(value.attribute_id) &&
    !selectedAttributeValueIds.includes(value.attribute_value_id) &&
    !matchingAttributeValues.includes(value.attribute_value_id)
  ) {
    value.isEnable = false;
  }
});


console.log(attribute_values);

代码问题分析与修正

原代码存在两个核心问题：

变体筛选逻辑错误：every方法要求变体的所有属性值都属于选中的属性且匹配选中值，这会直接过滤掉所有包含未选中属性的变体，导致没有匹配结果。正确逻辑应该是变体包含所有选中的属性值（即选中的属性值都在变体中存在），而非变体的所有属性值都是选中项。
属性值ID拼写不一致：原始数据中attribute_values的属性是attribute_value_id，但variants中是attribute_Value_id（大小写差异），需要统一处理避免匹配失败。

修正后的代码

const attributes=[
  {
    "attribute_id": "1",
    "translation": {
      "en": {
        "name": "RAM"
      }
    }
  },
  {
    "attribute_id": "2",
    "translation": {
      "en": {
        "name": "ROM"
      }
    }
  },
  {
    "attribute_id": "3",
    "translation": {
      "en": {
        "name": "Camera"
      }
    }
  }
]

const attribute_values=[
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "1",
    "translations": {
      "en": {
        "name": "8 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "1",
    "attribute_value_id": "2",
    "translations": {
      "en": {
        "name": "12 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "3",
    "translations": {
      "en": {
        "name": "256 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "2",
    "attribute_value_id": "4",
    "translations": {
      "en": {
        "name": "512 GB"
      }
    }
  },
  {
    "isEnable": true,
    "attibute_id": "3",
    "attribute_value_id": "5",
    "translations": {
      "en": {
        "name": "12 MP"
      }
    }
  }
]

const variants=[
  {
    "sku": "variant_1",
    "attributes": [
      {
        "attribute_id": "1",
        "translation": {
          "en": {
            "name": "RAM"
          }
        }
      },
      {
        "attribute_id": "2",
        "translation": {
          "en": {
            "name": "ROM"
          }
        }

如何根据选中的attribute_value禁用不匹配的attribute_value？

原始数据 #

1. 属性对象（attributes） #

2. 属性值对象（attribute_values） #

3. 变体组合对象（variants） #

需求描述 #

尝试实现的代码 #

代码问题分析与修正 #

修正后的代码 #