专栏首页前端自习课【JS】332- 为什么我更喜欢对象而不是 switch 语句

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

正文从这里开始~~~

最近(或者不是最近,这完全取决于您什么时候阅读这边文章),我正在跟我的团队伙伴讨论如何去处理这种需要根据不同的值去处理不同的情况的方法,通常对于这种情况下,人们喜欢使用 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 的工程师, 哈哈~

本文分享自微信公众号 - 前端自习课(FE-study)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Scala基础——Map(映射)

    Scala映射(Map)是一组键/值对的对象。键在映射中是唯一的,但值不一定是唯一的。映射也称为哈希表。映射有两种,不可变的和可变的。默认情况下,Scala使用...

    羊羽shine
  • 数组函数 array_column

    array_column 函数简介传入一个参数,返回二维数组中指定列传入一个参数,指定列不一定存在的情况传入两个参数,且两个参数对应的列都存在且不重复如果第二个...

    写PHP的老王
  • 【Flutter 专题】 04 图解第一个程序遇到的安装依赖问题

    和尚刚开始学习 Flutter 会遇到各种意想不到的问题,今天整理一下第一次新建项目运行时报的错的处理方式。 Finished with error...

    阿策
  • 360大牛带你横扫PHP职场--常量数据结构知识点

    3) heardoc 和 newdoc。heardoc支持变量解析,特殊符号转义,类似双引号。newdoc类似单引号。heardoc定义方式

    写PHP的老王
  • 使用casbin完成验证授权.md

    上一篇讲了搭建一个身份认证系统,可以看到借助dex搭建一个安全可靠的身份认证系统并不是太难。本篇再讲一下用casbin完成验证授权。

    jeremyxu
  • 自己用的变量,请自己清理干净

    码代码真的不是搬砖那么简单。一个变量虽然都能实现功能,但是不同的选择会有不同的影响。自己用的变量,请自己清理干净!php中的内存扩充是以两倍的方式扩充,同时在变...

    写PHP的老王
  • 细读Yii2的Response

    一个完整的网络请求,最后都需要一个符合协议的返回。Yii2在处理web请求之后,统一通过web/Response处理返回。错误也会经过错误处理返回一个Respo...

    写PHP的老王
  • Jvm数据区域与垃圾收集<深入了解jvm读书笔记>

    周志明老师所著的《深入了解JAVA虚拟机》(后文简称”书中”)可谓是java工程师进阶的必读书籍了.最近读了书中的第一二部分,也就是前五章,有很多收获.因此想要...

    呼延十
  • 看到全是十六进制的PHP代码文件?

    前几天在网上看到一份代码,打开来看,里面都是类似下面的十六进制字符串。一脸懵逼,啥情况,我万能的sublime text 打开居然是十六进制文件,而且文件居然还...

    写PHP的老王
  • Android AIDL 跨进程通信

    安卓 IPC 跨进程通信有很多种方式,我们可以用 Bundle传递数据,通过 Intent 意图去打电话,在 Uri 里面传递电话号码

    萬物並作吾以觀復

扫码关注云+社区

领取腾讯云代金券