如何将这个多条件if-else块转换为较短的语法-javascript

Question

我使用多个if-else-if语句编写了一个条件块。我已经查阅了各种文章，以避免使用多个if else。那么，如何将枚举用于这种多重if-else条件呢？

这是代码：

if (!props.focusable) {
svg = svg.replace("<svg ", '<svg focusable="false" ');
}
options.domProps = { innerHTML: svg };
} else {
options.class.push("fa-" + iconName);
if (props.brand) {
options.class.push("fab");
} else if (props.fab) {
options.class.push("fab");
} else if (props.regular) {
options.class.push("far");
} else if (props.far) {
options.class.push("far");
} else if (props.light) {
options.class.push("fal");
}  else if (props.fal) {
options.class.push("fal");
} else if (props.old) {
options.class.push("fa");
}  else if (props.fa) {
options.class.push("fa");
}  else {
options.class.push("fas");
}
}

如何在性能方面使其更短、更好？

Answer 1

您可以使用一种表驱动的方法，该方法可以支持任何数量的比较，而无需添加更多的代码行(只是表中的另一行(：

const tags = [
"brand", "fab",
"regular", "far",
"light", "fal",
"old", "fa"
];
if (!props.focusable) {
svg = svg.replace("<svg ", '<svg focusable="false" ');
options.domProps = { innerHTML: svg };
} else {
options.class.push("fa-" + iconName);
let cls = "fas";
for (let i = 0; i < tags.length; i += 2) {
if (props[tags[i]] || props[tags[i + 1]]) {
cls = tags[i + 1];
break;
}
}
options.class.push(cls);
}

Answer 2

您可以使用OR运算符组合某些else-if

if (!props.focusable) {
svg = svg.replace("<svg ", '<svg focusable="false" ');
}
options.domProps = { innerHTML: svg };
} else {
options.class.push("fa-" + iconName);
if (props.brand || props.fab) {
options.class.push("fab");
} else if (props.regular || props.far) {
options.class.push("far");
} else if (props.light || props.fal) {
options.class.push("fal");
} else if (props.old || props.fa) {
options.class.push("fa");
} else {
options.class.push("fas");
}
}

Answer 3

if (!props.focusable) {
svg = svg.replace("<svg ", '<svg focusable="false" ');
}
options.domProps = { innerHTML: svg };
} else {
options.class.push("fa-" + iconName);
let cls = "fas";
if (props.brand || props.fab) cls = "fab";
if (props.regular || props.far) cls  = "far"; 
if (props.light || props.fal) cls  = "fal"; 
if (props.old || props.fa) cls  = "fa";
options.class.push(cls);
}

希望得到帮助。谢谢

Answer 4

options.class.push("fa-" + iconName)
props.brands || props.fab ? options.class.push("fab") :
props.regular || props.far ? options.class.push("far") :
props.light || props.fal ? options.class.push("fal") :
props.old || props.fa ? options.class.push("fa") :
options.class.push("fas")

Answer 5

yo可以使用switch语句。switch case用于多个语句。请阅读此以供参考https://www.w3schools.com/js/js_switch.asp