如何最大限度简化以下这段jQuery代码？

核心思路 #

通过值-类名映射对象替代重复的if判断，减少冗余代码，同时只执行一次DOM选择，提升效率和可维护性。

简洁可读版 #

$("#selectViewport").change(function(){
  // 建立下拉值与目标类名的映射
  const classMap = {
    "1": "desktop",
    "2": "tablet",
    "3": "mobile"
  };
  // 获取当前值对应的类名
  const targetClass = classMap[$(this).val()];
  // 存在对应类名时添加
  if(targetClass) {
    $('.box').addClass(targetClass);
  }
});

极致精简版 #

如果追求代码行数更少，可合并为一行核心逻辑（仍保留可读性）：

$("#selectViewport").change(function(){
  $('.box').addClass({ "1":"desktop", "2":"tablet", "3":"mobile" }[$(this).val()] || '');
});

优化点说明 #

• 移除了重复的if判断，新增视图类型时只需在映射对象中添加键值对，无需修改逻辑
• 仅执行一次$('.box')DOM查询，避免重复操作DOM
• 用|| ''处理无效值的情况，防止向元素添加undefined类名

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