改进 JavaScript 条件语句，探索可以替代 if...else 的 7 种方式！

当优化 JavaScript 代码时，条件语句是一个经常需要思考和改进的关键部分。if...else 结构虽然是我们常用的条件语句之一，但当代码逻辑变得复杂，if...else 结构可能会导致代码冗长、难以维护和理解。因此，了解并掌握优化 if...else 结构的方法对于提高代码的可读性、可维护性和性能至关重要。

本篇文章中将根据不同的条件语句场景，提供各种不同 JavaScript 条件语句的写法，重点关注如何替代 if...else 的写法，从简单的技巧和出发，目的是提高代码的简洁性和可读性。

1. 使用三元运算符

三元运算符是 JavaScript 中的一种条件表达式，可以用于简化 if...else 语句的写法。它的语法是：

1condition ? expr1 : expr2;
2

其中，condition 是一个条件表达式，如果条件为真，则返回 expr1，否则返回 expr2。

下面用一个简单的示例，说明如何使用三元运算符优化条件语句对比：

示例：使用三元运算符优化条件语句对比

 1// 原始的 if...else 语句
 2let num = 0;
 3let result;
 4if (num > 0) {
 5  result = "positive";
 6} else if (num < 0) {
 7  result = "negative";
 8} else {
 9  result = "zero";
10}
11console.log(result);
12

使用三元运算符优化后

1let num = 0;
2let result = num > 0 ? "positive" : num < 0 ? "negative" : "zero";
3console.log(result);
4

对于简单的条件语句，三元运算符是一个不错的选择，使用三元运算符可以使代码更加简洁和清晰，但在某些情况下也可能会影响代码的可读性。对于复杂的条件逻辑，建议慎重使用，也可以选用其他方式替代。

2. 使用逻辑与（&&）和逻辑或（||）

逻辑与（&&）和逻辑或（||）也是 JavaScript 中用于处理条件语句的方式之一，与三元运算符类似，逻辑与（&&）和逻辑或（||）可以帮助简化一些简单条件判断的写法。

示例：使用逻辑与（&&）和逻辑或（||）优化条件语句对比

 1// 原始的 if 语句
 2let num = 10;
 3let result;
 4if (num > 0) {
 5  result = "positive";
 6} else {
 7  result = "non-positive";
 8}
 9console.log(result);
10

使用逻辑与和逻辑或优化后

1let num = 10;
2let result = (num > 0 && "positive") || "non-positive";
3console.log(result);
4

在上面的示例中，利用逻辑与（&&）和逻辑或（||）的短路特性来简化条件判断。

• 当 num 大于 0 时，表达式 num > && 'positive' 的结果为 'positive'，所以最终 result 的值为 'positive'；

• 当 num 不大于 0 时，表达式 num > 0 && 'positive' 的结果为 false，然后逻辑或（||）操作符会返回结果 'non-positive'。

注意：利用逻辑与（&&）和逻辑或（||）优化条件语句的方法适用于简单的条件判断，在复杂的条件逻辑下，也可能会降低代码的可读性。在编写代码时需要根据具体情况选择合适的方式来处理条件语句，以确保代码的清晰和易于维护。

3. 使用对象字面量（Object Literal）

使用对象字面量（Object Literal）通过将不同条件对应的值存储在对象字面量中，然后通过读取对象属性的方式来获取对应的值，使代码更加清晰和易于维护。

示例：使用对象字面量优化条件语句对比

 1// 原始的 if-else 语句
 2let color = "red";
 3let fruit;
 4
 5if (color === "red") {
 6  fruit = "apple";
 7} else if (color === "yellow") {
 8  fruit = "banana";
 9} else {
10  fruit = "unknown";
11}
12console.log(fruit);
13

使用对象字面量优化后

1let color = "red";
2let fruit =
3  {
4    red: "apple",
5    yellow: "banana",
6  }[color] || "unknown";
7
8console.log(fruit);
9

在上面的示例中，使用对象字面量来优化条件语句。通过将不同条件对应的值存储在对象字面量中，然后通过读取对象属性的方式来获取对应的值，能够简化 if-else 结构。在这个例子中，根据 color 的不同取值，直接获取对应水果名称的逻辑。

使用对象字面量的优化方法可以使代码更加简洁和易读，特别是在多个条件需要判断并返回不同值的情况下，可以替代冗长的 if-else 结构。当然，也需要根据具体情况选择合适的优化方式，以确保代码的清晰和可维护性。

4. 使用对象映射表（Map）

使用对象映射表（Map）适用于需要根据不同条件执行不同操作的情况，将不同条件和对应操作存储在 Map 中，根据条件获取对应的操作执行。

示例：使用对象映射表（Map）优化条件语句对比

 1// 原始的 if-else 语句
 2let condition = "B";
 3
 4if (condition === "A") {
 5  console.log("执行A操作");
 6} else if (condition === "B") {
 7  console.log("执行B操作");
 8} else if (condition === "C") {
 9  console.log("执行C操作");
10}
11

使用对象映射表（Map）优化后

 1let conditionsMap = new Map([
 2  ["A", () => console.log("执行A操作")],
 3  ["B", () => console.log("执行B操作")],
 4  ["C", () => console.log("执行C操作")],
 5]);
 6
 7if (conditionsMap.has(condition)) {
 8  conditionsMap.get(condition)();
 9}
10

通过上述的代码，使用对象映射表（Map）将不同条件和对应操作存储在 Map 中，根据条件获取对应的操作执行。

使用对象映射表（Map）优化条件语句的方法可以简化代码逻辑，提高代码的可读性和可维护性。特别适用于需要根据多个条件执行不同的情况，可以将条件和对应操作一一映射存储，通过 Map 快速获取执行对应操作。

5. 使用 Array.includes

使用 Array.includes 方法适用于需要判断某个值是否包含在一个数组中的情况，大大简化了条件判断的过程。

示例：使用 Array.includes 优化条件语句对比

1// 原始的 if-else 语句
2let fruit = "apple";
3let isFruit = false;
4
5if (fruit === "apple" || fruit === "banana" || fruit === "orange") {
6  isFruit = true;
7}
8console.log(isFruit);
9

使用 Array.includes 优化后

1let fruit = "apple";
2let fruits = ["apple", "banana", "orange"];
3let isFruit = fruits.includes(fruit);
4console.log(isFruit);
5

在上面的示例中，原始的 if-else 结构需要逐个判断 fruit 是否等于 'apple'、'banana' 或 'orange'，而使用 Array.includes 方法则可以直接判断 fruit 是否包含在 fruits 数组中，从而简化了条件判断的过程。

使用 Array.includes 方法的优化方法适合于需要判断某个值是否属于一个集合的情况，避免了重复的多次判断。当需要判断值是否包含在某个数组中时，可以考虑使用 Array.includes 方法来优化条件语句。

注意： Array.includes  属于 ES6+ 中新增的方法，因此在较旧的浏览器版本中可能不被支持，为了确保网页在各种浏览器中的兼容性，如果需要使用 Array.includes 方法，可以考虑使用 Babel 或其他类似的工具来转译代码，将 ES6 的语法转换为能在更多浏览器中运行的 ES5 代码。

6. 使用 Array.every

使用 Array.every 方法适用于需要对数组中的所有元素进行条件判断的情况。

示例：使用 Array.every 优化条件语句对比

 1// 原始的 if-else 语句
 2let numbers = [2, 4, 6, 8];
 3let allEven = true;
 4
 5for (let i = 0; i < numbers.length; i++) {
 6  if (numbers[i] % 2 !== 0) {
 7    allEven = false;
 8    break;
 9  }
10}
11console.log(allEven);
12

使用 Array.every 优化后

1let numbers = [2, 4, 6, 8];
2let allEven = numbers.every((num) => num % 2 === 0);
3console.log(allEven);
4

原始的 if-else 结构通过遍历数组中的所有元素，判断是否全部为偶数，而使用 Array.every 方法则可以直接对数组中的每个元素应用条件判断，并返回是否所有素都满足条件的结果。

使用 Array.every 方法的优化方法适合于需要对数组中所有元素进行条件判断的情况，能够大幅度的简化代码逻辑。当需要判断数组中所有元素是否满足某个条件时，可以考虑使用 Array.every 方法来优化条件语句。

7. 使用 switch...case

使用 switch...case 适用于多个条件需要进行严格相等比较的情况。

示例：使用 switch...case 优化条件语句对比

 1// 原始的 if-else 语句
 2let fruit = "apple";
 3let color = "";
 4
 5if (fruit === "apple") {
 6  color = "red";
 7} else if (fruit === "banana") {
 8  color = "yellow";
 9} else if (fruit === "orange") {
10  color = "orange";
11} else {
12  color = "unknown";
13}
14console.log(color);
15

使用 switch...case 优化后

 1let fruit = "apple";
 2let color = "";
 3
 4switch (fruit) {
 5  case "apple":
 6    color = "red";
 7    break;
 8  case "banana":
 9    color = "yellow";
10    break;
11  case "orange":
12    color = "orange";
13    break;
14  default:
15    color = "unknown";
16}
17console.log(color);
18

在上面的示例中，原始的 if-else 结构包含多个条件判断，而使用 switch...case 结构可以更清晰地将不同情况分支进行处理，适用于多个严格相等比较的情况。

使用 switch...case 语句的优化方法适合于需要根据不同值进行严格相等比较的情况，能够简化逻辑，提高代码的可读性和可维护性。当需要对多个条件进行严格相等比较时，可以考虑使用 switch...case 语句来优化条件语句。