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

Question

我目前正在开发一款餐厅应用程序，该应用程序允许您选择食材，并显示完整的营养数据。我要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"....
}
}

Answer 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映射中添加一个条目。