在编写前端代码时，我们经常需要根据不同的条件执行不同的操作。在 JavaScript 中实现这个功能最常见的方法是使用 switch-case 语句。然而，如果使用不当，这种结构可能会导致代码冗长、难以维护和性能问题。但是，从 ES11 开始，我们可以使用新的语法糖“switch 表达式”来避免这些问题，提高我们的代码质量和开发效率。
switch-case 的缺陷
首先，我们来看看 switch-case 语句有哪些缺陷。最明显的是，如果一个条件下有很多分支，代码就会变得很长而且难以阅读和理解。例如，考虑以下代码：
-- -------------------- ---- -------
-------- --------------------------- -
------ ------- -
---- ------
------ -----
---- --------
------ -----
---- -------
------ -----
---- ---------
------ -----
---- ---------
------ -----
--------
------ -------
-
-虽然这个例子只包含了几个分支，但是如果有更多的条件，代码会变得更加冗长和混乱。
此外，switch-case 语句还可能会导致性能问题。当我们使用 switch-case 时，JavaScript 引擎会逐个测试每个分支的条件，直到找到匹配的分支。这意味着在比较多的条件下，性能可能会受到影响。
ES11 中的 switch 表达式
为了解决这些问题，ECMAScript 2020 引入了 switch 表达式。这种新的语法糖为 switch-case 提供了更高效和更可读的替代方案。下面我们来看一下如何使用它。
基本用法
首先，让我们看看 switch 表达式的基本语法。以下是一个简单的示例：
-- -------------------- ---- -------
----- ------------- - ------- -- -
----- ------ -
----- --- ----- - ---- -
----- --- ------- - ---- -
----- --- ------ - ---- -
-------
------ -------
--这段代码与前面的 switch-case 示例实现的功能是一样的，但是更加简洁和易于理解。与 switch-case 不同，我们使用了三元运算符来代替每个 case 分支，这使得代码更加紧凑和易于扩展。
由于 switch 表达式是一种表达式，而不是一条语句，因此我们可以在常量、变量、函数参数等任何位置使用它。
区间匹配
除了基本用法之外，switch 表达式还支持区间匹配，这意味着我们可以测试一个值是否落在某个范围内。它的语法如下：
-- -------------------- ---- -------
------ ------ -
---- - - - -- - - ---
-------------- -- ------- - --- ----
------
---- - - - -- - - ---
-------------- -- ------- -- --- -----
------
--------
-------------- -- ------- --- --------
------
-在这个示例中，我们将 switch (true) 用作表达式，然后根据测试条件来执行不同的操作。如果 x 落在第一个条件中，我们将打印一个消息表示 x 在区间 (6, 9) 中。同样，如果它落在第二个条件中，我们将打印一个消息表示 x 在区间 (-4, -1) 中。最后，如果它超出了这些范围，我们将打印一个默认消息。
可选分号
在 switch 表达式中，我们不必在每个 case 分支结束时使用分号。在 switch-case 语句中，这是强制要求的，而在 switch 表达式中，它是可选的。这意味着我们可以写出更简洁的代码。以下是一个示例：
const colorToString = (color) => color === 'red' ? '红色' : color === 'green' ? '绿色' : color === 'blue' ? '蓝色' : '未知颜色';
在这个示例中，我们省略了每个分支的分号，这使得代码看起来更加简洁和易于理解。
总结
switch-case 语句是一种常见的语言结构，可以帮助我们根据不同的条件执行不同的操作。然而，由于它的缺陷，我们可能会遇到一些问题，如代码冗长、难以维护和性能问题。ES11 中新增的 switch 表达式为这些问题提供了一种高效、灵活和易于理解的解决方案。当您编写自己的代码时，请考虑使用它来提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646af398968c7c53b0a677e4