React中如何利用JSON简化重复的switch/case语句？

嗨Katie，你完全没必要写这么冗长重复的switch语句，甚至根本不需要动态生成case——有更简洁、易维护的解决方案，完美适配你JSON体量巨大的场景！

问题核心分析 #

你当前的switch语句本质上只是在做一件事：判断val是否是json['meat']['main']的合法键，如果是就返回对应的值，否则返回空字符串。每个case的逻辑完全一致，只是重复检查不同的键，这完全是冗余的。

最优替代方案 #

直接利用JavaScript对象的键访问特性，配合存在性检查就能替代整个switch语句，代码量骤减且可扩展性极强：

基础版本（兼容旧环境）

function getMeal(val) {
  const mainMeats = json.meat.main;
  // 检查val是否是mainMeats的自有属性
  return mainMeats.hasOwnProperty(val) ? mainMeats[val] : '';
}

ES6+简洁版本（推荐）

利用可选链操作符?.处理深层对象可能不存在的情况，再配合空值合并运算符??返回默认空字符串：

function getMeal(val) {
  return json?.meat?.main?.[val] ?? '';
}

为什么不需要动态生成case？ #

动态遍历JSON键来生成switch的case语句反而会增加复杂度（比如需要拼接代码字符串再执行），而且完全没必要——对象本身就支持通过变量键直接访问值，只要做个简单的存在性判断，就能覆盖所有合法的肉类键，不管你的JSON后续新增多少种肉类，这个函数都不需要修改。

扩展场景（如果需要覆盖更多分类） #

如果后续JSON里除了meat.main还有其他分类（比如meat.side、vegetable等），也可以轻松扩展这个逻辑，比如：

function getFood(category, val) {
  return json?.[category]?.main?.[val] ?? '';
}
// 调用示例：getFood('meat', 'chicken')

这样不管你的JSON体量多大，都能用极简的代码实现需求，彻底告别维护大量重复case的烦恼！

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