JavaScript如何优化逻辑判断代码详解


Posted in Javascript onJune 08, 2021

前言

我们日常使用到的逻辑判断语句有 if...else...、switch...case...、do...while...等。

在简单场景下,我们可能对这些语法的性能没有什么感觉,但当遇到复杂的业务场景时,如果处理不善,就会出现大量的逻辑嵌套,可读性差并且难以扩展。

千里之行始于足下,编写高可维护性和高质量的代码,我们就需要从细节处入手,我们今天主要讨论 JavaScript 中如何优化逻辑判断代码。

嵌套层级优化

function supply(fruit, quantity) {
    const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
    // 条件 1: 水果存在
    if (fruit) {
        // 条件 2: 属于红色水果
        if (redFruits.includes(fruit)) {
            console.log('红色水果');
            // 条件 3: 水果数量大于 10 个
            if (quantity > 10) {
                console.log('数量大于 10 个');
            }
        }
    } else {
        throw new Error('没有水果啦!');
    }
}

通过上面这个例子,我们可以看到:判断流程中规中矩,符合现实世界的映射。但是,因代码层层嵌套,导致阅读和维护都存在困难。

如果传入了 fruit 参数,则每次执行都至少需要经过两步 if 判断,在性能上也存在问题。

我们来对上面的代码进行一下优化处理:

function supply(fruit, quantity) {
    const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
    if (!fruit) throw new Error('没有水果啦');     // 条件 1: 当 fruit 无效时,提前处理错误
    if (!redFruits.includes(fruit)) return; // 条件 2: 当不是红色水果时,提前 return

    console.log('红色水果');

    // 条件 3: 水果数量大于 10 个
    if (quantity > 10) {
        console.log('数量大于 10 个');
    }
}

这里主要对嵌套层级做了优化,提前终止掉了不符合的条件,将三层嵌套减少到了一层,简化了代码结果结构,增强了可阅读性。

多条件分支的优化

相信我们很多人对下面这种代码不陌生吧?(想想刚开始写代码那会啊)

function pick(color) {
    // 根据颜色选择水果
    if (color === 'red') {
        return ['apple', 'strawberry'];
    } else if (color === 'yellow') {
        return ['banana', 'pineapple'];
    } else if (color === 'purple') {
        return ['grape', 'plum'];
    } else {
        return [];
    }
}

我们需要知道一点原则:if else 更适合于条件区间判断,而 switch case 更适合于具体枚举值的分支判断。

我们使用 switch...case...进行一下改写:

function pick(color) {
    // 根据颜色选择水果
    switch (color) {
        case 'red':
            return ['apple', 'strawberry'];
        case 'yellow':
            return ['banana', 'pineapple'];
        case 'purple':
            return ['grape', 'plum'];
        default:
            return [];
    }
}

switch...case... 优化之后的代码看上去格式整齐,思路很清晰,但还是很冗长。继续优化:

借助 Object 的 {key: value} 结构,我们可以在 Object 中枚举所有的情况,然后将 key 作为索引,直接通过 Object.key 或者 Object[key] 来获取内容:

const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum'],
}
function pick(color) {
    return fruitColor[color] || [];
}

使用 Map 数据结构,真正的(key, value) 键值对结构:

const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);

function pick(color) {
    return fruitColor.get(color) || [];
}

优化之后,代码更简洁、更容易扩展。

为了更好的可读性,还可以通过更加语义化的方式定义对象,然后使用 Array.filter 达到同样的效果:

const fruits = [
    {name: 'apple', color: 'red'},
    {name: 'strawberry', color: 'red'},
    {name: 'banana', color: 'yellow'},
    {name: 'pineapple', color: 'yellow'},
    {name: 'grape', color: 'purple'},
    {name: 'plum', color: 'purple'}
];

function pick(color) {
    return fruits.filter(f => f.color == color);
}

总结

上面使用的例子和手段都比较初级,但是其中的思想却值得我们细品,希望大家能够有所收获!

到此这篇关于JavaScript如何优化逻辑判断代码的文章就介绍到这了,更多相关JavaScript优化逻辑判断代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
domReady的实现案例
Nov 23 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
js实现简单页面全屏
Sep 17 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
浅谈react useEffect闭包的坑
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
浅谈JS的原型和原型链
You might like
php debug 安装技巧
2011/04/30 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python语言描述随机梯度下降法
2018/01/04 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Flask处理Web表单的实现方法
2021/01/31 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
保护环境倡议书300字
2014/05/19 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
个人求职意向书
2015/05/11 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书