JavaScript：如何使用较少重复的代码重构 if..else 语句？

Question

我有一个服务器生成的模板，其中包含多个 ID 为book_cat_id 、 book_cat_id2等的元素，我需要找到并更改它们的内嵌背景颜色以匹配相应的类别

data-cat_label="Fiction"可以是 Fiction、Fantasy、Comic、History、Technical 中的任何一种

对于多种颜色，是否有更有效的方法？

 const colors = { fiction: "#ff7477", fantasy: "#7dbb65", technical: "#BC9DCA", comic: "#00A2E0", history: "#ff0099", health: "#f59e2e" } let id1 = book_cat_id.getAttribute("data-cat_label"); let id2 = book_cat_id2.getAttribute("data-cat_label"); if(id1 === 'Fiction') { book_cat_id.style.backgroundColor = colors.fiction; }else if (id1 === 'Fantasy') { book_cat_id.style.backgroundColor = colors.fantasy; }else if (id1 === 'Comic') { book_cat_id.style.backgroundColor = colors.comic; }else if (id1 === 'History') { book_cat_id.style.backgroundColor = colors.history; } if(id2 === 'Fiction') { book_cat_id2.style.backgroundColor = colors.fiction; }else if (id2 === 'Fantasy') { book_cat_id2.style.backgroundColor = colors.fantasy; }else if (id2 === 'Comic') { book_cat_id2.style.backgroundColor = colors.comic; }else if (id2 === 'History') { book_cat_id2.style.backgroundColor = colors.history; }

 <table> <tr> <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;"> Book </td> </tr> <tr> <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;"> Book </td> </tr> </table>

Answer 1

在这种情况下，你可以做这样的事情。

代替：

if(id2 === 'Fiction') {
    book_cat_id2.style.backgroundColor = colors.fiction;
}else if (id2 === 'Fantasy') {
     book_cat_id2.style.backgroundColor = colors.fantasy;
}else if (id2 === 'Comic') {
     book_cat_id2.style.backgroundColor = colors.comic;
}else if (id2 === 'History') {
     book_cat_id2.style.backgroundColor = colors.history;
}

你可以这样做：

book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

Answer 2

由于您已经有了键名，只需使用toLowerCase()

 const colors = { fiction: "#ff7477", fantasy: "#7dbb65", technical: "#BC9DCA", comic: "#00A2E0", history: "#ff0099", health: "#f59e2e" } let id1 = book_cat_id.getAttribute("data-cat_label").toLowerCase(); let id2 = book_cat_id2.getAttribute("data-cat_label").toLowerCase(); book_cat_id.style.backgroundColor = colors[id1]; book_cat_id2.style.backgroundColor = colors[id2];

 <table> <tr> <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;"> Book </td> </tr> <tr> <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;"> Book </td> </tr> </table>

Answer 3

您快到了。 将当前的 Javascript 替换为以下内容：

const colors ={
    fiction: "#ff7477",  
    fantasy: "#7dbb65",  
    technical: "#BC9DCA", 
    comic: "#00A2E0", 
    history: "#ff0099", 
    health: "#f59e2e" 
}

let id1 = book_cat_id.getAttribute("data-cat_label");
let id2 = book_cat_id2.getAttribute("data-cat_label");

// Replaces if statements with a direct lookup by ID
book_cat_id.style.backgroundColor = colors[id1.toLowerCase()];
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()];

Answer 4

您可以创建 2 个数组 - typeName 和 typeColor。 typeName[0] 将指代“Fiction”，typeColor[0] 将指代“#ff7477”。 然后，您可以创建一个 for 循环并像这样循环遍历它们：

const typeColors = [
 "#ff7477",  
 "#7dbb65",  
 "#BC9DCA", 
 "#00A2E0", 
 "#ff0099", 
 "#f59e2e" 
];

const typeNames = [
 "Fiction",
 "Fantasy",
 "Technical",
 "Comic",
 "History",
 "Health"
];

let id1   = book_cat_id.getAttribute("data-cat_label");
let id2   = book_cat_id2.getAttribute("data-cat_label");

for (var i = 0; i<typeColors.length; i++) {
    if (id1 == typeNames[i]) {
        book_cat_id.style.backgroundColor = typeColors[i];
    }
    if (id2 == typeNames[i]) {
        book_cat_id2.style.backgroundColor = typeColors[i];
    }
}

Answer 5

您可以使用[] 表示法使用对象的计算属性访问

 const colors = { fiction: "#ff7477", fantasy: "#7dbb65", technical: "#BC9DCA", comic: "#00A2E0", history: "#ff0099", health: "#f59e2e" } let id1 = book_cat_id.getAttribute("data-cat_label"); let id2 = book_cat_id2.getAttribute("data-cat_label"); book_cat_id.style.backgroundColor = colors[id1.toLowerCase()] book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

 <table> <tr> <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;"> Book </td> </tr> <tr> <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;"> Book </td> </tr> </table>

Answer 6

如果 data-cat_label 与颜色对象中的属性命名相同，则可以使用点符号（colors.id1）的括号（colors[id1]）访问对象属性。

 let id1   = book_cat_id.getAttribute("data-cat_label").toLowerCase();
 let id2   = book_cat_id2.getAttribute("data-cat_label").toLowerCase();
 book_cat_id.style.backgroundColor = colors[id1];
 book_cat_id2.style.backgroundColor = colors[id2];