使用 if 语句命令缩短 switch 语句的方法答案

【问题标题】：Ways to shorten a switch statement with if statement commands使用 if 语句命令缩短 switch 语句的方法
【发布时间】：2021-07-01 10:05:40
【问题描述】：

我目前正在开发一款允许您选择食材并显示完整营养数据的餐厅应用。我将有大约 20 种成分。

有什么办法可以缩短？

function displayImage(image) {
  let display = document.querySelector(".display-ingredient")
  switch (image) {
    case "lamb":
      display.src = "images/" + image + ".png";
      lambObj.clicked = !lambObj.clicked
      if (lambObj.clicked === true) {
        meal.push(lambObj);
      } else {
        //unfinished code here
      }
      break;
    case "steak"....
  }
}

【问题讨论】：

是的，将您的列表存储在数组或映射中...
如果您基于使用适当的复选框在此处构建 UI，您可能不必跳过诸如 lambObj.clicked = !lambObj.clicked、if (lambObj.clicked === true) { … } 之类的圈套。（您仍然可以使用图像作为标签来切换复选框。）此外，基本的可访问性可能会更好。
@CBroe 嗯..实际上可能会这样做。而不是在另一个 div 中显示图像，只需在悬停时显示营养不透明度。谢谢你的提示！这是我的第一个合适的项目，所以我不会想到这些简单的事情。

标签： javascript switch-statement

【解决方案1】：

构建一个Map 的有效成分：

const ingredients = new Map()
    .set("lamb", lambObj)
    .set("steak", steakObj)
    /*...*/

然后将您的功能简化为仅使用地图中的查找：

function displayImage(image) {
  let display = document.querySelector(".display-ingredient");

  if(ingredients.has(image)) {
    display.src = "images/" + image + ".png";

    const obj = ingredients.has(image);
    obj.clicked = !obj.clicked;
    if (obj.clicked === true) {
      meal.push(obj);
    } else {
      //unfinished code here
    }
  }

 /* any other logic */
}

这适用于所有成分，您无需为每种成分手动添加代码，只需在 ingredients 映射中添加一个条目。

【讨论】：