为什么我更喜欢对象而不是 switch 语句

最近（或者更早，取决于你何时阅读本文），我和一些队友讨论了如何处理需要多次求值的条件。通常，在这种情况下，人们喜欢使用 switch 语句或if包含多个else if条件的 huge 语句。在本文中，我将重点介绍第三种方法（我更喜欢的方法），我们将使用对象进行快速查找。

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以来，我们可以使用诸如constor 之类的关键字声明块范围的变量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已经在第一个案例中声明过，并且由于它没有花括号所以它被
提升，然后当第二个案例尝试声明它时，它已经存在并且BOOM。

现在想象一下当使用带有不一致的关键字和花括号的 switch 语句时可能发生的事情break：

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嗯，让我们看看：

它将在对象中寻找键。
它会看到 vscode 键的值为false。
它会尝试返回，false但最终false || 'unknown'我们unknown会返回一个不正确的值。

对于密钥，我们也会遇到同样的问题fakeEditor。

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

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'

这解决了问题，但是……我想让你问自己一个问题：这真的是问题所在吗？我觉得我们应该更关心为什么我们需要一个返回 a 的函数boolean，undefined或者说string，首先，这本身就存在严重的矛盾。总之，这只是一个非常棘手案例的可能解决方案。

使用函数

让我们继续讨论函数，我们经常发现自己需要根据参数执行一个函数，假设我们需要根据输入的类型解析一些输入值，如果解析器未注册，我们只需返回该值：

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'); // Returns 'It is a code editor'

现在我们有了一种方法：

更加结构化。
扩展性更好。
更容易维护。
更容易测试。
更安全，副作用和风险更少。

需要考虑的事项

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

由于我们正在使用对象，因此我们将在内存中占用一些临时空间来存储它们，当定义对象的范围不再可访问时，垃圾收集器将释放这些空间。
当没有太多情况需要评估时，对象方法可能比 switch 语句慢，这可能是因为我们正在创建一个数据结构，然后访问一个键，而在 switch 中我们只是检查值并返回。

结论

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

好的，未来的开发者们，就是这样了，希望你们喜欢这篇文章。如果喜欢，你们可能也会喜欢这篇关于工厂模式的文章。另外，别忘了分享和订阅，你们可以在推特上找到我，或者通过我的邮箱duranenmanuel@gmail.com联系我，我们下期再见。

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

鏂囩珷鏉ユ簮锛�https://dev.to/duranenmanuel/why-i-prefer-objects-over-switch-statements-4emo