本文介绍如何对键值结构的 JSON 对象（而非数组）按 disease 字段高效过滤，核心是使用 Object.values() 转为数组后结合 filter() 实现精准匹配。
本文介绍如何对键值结构的 json 对象（而非数组）按 `disease` 字段高效过滤，核心是使用 `object.values()` 转为数组后结合 `filter()` 实现精准匹配。
在实际营养推荐系统或健康饮食应用中，常会将餐食数据以对象形式组织（如 "1": { ... }, "2": { ... }），其中键为唯一 ID，值为餐食详情。这种结构虽便于随机访问，但不支持原生数组方法（如 filter、map）。当需要根据用户所选疾病（如 ["Diabetes", "Hypertension"]）动态筛选适配餐食时，必须先将其“扁平化”为可遍历的数组。
解决方案：Object.values() + filter() 组合
Object.values(obj) 可将对象的所有属性值提取为一个数组，从而无缝对接数组方法。以下是完整、可复用的过滤逻辑：
// 假设已加载 breakfastFood.json 数据
const breakfastData = {
"1": { "name": "Scrambled eggs with asparagus and tomatoes", "stars": 4, "price": "", "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" },
"2": { "name": "Greek yoghurt with mixed berries and chopped almonds", "stars": 3, "price": 0, "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" },
"3": { "name": "Oatmeal pancakes with blueberries", "stars": 4, "price": 0, "disease": "Hypertension", "image_uri": "...", "meal_time": "breakfast" },
"4": { "name": "Greek yoghurt with mixed nuts, berries, and honey", "stars": 4, "price": 0, "disease": "Diabetes", "image_uri": "...", "meal_time": "breakfast" }
};
// 用户选择的疾病列表（支持多病种）
const selectedDiseases = ["Diabetes", "Hypertension"];
// ✅ 正确过滤：转为数组后检查 disease 是否在选中列表中
const filteredBreakfast = Object.values(breakfastData).filter(meal =>
selectedDiseases.includes(meal.disease)
);
console.log(filteredBreakfast);
// 输出：包含 disease 为 "Diabetes" 或 "Hypertension" 的所有餐食对象（无原始 key）
⚠️ 注意事项：
- Object.values() 丢弃原始键名（如 "1"、"2"），若后续需保留 ID 关联（例如点击跳转、统计分析），应改用 Object.entries() 并解构 [key, value]；
- 确保 meal.disease 字段存在且为字符串类型，建议增加防御性判断：meal?.disease && selectedDiseases.includes(meal.disease)；
- 若需对早餐、午餐、晚餐三类 JSON 文件统一处理，可封装为通用函数：
const filterByDisease = (foodData, diseases) =>
Object.values(foodData).filter(meal =>
meal?.disease && diseases.includes(meal.disease)
);
// 应用于多餐类
const filteredFoodChoices = {
breakfast: filterByDisease(breakfastData, selectedDiseases),
lunch: filterByDisease(lunchData, selectedDiseases),
dinner: filterByDisease(dinnerData, selectedDiseases)
};
该方法简洁、高效、符合现代 JavaScript 最佳实践，适用于前端数据预处理、React/Vue 列表渲染前过滤等典型场景。
