[译] 为何我更喜欢对象而不是switch语句

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

最近（或者不是最近，这彻底取决于您何时阅读这边文章），我正在跟个人团队伙伴讨论如何去处理这种须要根据不一样的值去处理不一样的状况的方法，一般对于这种状况下，人们喜欢使用switch语句或者使用不少if搭配else if条件。在本文中我将重点介绍第三种方式(我更为喜欢的方法)，即便用对象进行快速地查找。

switch 语句

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

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

switch (expression) {
    case x: {
        /* Your code here */
        break;
    }
    case y: {
        /* Your code here */
        break;
    }
    default: {
        /* Your code here */
    }
}
复制代码

很好，如今有一些你可能不知道须要注意的事情：

可选的关键字break

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

switch ('first') {
    case 'first': {
        console.log('first case');
    }
    case 'second': {
        console.log('second case');
    }
    case 'third': {
        console.log('third case');
        break;
    }
    default: {
        console.log('infinite');
    }
}
复制代码

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

firt case
second case
third case
复制代码

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

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

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

switch ('second') {
    case 'first':
        let position = 'first';
        console.log(position);
        break;
    case 'second':
        let position = 'second';
        console.log(position);
        break;
    default:
        console.log('infinite');
}
复制代码

咱们会获得：

Uncaught SyntaxError: Identifier 'position' has already been declared

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

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

switch ('first') {
    case 'first':
        let position = 'first';
        console.log(position);
    case 'second':
        console.log(`second has access to ${position}`);
        position = 'second';
        console.log(position);
    default:
        console.log('infinite');
}
复制代码

控制台将输出如下内容：

first
second has access to first
second
infinite
复制代码

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

更安全查找的对象

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

使用字符串

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

const getPosition = position => {
    const positions = {
        first: 'first',
        second: 'second',
        third: 'third',
        default: 'infinite'
    };

    return positions[position] || positions.default;
};

const position = getPosition('first'); // Returns 'first'
const otherValue = getPosition('fourth'); // Returns 'infinite'
复制代码

这能够作一样类型的工做，若是你想进一步的压缩简化代码，咱们能够利用箭头函数：

const getPosition = position =>
    ({
        first: 'first',
        second: 'second',
        third: 'third'
    }[position] || 'infinite');

const positionValue = getPosition('first'); // Returns 'first'
const otherValue = getPosition('fourth'); // Returns 'infinite'
复制代码

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

如今让咱们更实际一点，不是咱们写的全部条件都会返回简单的字符串，其中不少会返回布尔值，执行函数等等。

使用布尔值

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

const isNotOpenSource = language =>
    ({
        vscode: false,
        sublimetext: true,
        neovim: false,
        fakeEditor: undefined
    }[language] || 'unknown');

const sublimeState = isNotOpenSource('sublimetext'); // Returns true
复制代码

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

1. 它会寻找对象中的键。
2. 它会看到vscode键的值是false。
3. 它会试图返回false，但由于false || 'unknown'是unknown，咱们最终会返回一个不正确的值。

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

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

const isNotOpenSource = editor => {
    const editors = {
        vscode: false,
        sublimetext: true,
        neovim: false,
        fakeEditor: undefined,
        default: 'unknown'
    };

    return editor in editors ? editors[editor] : editors.default;
};

const codeState = isNotOpenSource('vscode'); // Returns false
const fakeEditorState = isNotOpenSource('fakeEditor'); // Returns undefined
const sublimeState = isNotOpenSource('sublimetext'); // Returns true
const webstormState = isNotOpenSource('webstorm'); // Returns 'unknown'
复制代码

这就解决了问题，可是......我但愿大家问本身一件事:这真的是问题所在吗?我认为咱们应该更关心为何咱们须要一个返回布尔值，未定义值或字符串的函数，这里存在严重的不一致性，不管如何，对于这样一个很是棘手的状况这也只是一个可能的解决方案。

使用函数

咱们继续讲函数，一般咱们会发现咱们须要根据参数来执行一个函数，假设咱们须要根据输入的类型来解析一些输入值，若是解析器没有注册，咱们只返回值:

const getParsedInputValue = type => {
    const emailParser = email => `email,  ${email}`;
    const passwordParser = password => `password, ${password}`;
    const birthdateParser = date => `date , ${date}`;

    const parsers = {
        email: emailParser,
        password: passwordParser,
        birthdate: birthdateParser,
        default: value => value
    };

    return parsers[type] || parsers.default;
};

// We select the parser with the type and then passed the dynamic value to parse
const parsedEmail = getParsedInputValue('email')('myemail@gmail.com'); // Returns email, myemail@gmail.com
const parsedName = getParsedInputValue('name')('Enmanuel'); // Returns 'Enmanuel'
复制代码

若是咱们有一个相似的函数返回另外一个函数但此次没有参数，咱们能够改进代码，以便在调用第一个函数时直接返回，如：

const getValue = type => {
    const email = () => 'myemail@gmail.com';
    const password = () => '12345';

    const parsers = {
        email,
        password,
        default: () => 'default'
    };

    return (parsers[type] || parsers.default)(); // we immediately invoke the function here
};

const emailValue = getValue('email'); // Returns myemail@gmail.com
const passwordValue = getValue('name'); // Returns default
复制代码

通用代码块

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

switch (editor) {
    case 'atom':
    case 'sublime':
    case 'vscode':
        return 'It is a code editor';
        break;
    case 'webstorm':
    case 'pycharm':
        return 'It is an IDE';
        break;
    default:
        return 'unknown';
}
复制代码

咱们如何使用对象来处理它？咱们能够在下一个方面作到这一点：

const getEditorType = type => {
    const itsCodeEditor = () => 'It is a code editor';
    const itsIDE = () => 'It is an IDE';

    const editors = {
        atom: itsCodeEditor,
        sublime: itsCodeEditor,
        vscode: itsCodeEditor,
        webstorm: itsIDE,
        pycharm: itsIDE,
        default: () => 'unknown'
    };

    return (editors[type] || editors.default)();
};

const 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的工程师,哈哈~

做者简介：张敏，芦苇科技web前端开发工程师，低调冷幽默，深藏不露。表明做品：微鱼娃娃机系统、TopShow活动报名小程序。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制做、企业微信制做、H5建设，专一于前端框架、交互设计、图像绘制、数据分析等研究。

欢迎和咱们一块儿并肩做战： web@talkmoney.cn 访问 www.talkmoney.cn 了解更多

最后，缺对象吗？赶忙关注我！！给你安排安排！