公司做了个抢红包的限制,然后ajax请求的返回字段,要进行多层逻辑的判断,想想是真恶心,虽然都是简单逻辑,而且看别人以前写的代码,发现,哎,注释能不能写上吶,像我写代码都是细致到,哪怕初学者也能看懂这是要实现什么,还有尽量避免深层次的if嵌套,不然后面产品要加新需求,条件限制了,来个五六个if嵌套,,想想都蛋疼了,故而就查询了一下如何优化,然后把之前的代码给重新整理了下,哎,强迫症又犯了,明明不是自己挖的坑,还是想填了!


那么问题来了,在js开发中,如何减少if else语句的使用

代码中嵌套的if/else结构往往导致代码不美观,也不易于理解。面向过程的开发中代码有大量的IF ELSE,在java中可以用一些设计模式替换掉这些逻辑,那么在js中是否也有类似的方法用来尽可能减少代码中的if/else嵌套呢?

有人认为:if else多就多呗,只要可读性强,维护起来方便。jQuery.fn.init里就是一堆if else判断,难道要质疑jQuery作者的水平了?并不是说if else多就不好,关键是看用的地方,jQuery.fn.init里除了if else判断简洁点,难道要改成switch?就算用工厂模式,还不是得做大量的if判断。

代码整洁强迫症患者必须要来个抛砖引玉:

1.


  1. if(a为真){
  2. a=a
  3. }else{
  4. a=b
  5. }

可写成:a = a || b

2.


  1. if(a==b){
  2. a=c
  3. }else{
  4. a=d
  5. }

可写成:a = (a==b) ? c : d

3.

后台接口通常会返回这种数据:

fruit: 0 // 0=苹果,1=梨子,2=桔子,3=柠檬,4=芒果...

这时写if...else是最痛苦的。从冲哥那偷来个方法:


  1. var _f = ['苹果','梨子','桔子','柠檬','芒果'];
  2. shuiguo = _f[fruit];

建议:

第一步:优化if逻辑

人们考虑的东西到时候,都会把最可能发生的情况先做好准备。优化if逻辑的时候也可以这样想:把最可能出现的条件放在前面,把最不可能出现的条件放在后面,这样程序执行时总会按照带啊名的先后顺序逐一检测所有的条件,知道发现匹配的条件才会停止继续检测。

if 的优化目标:最小化找到分支之前所判断条件体的数量。if优化的方法:将最常见的条件放在首位。


  1. if (i < 5) {
  2. // 执行一些代码
  3. } else if (i > 5 && i < 10) {
  4. // 执行一些代码
  5. } else {
  6. // 执行一些代码
  7. }

例如上面这个例子,只有在 i 值经常出现小于5的时候是最优化的。如果i值经常大于或者等于10的话,那么在进入正确的分支之前,就必须两次运算条件体,导致表达式的平均运算时间增加。 if 中的条件体应该总是按照从最大概率到最小概率排列,以保证理论速度最快。

第二步:尽量少使用else

如果在函数中,可以使用 if + return ,先判断错误条件,然后立马结束函数,防止进入 else 分支。

举个简单的例子,后端返回数据,前端根据状态进行不同操作


  1. $.ajax().done(function (res) {
  2. if (res.state === 'SUCCESS') {
  3. //TODO
  4. } else if (res.state === 'FAIL') {
  5. //TODO
  6. } else {
  7. //TODO
  8. }
  9. });

这里用if else不挺好的么,有啥问题么?不过我个人倾向于switch。

解决方法:

1. switch/case

switch和if else在性能上是没有什么区别的,主要还是根据需求进行分析和选择。

  • 如果条件较小的话选用if else比较合适。

  • 相反,条件数量较大的话,就建议选用switch。

一般来说,if else适用于两个离散的值或者不同的值域。如果判断多个离散值,使用switch更加合适。

在大多数的情况下switch比if else运行的更加快。

在大多数情况下,switch的性能不会比if else低。switch的确在实质上跟if else if 完全一样的效果,不过在很多情况下,使用switch要比if else方便不少

比如经典的值等分支,匹配一些状态常量的时候,比if else结构方便许多,不用反复写xx == yy


  1. $.ajax().done(function (res) {
  2. switch (res.state) {
  3. case 'SUCCESS':
  4. //TODO
  5. break;
  6. case 'FAIL':
  7. //TODO
  8. break;
  9. default :
  10. //TODO
  11. }
  12. });

注意:千万不要忘记在每一个case语句后面放一个break语句。也可以放一个return或者throw。case语句匹配expression是用===而不是==。

2.hash 表


  1. if (key == "Apple") {
  2. val = "Jobs";
  3. } else if (key == "microsoft"){
  4. val = "Gates";
  5. } else if (key == "Google"){
  6. val = "Larry";
  7. }

这个也可以用 switch case 解决,不过推荐的方法是 hash 表:


  1. var ceos = {"Apple":"Jobs", "microsoft":"Gates", "Google":"Larry"};
  2. val = ceos[key];

3.重构,用 OO 里面的继承或者组合


  1. 1.如果是狗,则汪汪
  2. 2.如果是猫,则喵喵
  3. 3.如果是羊,则咩咩
  4. 4.如果是鸭,则嘎嘎

可以重构一下,改成 OO。


  1. *定义类: 动物(或者接口)
  2. *定义方法:叫
  3. *定义子类:狗、猫、羊、鸭
  4. *重写方法 ---- 叫

也就是说将同的判断按照功能,写成函数,这样也便于阅读

比如我有一个方法根据类型获取名称,用if else会这样


  1. function getName(type) {
  2. if (type === 'monkey') {
  3. return 'monkey name';
  4. } else if (type === 'cat') {
  5. return 'cat name';
  6. } else {
  7. return 'dog name';
  8. }
  9. }

如果写成函数,改成下面的会更好


  1. function getName(type) {
  2. var data = {
  3. monkey: 'monkey name',
  4. cat: 'cat name',
  5. dog: 'dog name'
  6. }
  7. return data[type] ? data[type] : data['dog'];
  8. }

硬要把设计模式添加到JS里不是不可以,但是要看情况。生搬硬套过来的东西然并卵啊。写代码记住三个字即可,短简易。代码短,读起来简单,维护容易,如果在性能和代码长度上二选一,我肯定选代码短,性能不行,加台服务器就是了。而冗长的代码并不是加个程序员就能搞定的。

保持着这个心态写代码,写出的东西离设计模式也不会差太多了。

避免if语句的深层次嵌套的更多相关文章

  1. html5 webDatabase 存储中sql语句执行可嵌套使用

    html5 webDatabase 存储中sql语句执行可嵌套使用,代码如下: *); data.transaction(function(tx){ tx.executeSql("creat ...

  2. T-SQL查询语句(二):嵌套查询

    一个select...From...Where查询语句块可以嵌套在另一个select...From...Where查询块的Where子句中,称为嵌套查询.外层查询称为父查询,主查询.内层查询称为子查询 ...

  3. 分支语句 if的嵌套 循环语句

    0930 今天学习内容做以下总结: 语句的分类:顺序语句,分支语句(选择,条件),循环语句 分支语句 格式1:if(表达式(要么是true 要么是false)){} 格式2:if(){}slse{}  ...

  4. sql语句中单引号嵌套问题

    在sql语句中,我们难免会用到单引号嵌套的时候,但是直接嵌套肯定是不行的,java中用反斜杠做转义符也是不行的,在sql中是用单引号来做转义符的. 比如下面例子是存储过程里查询时的语句示例 exec ...

  5. 【2017-2-21】C#分支语句,分支嵌套,变量的作用域

    分支语句 句式:if else(必须是if开头,可以是else if或者else结束,也可以直接结束) if(bool型比较表达式) { 如果上面的条件成立,则执行这里面的代码 } else if(b ...

  6. c#循环语句 for 循环嵌套的练习。还有跳转语句,异常语句,迭代穷举介绍

    先说一下循环嵌套:循环嵌套就是再一个循环里面再放一个循环,也就是说如果没一个循环都循环10次,那么第一个循环是1的时候,嵌套的循环会循环十次.也就是10*10的效果. for 循环语句 主要还是逻辑思 ...

  7. 判断语句、if嵌套

    判断语句 上一篇我们使用了一下if语句当然我们不止这些 我们上一个只是判断出如果满足条件会执行,那么我们想一想如果不能满足该会怎么样! 当然 还有一种语句叫做if else 他的语法格式是: if ( ...

  8. c#语句 for循环嵌套

    1.打印三角形. 1) 方法一.for嵌套 方法二.只用一个for 2)倒三角 3)后三角 2.求100以内质数的和. 3.一张纸厚度为0.01米,至少对折多少次才能达到珠峰的高度?(用for死循环) ...

  9. C# 循环语句 for循环(嵌套 while 穷举 迭代)

    for循环的嵌套类似于if else 事例: 打印矩阵,外循环对应行,内循环对应列 for (int k = 1; k <= 5; k++) { for (int i = 1; i <= ...

随机推荐

  1. 洛谷——P1012 拼数

    https://www.luogu.org/problem/show?pid=1012#sub 题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整 ...

  2. Linux设备空间存储满问题

    问题 linux创建文件夹文件.补全,启动服务均报错,具体报错信息如下 [root@localhost log]# mkdir /log/mysql -p mkdir: 无法创建目录"/lo ...

  3. 看<Asp.net夜话>随笔(2013-10-13)

    1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...

  4. 【河南省多校脸萌第六场 A】巴什博弈?

    [链接]http://acm.nyist.me/JudgeOnline/problem.php?cid=1013&pid=5 [题意] 在这里写题意 [题解] 0..a-1 YES a..a+ ...

  5. GCJ 2009 Round 2 Problem A. Crazy Rows

    https://code.google.com/codejam/contest/204113/dashboard 题目大意: 给你一个矩阵,让你转化为下三角矩阵,每次只能交换相邻的行,求最小的交换次数 ...

  6. 第一个hello word 驱动载入失败--------

    今天尝试自己载入第一个驱动模块,依据惯例hello word 然后失败了,如今说明我的操作过程.请个位看看. 首先我的内核版本号: 模块代码与MAKEFILE #include<linux/in ...

  7. 3、C++快速入门

    参考书籍: C++程序设计教程_第二版_钱能    //篇幅较少,适合快速学习 C++ Primer Plus  第六版  中文版   //篇幅较大,讲的非常详细 C++一般必须包含的头文件是#inc ...

  8. 【例题 6-1 UVA - 210】Concurrency Simulator

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 队列模拟题. 注意初始化.. 然后题目中是让读入一个数据组数然后再输入数据的. 但样例..但样例没有!? [代码] #include ...

  9. 35、在JZ2440上使用3G上网卡

    1. 简单使用:1.1 选型:中国联通:E网时空 EW65 (64元), ZTE中兴 MF637U (160多)中国电信:Benton/本腾 EQ10B (35元)中国移动:华为 ET128 (99元 ...

  10. [TypeStyle] Add responsive styles using TypeStyle Media Queries

    Media queries are very important for designs that you want to work on both mobile and desktop browse ...