不管是平时在学习js中还是在项目书中写js代码,都避免不了一个问题就是有时候要做大量的分支判断,很多人的第一反应就是使用if else。无可厚非,if else早平时做分支判断的时候是非常好用的,但是代码中嵌套的if/else结构往往导致代码不美观,也不易于理解而且性能低下。所以有时候在我们做项目的时候不可避免的一点的就是要做一些代码的性能以及逻辑的优化。

1简单的逻辑判断常用的优化方法

1.1使用‖

var a = 1;
if(a){
  a = 1;
}else{
  a = 0;
};
//可写成
a = a || 0;

1.2使用三元表达式

var a = 1;
var b = 2;
var c = 3;
var d = 4;
if(a == b){
  a = c;
}else{
  a = d;
}
//可写成
a = (a == b) ? c : d;

1.3按位异或运算符^

var a = 1;
var b = 2;
var c = 1;
if(a == c){
  c = b;
}else if(b == c){
  c = a;
};
//可写成
c = a ^ b ^ c;


2复杂的逻辑判断常用的优化方法

2.1优化if逻辑

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

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

var a = 1;
if(a < 10){
  //代码
}else if(a > 10 && a < 100){
   //代码
}else{
   //代码
}

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

2.2switch/case

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

条件较小的话选用if else比较合适。 
条件数量较大的话,就建议选用switch。 
在大多数的情况下switch比if else运行的更加快。

var title = document.querySelector('h1'); //h1节点对象
var txt = title.innerText; //h1节点文本内容
var dayText = ''; //星期几 对应的文本
var date = new Date();  //日期对象
var day = date.getDay(); //获得 星期几 0 - 6

switch (day) {
   case 0:
       dayText = '日';
       break;
   case 1:
       dayText = '一';
       break;
   case 2:
       dayText = '二';
       break;
   case 3:
       dayText = '三';
       break;
   case 4:
       dayText = '四';
       break;
   case 5:
       dayText = '五';
       break;
   case 6:
       dayText = '六';
       break;
   default:
       break;
}
title.innerText = txt.substr(0,5)+ dayText;

上述的逻辑情况在具体的判断选择上,不管是代码的优雅程度还是性能上明显switch是比要if else要优。

2.3数组映射

在数据查找速度方面,如果能够直接映射到的查找方式绝对比if else判断包括switch的性能好的太多。在js中,熟练的应用数组(包括后面提到的JSON),不管是在数据的存储方面还是在业务逻辑的优化方面绝对是所有做前端开发者中必须套掌握的

//用空间换取时间
var dayArr = ['天','一','二','三','四','五','六'];
//用day做下标 指引元素
dayText = dayArr[day];
title.innerText = txt.substr(0,5)+ dayText;

上述代码就是通过映射的方式来查找数据,直接省去了诸多的判断过程。

2.4使用JSON优化

在前后台传输数据的过程中,现在用的越来越多的传输的数据格式为JSON,第一是因为JSON是基于文本的数据格式,相对于基于二进制的数据,所以JSON在传递的时候是传递符合JSON这种格式的字符串;第二就是JSON比较轻量,即相同数据,以JSON的格式占据的带宽更小,这在有大量数据请求和传递的情况下是有明显优势的。

//用空间换取时间
var data = {
   "0" : "日",
   "1" : "一",
   "2" : "二",
   "3" : "三",
   "4" : "四",
   "5" : "五",
   "6" : "六",
};
//用key做下标 指引元素
dayText = data[key];
title.innerText = txt.substr(0,5)+ dayText;

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

如果是乔丹,就是23
如果是科比,就是24
如果是韦德,就是3
如果是麦迪,就是1
如果都不是,就是0

来重构一下,改成OO

*定义类: 球员(或者接口)
*定义方法:就是
*定义子类:乔丹、科比、韦德、麦迪、无
*重写方法 ---- 就是

定义一个函数,如果说是用if else:

function getNumber(name) {
  if (name === "乔丹") {
       console.log(23);
   } else if (name === "科比") {
       console.log(24);
   } else if (name === "韦德"){
       console.log(3);
   }else if (name === "麦迪"){
       console.log(1);
   }else{
        console.log(0);
   }
}

那如果用下面的方法会更好:

function getNumber(name){
   var player = {
       "乔丹" : "23",
       "科比" : "24",
       "韦德" : "3",
       "麦迪" : "1",
       "无"  : "0"
   };
   console.log(player[name] ? player[name] : player["无"] );
}

总结

其实写代码记住三个字即可,短简易。代码短,读起来简单,维护容易,如果在性能和代码长度上二选一,我肯定选代码短,性能好的。而冗长的代码并不是加个程序员就能搞定的。 
保持着这个心态写代码,写出的东西离设计模式也不会差太多了。 
多说一句:存在必有其价值,不能说if else多了就不好,凡事无绝对,适合A的未必就适合B,每个东西都有其实现的场景。同理改写设计模式未必就是最棒的,听起来高大上点而已

javascript if else优化指南的更多相关文章

  1. 阿里无线前端性能优化指南 (Pt.1 加载优化)

    前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...

  2. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  3. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  4. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  5. jQuery性能优化指南(转载)

    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...

  6. 本人为项目组制定的一份页面优化指南(easyui页面优化方案)

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  7. WordPress 全方位优化指南(下)

    上一篇 WordPress 全方位性能优化指南(上)主要从网站性能指标.优化缓存.MySQL 等方面给大家介绍了如何进行 WordPress 性能优化,但还远远不够,毕竟像 WordPress 这样的 ...

  8. 移动H5前端性能优化指南[托尼托尼研究所]

    概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...

  9. WordPress SEO ☞ WordPress网站终极优化指南

    原文地址:http://www.eastdesign.net/wordpress-seo/ 最新消息,东方设计学院 WordPress SEO 系列视频教程正在持续更新中,目前为了不至于让视频传播过于 ...

随机推荐

  1. 取消Oracle数据库密码期限 取消用户锁定

    1.首先查用户被锁时间:sql>select username,account_status,lock_date from dba_users where username='SA'; 2.解锁 ...

  2. vs2013设置不生成.sdf和ipch文件

    转载:https://blog.csdn.net/sinat_23338865/article/details/53393760 使用VS2013建立解决方案时,会生成SolutionName.sdf ...

  3. Django-ORM的F查询和Q查询

    当一般的查询语句已经无法满足我们的需求时,Django为我们提供了F和Q复杂查询语句.假设场景一:老板说对数据库中所有的商品,在原价格的基础上涨价10元,你该怎么做?场景二:我要查询一个名字叫xxx, ...

  4. 通过UA实现手机端电脑端的分离!(重点)

    实现Nginx区分PC和手机访问不同的网站是物理上完全隔离的两套网站(一套手机端.一套pc端) 这样带来的好处pc端和移动端的内容可以不一样,移动版网站不需要包含特别多内容.只要包含必要的文字和较小的 ...

  5. 阿里云oss操作

    参考网址 https://blog.csdn.net/qq_22764659/article/details/87969743

  6. Python爬虫连载6-cookie深入使用实例化实现自动登录

    一.使用cookie登录 1.直接把cookie复制下去,然后手动放到请求头 2.http模块包含一些关于cookie的模块,通过他们我们可以自动使用cookie (1)cookieJar 管理存储c ...

  7. WEB - JSONP

    JSON with Padding参考 https://zh.wikipedia.org/wiki/JSONP http://www.runoob.com/json/json-jsonp.html 使 ...

  8. Unity - 求反射向量 (2d)

    求反射向量 https://www.cnblogs.com/graphics/archive/2013/02/21/2920627.html 上面是大佬的公式可以去看一下 借的大佬的图 1.求入射向量 ...

  9. where、having区别

    where  <<   group by   <<   having where筛选是在分组之前筛选,筛选完之后再group by having是分组之后再筛选,筛选完之前先g ...

  10. 学习之学习--混沌大学商学院--第一课--HHR计划

    <学习之学习> 第一课:混沌初开 李善友 1,课程目标:建立个人的多元思维模型,帮助企业找到创新驱动的增长战略. 2,创新:第二曲线创新,创新理论之父熊彼特. 3,核心课:第二曲线,非连续 ...