【JS】332- 为什么我更喜欢对象而不是 switch 语句

昨天偷懒了，欢迎点击关注???这样我就多更大的动力日更了…

正文从这里开始~~~

最近（或者不是最近，这完全取决于您什么时候阅读这边文章），我正在跟我的团队伙伴讨论如何去处理这种需要根据不同的值去处理不同的情况的方法，通常对于这种情况下，人们喜欢使用 switch 语句或者使用很多 if 搭配 else if 条件。在本文中我将重点介绍第三种方式 (我更为喜欢的方法)，即使用对象进行快速地查找。

switch 语句

switch 语句允许我们根据传递的表达式的值来执行表达式并执行某些特定的操作，通常当你学习编写代码和算法时，你会发现可以将它专门用于多种值的情况，你开始使用它，它看起来很好，你很快意识到它给了你很大的自由，耶！但是要小心，自由度越大责任感也就越大。

让我们快速了解一下典型的 switch 语句是怎么样的：

 1switch (expression) {
 2    case x: {
 3        /* Your code here */
 4        break;
 5    }
 6    case y: {
 7        /* Your code here */
 8        break;
 9    }
10    default: {
11        /* Your code here */
12    }
13}

很好，现在有一些你可能不知道需要注意的事情：

可选的关键字 break

break 关键字允许我们在满足条件时停止执行块。如果不将 break 关键字添加到 switch 语句，则不会抛出错误。如果我们不小心忘记 break 的话，可能意味着在执行代码的时候你甚至不知道代码已经正在执行中了，这还会在调试问题时增加实现结果的的不一致性、突变、内存泄漏和复杂度等问题。我们来看看这个问题的一种表示形式:

 1switch ('first') {
 2    case 'first': {
 3        console.log('first case');
 4    }
 5    case 'second': {
 6        console.log('second case');
 7    }
 8    case 'third': {
 9        console.log('third case');
10        break;
11    }
12    default: {
13        console.log('infinite');
14    }
15}

如果你在控制台中执行这段代码，你会看到输出是

1firt case
2second case
3third case

switch 语句在第二种和第三种情况下也会执行，即使第一种情况已经是正确的，然后它在第三种情况块中找到关键字 break 并停止执行，控制台中没有警告或错误让你知道它，这会让你认为这是预期的行为。

每种情况下的大括号都不是强制的

在 javascript 中大括号代表着代码块，因为自 ECMAscript 2015 我们可以使用关键字声明块编译变量，如 const 或 let（但对于 switch 来说并不是很好），因为大括号不是强制性的，重复声明会导致错误变量，让我们看看当我们执行下面的代码时会发生什么：

 1switch ('second') {
 2    case 'first':
 3        let position = 'first';
 4        console.log(position);
 5        break;
 6    case 'second':
 7        let position = 'second';
 8        console.log(position);
 9        break;
10    default:
11        console.log('infinite');
12}

我们会得到：

Uncaught SyntaxError: Identifier 'position' has already been declared

这里将会返回一个错误，因为变量 position 已经在第一种情况下声明过了，并且由于它没有大括号，所以在第二种情况下尝试声明它，它已经存在了。

现在想象使用带有不一致 break 关键字和大括号的 switch 语句时会发生什么事：

 1switch ('first') {
 2    case 'first':
 3        let position = 'first';
 4        console.log(position);
 5    case 'second':
 6        console.log(`second has access to ${position}`);
 7        position = 'second';
 8        console.log(position);
 9    default:
10        console.log('infinite');
11}

控制台将输出以下内容：

1first
2second has access to first
3second
4infinite

试想一下，由此而引起的错误和突变是如此之多，其可能性是无穷无尽的…… 不管怎样，switch 语句已经讲够了，我们来这里是为了讨论一种不同的方法，我们来这里是为了讨论对象。

更安全查找的对象

对象查找速度很快，随着它们的大小增长它们也会更快，它们也允许我们将数据表示为对于条件执行非常有用的键值对。

使用字符串

让我们从简单的 switch 示例开始，让我们假设我们需要有条件地保存和返回一个字符串的情景，并使用我们的对象:

 1const getPosition = position => {
 2    const positions = {
 3        first: 'first',
 4        second: 'second',
 5        third: 'third',
 6        default: 'infinite'
 7    };
 8
 9    return positions[position] || positions.default;
10};
11
12const position = getPosition('first'); // Returns 'first'
13const otherValue = getPosition('fourth'); // Returns 'infinite'

这可以做同样类型的工作，如果你想进一步的压缩简化代码，我们可以利用箭头函数：

1const getPosition = position =>
2    ({
3        first: 'first',
4        second: 'second',
5        third: 'third'
6    }[position] || 'infinite');
7
8const positionValue = getPosition('first'); // Returns 'first'
9const otherValue = getPosition('fourth'); // Returns 'infinite'

这与前面的实现完全相同，我们在更少的代码行中实现了更紧凑的解决方案。

现在让我们更实际一点，不是我们写的所有条件都会返回简单的字符串，其中很多会返回布尔值，执行函数等等。

使用布尔值

我喜欢创建返回类型一致的值的函数, 但是, 由于 javascript 是动态类型语言，因此可能存在函数可能返回动态类型的情况，因此我将在此示例中考虑这一点，如果找不到键，我将创建一个返回布尔值，未定义或字符串的函数。

1const isNotOpenSource = language =>
2    ({
3        vscode: false,
4        sublimetext: true,
5        neovim: false,
6        fakeEditor: undefined
7    }[language] || 'unknown');
8
9const sublimeState = isNotOpenSource('sublimetext'); // Returns true

看起来不错，对吧？别急，好像我们有一个问题…… 如果我们调用带有参数的函数，会发生什么'vscode'或 fakeEditor 不是？嗯，让我们来看看：

1. 它会寻找对象中的键。

2. 它会看到 vscode 键的值是 false。

3. 它会试图返回 false，但因为 false || 'unknown'是 unknown，我们最终会返回一个不正确的值。

对于 key 为 fakeEditor 也会有同样的问题

Oh no, 好吧，不要惊慌，让我们来解决这个问题：

 1const isNotOpenSource = editor => {
 2    const editors = {
 3        vscode: false,
 4        sublimetext: true,
 5        neovim: false,
 6        fakeEditor: undefined,
 7        default: 'unknown'
 8    };
 9
10    return editor in editors ? editors[editor] : editors.default;
11};
12
13const codeState = isNotOpenSource('vscode'); // Returns false
14const fakeEditorState = isNotOpenSource('fakeEditor'); // Returns undefined
15const sublimeState = isNotOpenSource('sublimetext'); // Returns true
16const webstormState = isNotOpenSource('webstorm'); // Returns 'unknown'

这就解决了问题，但是…… 我希望你们问自己一件事: 这真的是问题所在吗? 我认为我们应该更关心为什么我们需要一个返回布尔值，未定义值或字符串的函数，这里存在严重的不一致性，无论如何，对于这样一个非常棘手的情况这也只是一个可能的解决方案。

使用函数

我们继续讲函数，通常我们会发现我们需要根据参数来执行一个函数，假设我们需要根据输入的类型来解析一些输入值，如果解析器没有注册，我们只返回值:

 1const getParsedInputValue = type => {
 2    const emailParser = email => `email,  ${email}`;
 3    const passwordParser = password => `password, ${password}`;
 4    const birthdateParser = date => `date , ${date}`;
 5
 6    const parsers = {
 7        email: emailParser,
 8        password: passwordParser,
 9        birthdate: birthdateParser,
10        default: value => value
11    };
12
13    return parsers[type] || parsers.default;
14};
15
16// We select the parser with the type and then passed the dynamic value to parse
17const parsedEmail = getParsedInputValue('email')('myemail@gmail.com'); // Returns email, myemail@gmail.com
18const parsedName = getParsedInputValue('name')('Enmanuel'); // Returns 'Enmanuel'

如果我们有一个类似的函数返回另一个函数但这次没有参数，我们可以改进代码，以便在调用第一个函数时直接返回，如：

 1const getValue = type => {
 2    const email = () => 'myemail@gmail.com';
 3    const password = () => '12345';
 4
 5    const parsers = {
 6        email,
 7        password,
 8        default: () => 'default'
 9    };
10
11    return (parsers[type] || parsers.default)(); // we immediately invoke the function here
12};
13
14const emailValue = getValue('email'); // Returns myemail@gmail.com
15const passwordValue = getValue('name'); // Returns default

通用代码块

Switch 语句允许我们为多个条件定义公共代码块。

 1switch (editor) {
 2    case 'atom':
 3    case 'sublime':
 4    case 'vscode':
 5        return 'It is a code editor';
 6        break;
 7    case 'webstorm':
 8    case 'pycharm':
 9        return 'It is an IDE';
10        break;
11    default:
12        return 'unknown';
13}

我们如何使用对象来处理它？我们可以在下一个方面做到这一点：

 1const getEditorType = type => {
 2    const itsCodeEditor = () => 'It is a code editor';
 3    const itsIDE = () => 'It is an IDE';
 4
 5    const editors = {
 6        atom: itsCodeEditor,
 7        sublime: itsCodeEditor,
 8        vscode: itsCodeEditor,
 9        webstorm: itsIDE,
10        pycharm: itsIDE,
11        default: () => 'unknown'
12    };
13
14    return (editors[type] || editors.default)();
15};
16
17const vscodeType = getEditorType('vscode'); 

现在我们有一种方法：

1. 更有条理

2. 更易拓展

3. 更容易维护

4. 更容易测试

5. 更安全并且副作用和风险更小

注意事项

正如预期的那样，所有的方法都有其缺点，这一个也不例外。

1. 由于我们正在使用对象，所以我们将占用内存中的一些临时空间来存储它们，当定义对象的作用域不再可访问时，这个空间将被垃圾收集器释放。

2. 当没有太多情况需要处理时，对象方法可能比 switch 语句的速度要慢，这可能是因为我们正在创建一个数据结构，然后接收一个键，然而在 switch 中，我们只是检查值并返回值。

结论

本文不打算改变你的编码风格或让你停止使用 switch 语句，它只是试图提高你对 switch 语句的认识，以便它可以正确使用，并开放你的思想探索新的替代方案，在这种情况下，我已经分享了我喜欢使用的方法，但还有更多，例如，你可能想看一个称为模式匹配的 ES6 提案，如果你不喜欢它，你可以继续探索。

好的开发未来，就是这样，我希望你喜欢这篇文章，如果你这样做，你可能会喜欢这篇关于工厂模式的文章。此外，不要忘记分享和点赞，你可以在 twitter 上找到我或通过我的电子邮件 duranenmanuel@gmail.com 联系我，下一个见。

阅读 EnmaScript.com 上发布的原始文章

译者总结

本文介绍了一种使用对象去代替我们之前用 switch 和繁琐的 if else 语句的方法。其实，很多情况下我们可以利用对象与其他组合搭配写出更为高效或可维护的代码。当然，如何去灵活地使用对象去处理一些对应的情况，还是靠我们自己。好的，这篇就总结到这了，不知道对你们有什么启发。相信会给到一些帮助给读者, 我们可不是一个只会 if else 的工程师, 哈哈~

原文自工程师 Enmanuel Durán 博客，传送门；

翻译@广州芦苇科技web前端；

https://juejin.im/post/5c7634cae51d4517674d1e71

如果您觉得本文不错，

请点击文章底部广告，支持一下我啦！

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式 重温系列（9篇全）

4. 正则 / 框架 / 算法等 重温系列（16篇全）

5. Webpack4 入门手册（共 18 章）（上）

6. Webpack4 入门手册（共 18 章）（下）

7. 59篇原创系列汇总

点这，与大家一起分享本文吧~