我们在写 JavaScript 时经常遇到一些逻辑判断，可以使用 if/else 或者 switch 来实现，但是对于复杂的判断，过多的条件往往会让我们的代码变得冗长，可读性下降。故我们需要优化我们的代码，使之更优雅💎。
我们写一个常见的 if/else 判断的函数，然后对他进行优化。
const myFunction = (status) => {
if (status === 1) {
console.log("status1");
} else if (status === 2) {
console.log("status2");
} else if (status === 3) {
console.log("status3");
}
};
我们知道， JavaScript 的 Object 其实就是一些 键值对 的无序集合，正因如此我们可以借助其存放判断的条件。例如上述情况，判断条件是一个数字类型，后续操作也仅仅是用到了一个字符串，这时我们就可以创建一个对象，把所用到的数字和字符串分别作为 Object 的键名和对应值。
// 将判断条件放入 Object 中
const statusObj = {
1: "status1",
2: "status2",
3: "status3",
};
// 优化后函数💎
const myFunction = (status) => {
console.log(statusObj[status]);
};
除了原始对象以外，我们还可以使用 Map 对象。我们来看下 MDN 对其的描述：
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
不难看出，Map 对象其实就是普通对象的加强版，特别是任何值都可以作为其键值对，这意味着 函数 、 正则 等也可以作为其键或值，这也就大大方便了我们将其作为判断的操作。具体关于 Map 对象的细节此处不再展开。
// 将判断条件放入 Map 中
const statusMap = new Map([
[1, "status1"],
[2, "status2"],
[3, "status3"],
]);
// 优化后函数💎
const myFunction = (status) => {
console.log(statusMap.get(status));
};
既然一元判断可以优化，那么多元判断也可以进行优化，下面是有两种判断条件的案例。
// 举个例子🌰
const myFunction = (right, status) => {
if (right === "administrator" && status === 1) {
console.log("管理员喜欢王冰冰");
} else if (right === "administrator" && status === 2) {
console.log("管理员不喜欢王冰冰");
} else if (right === "user" && status === 1) {
console.log("用户喜欢王冰冰");
} else if (right === "user" && status === 2) {
console.log("用户不喜欢王冰冰");
}
};
// 有重复情况的例子🌰
const myFunction = (right, status) => {
if (right === "administrator" && status === 1) {
console.log("管理员喜欢王冰冰");
} else if (right === "administrator" && status === 2) {
console.log("管理员喜欢王冰冰");
} else if (right === "user" && status === 1) {
console.log("用户喜欢王冰冰");
} else if (right === "user" && status === 2) {
console.log("用户喜欢王冰冰");
}
};
两种情况也同样可以用 Object 进行优化。
// 优化"例子🌰"
// 将判断条件放入 Object 中
const actionsObj = {
"administrator-1": "管理员喜欢王冰冰",
"administrator-2": "管理员不喜欢王冰冰",
"user-1": "用户喜欢王冰冰",
"user-2": "用户不喜欢王冰冰",
};
// 优化后函数💎
const myFunction = (right, status) => {
console.log(actionsObj[`${right}-${status}`]);
};
// 可以将函数作为"value",以下几种情况类似,不再赘述🥕
const actionsObj = {
"administrator-1": () => console.log("管理员喜欢王冰冰"),
"administrator-2": () => console.log("管理员喜欢王冰冰"),
"user-1": () => console.log("管理员喜欢王冰冰"),
"user-2": () => console.log("管理员喜欢王冰冰"),
};
// 优化后函数💎
const myFunction = (right, status) => {
actionsObj[`${right}-${status}`]();
};
// 优化"有重复情况的例子🌰"
// 可以提取公共函数,以下几种情况类似,不再赘述🍓
const actions = () => {
const f1 = () => console.log("管理员喜欢王冰冰");
const f2 = () => console.log("用户喜欢王冰冰");
return {
"administrator-1": f1,
"administrator-2": f1,
"user-1": f2,
"user-2": f2,
};
};
// 优化后函数💎
const myFunction = (right, status) => {
actions()[`${right}-${status}`]();
};
同样的，我们也可以用 Map 对象。我们把两个条件存成字符串。
// 优化"例子🌰"
// 将判断条件放入 Map 中
const actionsMap = new Map([
['administrator-1', '管理员喜欢王冰冰'],
['administrator-2', '管理员不喜欢王冰冰'],
['user-1', '用户喜欢王冰冰'],
['user-2', '用户不喜欢王冰冰']
]);
// 优化后函数💎
const myFunction = (right, status) => {
console.log(actionsMap.get(`${right}-${status}`));
};
// 优化"例子🌰"
// 将判断条件放入 Map 中
const actionsMap = new Map([
[{ right: 'administrator', status: 1 }, () => console.log('管理员喜欢王冰冰')],
[{ right: 'administrator', status: 2 }, () => console.log('管理员不喜欢王冰冰')],
[{ right: 'user', status: 1 }, () => console.log('用户喜欢王冰冰')],
[{ right: 'user', status: 2 }, () => console.log('用户不喜欢王冰冰')]
]);
// 优化后函数💎
const myFunction = (right, status) => {
const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status));
action.forEach(([_, index]) => index.call());
};
利用正则表达式可以处理相对复杂一点的情况。
// 优化"有重复情况的例子🌰"
// 将判断条件写成 正则 后再放入 Map 中
const actions = () => {
const f1 = () => console.log('管理员喜欢王冰冰');
const f2 = () => console.log('用户喜欢王冰冰');
return new Map([
[/^administrator-[1-2]/, f1],
[/^user-[1-2]/, f2]
]);
};
// 优化后函数💎
const myFunction = (right, status) => {
const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`));
action.forEach(([_, index]) => index.call());
};
我们利用原生 Object 和 Map 对象对判断进行了优化，不过在真正的开发过程中，我们还是要遵循 实用优先 的原则，避免过度优化。
