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

前言

我们日常使用到的逻辑判断语句有 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优化逻辑判断代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-06-07

js针对ip地址、子网掩码、网关的逻辑性判断

因为要做静态地址配置的js校验,找了好多资料发现网上都是关于ip,mask的有效性检查,没有ip,submask,gateway的逻辑性判断,自己写下代码供需要的人参考. 普及下网关地址知识: 第一点:进行与运算1与1得1,1与0为0,0与0为0.首先把ip和子网掩码展开 10.70.64.223        00001010 .01000110.01000000.11011111 255.255.255.0   111111111.11111111.11111111.00000000 网段就

泛谈JS逻辑判断选择器 || &&

前言 || 与 &&在JS里与其它语言不一样,这是选择器运算符,而非逻辑运算符. 对于||来说,若判断为true,则返回第一个值,为false返回第二个值. &&相反,若判断为 true,则返回第二个,为 false为返回第一个值. 绝对不是像其它语言那样返回true或false,而是会返回第一个值或第二个值. 简单的测试代码 先是true与false的测试,后将false改为数值0. 除了|| 与&&之外易让人疑惑外,JS里的假值表也算是个大疑点. let

JavaScript中的逻辑判断符&&、||与!介绍

与C.Java等语言一样,JavaScript中可以用&&.||.!三个逻辑判断符来对boolean值进行逻辑判断.与C.Java不同的是,JavaScript中逻辑与(&&)和逻辑或(||)操作符可以应用在任何值上,而操作结束后返回的也不一定是boolean值. 逻辑与&&的处理规则 JavaScript中&&的处理规则是这样的: 1.判断第一个值是否为Falsy.如果为Falsy,则直接返回第一个值(不一定为boolean类型). 2.如

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 switch 会越来越臃肿.本文将带你尝试写出更优雅的判断逻辑. 比如说下面这样一段代码: const onButtonClick = (status) => { if (status == 1) { sendLog('processing') jumpTo('IndexPage') } else

用js限制网页只在微信浏览器中打开(或者只能手机端访问)

用js限制网页只在微信浏览器中打开 js $(function(){ //判断页面是否是在微信浏览器打开 //对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器 var useragent = navigator.userAgent; if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') { window.location.href = "wxError.html";//若不是微信浏览器,跳转到

PHP 开发者该知道的 5 个 Composer 小技巧

Composer 是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方便. 1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单: composer update foo/bar 此外,这个技巧还可以用来解决"警告信息问题".你一定见过这样的警告信息: Warning: The lock file is not up to date wi

JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1 // 32 'ds' * 1 // NaN null * 1 // 0 undefined * 1 // NaN 1 * { valueOf: ()=>'3' } // 3 常用: 也可以使用+来转化字符串为数字 + '123' // 1

前端开发必知的15个jQuery小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

客户端js性能优化小技巧整理

下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

js 对象使用的小技巧实例分析

本文实例讲述了js 对象使用的小技巧.分享给大家供大家参考,具体如下: js中中,Object,Array ,Function 等都属于引用类型,他们的变量名都是指向对象的指针. 这样就有一个好处,当处理一个复杂json树的时候,想要单独改变其中某一个子对象属性时,不需要根据对象id遍历查找到这个对象了,而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量,这个变量就指向这个对象,这样就可以随意改变对象属性了.改变这个变量对应的对象,整个json树中的这个对象也被相应的改变. 下面

JS实现的进制转换,浮点数相加,数字判断操作示例

本文实例讲述了JS实现的进制转换,浮点数相加,数字判断操作.分享给大家供大家参考,具体如下: <script> document.write("整数转换函数:parseInt(数据,底数)<br>"); document.write("10101=>" + parseInt("10101",2)+"<br>"); document.write("77=>" +

利用Node.js获取项目根目录的小技巧

假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (