javascript if else优化指南
不管是平时在学习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优化指南的更多相关文章
- 阿里无线前端性能优化指南 (Pt.1 加载优化)
前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- 本人为项目组制定的一份页面优化指南(easyui页面优化方案)
#本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...
- WordPress 全方位优化指南(下)
上一篇 WordPress 全方位性能优化指南(上)主要从网站性能指标.优化缓存.MySQL 等方面给大家介绍了如何进行 WordPress 性能优化,但还远远不够,毕竟像 WordPress 这样的 ...
- 移动H5前端性能优化指南[托尼托尼研究所]
概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...
- WordPress SEO ☞ WordPress网站终极优化指南
原文地址:http://www.eastdesign.net/wordpress-seo/ 最新消息,东方设计学院 WordPress SEO 系列视频教程正在持续更新中,目前为了不至于让视频传播过于 ...
随机推荐
- netty代理http&https请求
(1)关键代码 package test; import java.security.cert.CertificateException; import javax.net.ssl.SSLExcept ...
- Jmeter_Http默认请求值
1.线程组->配置原件->Http请求默认值 2.作用:几个Http 请求参数都是重复的数据 3.优先级:Http请求默认值和单个Http请求数值,使用单个Http请求数值为主 举例如下: ...
- 高级T-SQL进阶系列 (一)【上篇】:使用 CROSS JOIN 介绍高级T-SQL
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文连接:传送门 这是一个新进阶系列的第一篇文章,我们将浏览Transact-SQL(T-SQL)的更多高级特性.这个进阶系列将会包 ...
- RAID0---RAID10(重点)
二.基本原理 RAID ( Redundant Array of Independent Disks )又叫独立磁盘冗余阵列,通常简称为磁盘阵列. RAID是一种把多块独立的硬盘(物理硬盘)按不同方式 ...
- device supports x86 but apk only supports armeabi-v7a问题解决
我们可以在build.gradle中有ndk这段代码,只要在后面加上“x86”,再sync now一下,就发现可以运行了. ndk { abiFilters "armeabi-v7a&quo ...
- jenkins windows 2.204版,免安装,推荐插件齐备.
windows专用,已安装好推荐插件, 更新了安装源为清华源,也就是说只要官方的插件,你都可以秒速下载了.香不? 解压到一个文件夹,管理员模式运行cmdcd 文件夹名jenkins install这样 ...
- jqGird错误“decimalSeparator”的解决办法
在使用jqGrid的过程中,突然出现以下错误: jquery.jqGrid.js:15016 Uncaught TypeError: Cannot read property 'decimalSepa ...
- [A]List`1[MyObject] cannot be cast to [B]List`1[MyObject]
Description I have created a small class in a single ASP.NET 4.5 web forms page that is instantiated ...
- Java的下载与安装
下载Java 如果要是想聊天,那我们就需要腾讯QQ,先把它下载过来安装上,就可以聊天了,那如果是想要开发java程序呢,我们就需要下载一个开发工具包“jdk”,安装上就可以开发了.当然java是属于哪 ...
- 计算机基础- 序列化(Serialization)和持久化(Persistence)的区别
参考 https://en.wikipedia.org/wiki/Serialization https://en.wikipedia.org/wiki/Persistence_(computer_s ...