缩短javascript中的多个if条件

Question

var pageTypeArray = [];
var win = window.location.href;
if (win.match(".*product.*")) {
pageTypeArray.push("productDetail");
}
if (win.match(".*login.*")) {
pageTypeArray.push("login");
}
if (win.match(".*loan. *")) {
page TypeArray.push("loanDetail");
}
if (win.match(". *reward.*")) {
pageTypeArray.push("reward");
}
if (win.match("^(?!.* (product|login|loan reward)). *$")) {
pageTypeArray.push("uncategorized");
}

如果我要添加更多的条件，我该如何改进(缩短(此代码？

Answer 1

您可以维护一个类型和匹配的数组，然后过滤/映射该数组以创建pageTypeArray。

const win = window.location.href;
const matchArr = [
{ type: "productDetail", match: ".*product.*" },
{ type: "login", match: ".*login.*" },
{ type: "loanDetail", match: ".*loan. *" },
{ type: "reward", match: ". *reward.*" },
{ type: "uncategorized", match: "^(?!.* (product|login|loan reward)). *$" }
];
const pageTypeArray = matchArr
.filter(({ match }) => win.match(match))
.map(({ type }) => type);

Answer 2

如果要执行regex测试，而不是字符串，请改用正则表达式数组，并使用实际正则表达式。

此外，我很欣赏

".*loan. *"

和

". *reward.*"

是打字错误-如果您只想匹配任何包含loan和reward的字符串，只需使用正则表达式/loan/或/reward/即可。。(你的第一个loan将匹配loan，后面跟着任何字符，后面跟着零个或多个空格。你的reward将匹配任何字符，然后跟着零个以上空格，后面跟着reward。这听起来不像你需要的。

const patterns = [
[/product/, 'productDetail'],
[/login/, 'login'],
[/loan/, 'loanDetail'],
[/^(?!.* (product|login|loan reward)). *$/, 'uncategorized'],
];
const pageTypeArray = [];
const { href } = window.location;
for (const pattern of patterns) {
if (pattern[0].test(href)) {
pageTypeArray.push(pattern[1]);
}
}

你原始代码中的loan reward可能也是一个拼写错误——你是想在它们之间加一个|吗？如果是这样的话——如果uncategorized意味着在没有其他匹配的情况下存在——那么完全放弃正则表达式，只使用String#includes:

const patterns = [
['product', 'productDetail'],
['login', 'login'],
['loan', 'loanDetail'],
];
const pageTypeArray = [];
const { href } = window.location;
for (const pattern of patterns) {
if (href.includes(pattern[0])) {
pageTypeArray.push(pattern[1]);
}
}
if (pageTypeArray.length === 0) {
pageTypeArray.push('uncategorized');
}

Answer 3

我建议您使用这种方法：

const win = window.location.href;
const SCHEMA = [
{
reg: ".*product.*",
action: "productDetail",
},
{
reg: ".*login.*",
action: "login",
},
{
reg: ".*loan. *",
action: "loanDetail",
},
{
reg: ". *reward.*",
action: "reward",
},
{
reg: "^(?!.* (product|login|loan reward)). *$",
action: "uncategorized",
}
];
const elmts = SCHEMA.filter((elm) => {
return win.match(elm.reg);
});
const pageTypeArray = elmts.map((val) => {
return val.action;
});