JavaScript运算符的优化

---

在工作中的遇到了很多JS运算符上的问题，借此机会查阅了相关资料，重新巩固了一下基础知识。因此在这里记下今天的收获；

言归正传，在日常前端开发中（本人主要是从事JavaWeb方向的），遇到了很多判断语句，但是这些语句写起来很冗长，所以想用另一种方式替代；

例1：if else 和三元表达式的替换

if ...else ... 表达式：

if (expr1){
    (expr2)
}else{
    (expr3)
}


三目表达式进化: (expr1) ? (expr2) : (expr3)

用法：

  if(信春哥||信信爷){
    “长命百岁”
  }else{
    “没活过30岁“
   }

日常开发中经常会有这样的 if else 判断，特别是嵌套比较多的时候 用三元是比较和谐的，可以让你的代码看起来更加清爽，结构清晰。

**从三元表达式继续超进化:**

flag?$('body').addClass('hover'):$('body').removeClass('hover') ;

**从超进化到究极进化：**

$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

可能这里不是很好理解，比较困惑
因为当flag = true 的时候 ，代码就变成以下代码

$('.item')['addClass']('hover');

这种写法相当于：

$('.item').addClass('hover');


这样的写法是不是很简洁、直观？

例2：switch语句与 “&&” “||“ 的转换用法；

在介绍这个之前先说一下 与 或 运算符，在JS环境下：

能够转换为false的表达式有:false,”“(空字符串),0和NaN,null,undefined.

能够转化为true的值为:true,任何非空字符串，任何非零数字值(包括无穷大),任何对象

几乎所有语言中||和&&都遵循“短路”原理，
如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反,第一个表达式为真就不会去第二个表达式

代码：var attr = true && 4 && “aaa”;

那么运行的结果attr就不是简单的true或这false，而是”aaa”
再来看看||：

代码：var attr = attr || “”;
这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。再次提醒你记住上面的原则：如果实参需要是0、”“、null、false、undefined、NaN的时候也会当false来处理。

假如此时有如下要求：
(http://img.blog.csdn.net/20170221205850154?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWxlY29y/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
假设对成长速度显示规定如下： 
成长速度为5显示1个箭头； 
成长速度为10显示2个箭头； 
成长速度为12显示3个箭头； 
成长速度为15显示4个箭头； 
其他都显示都显示0各箭头。 
用代码怎么实现？ 

简单一点的写法：

var add_level = 0; 
if(add_step == 5){ 
add_level = 1; 
} 
else if(add_step == 10){ 
add_level = 2; 
} 
else if(add_step == 12){ 
add_level = 3; 
} 
else if(add_step == 15){ 
add_level = 4; 
} 
else { 
add_level = 0; 
} 



稍微好一点的写法：

var add_level = 0; 
switch(add_step){ 
case 5 : add_level = 1; 
break; 
case 10 : add_level = 2; 
break; 
case 12 : add_level = 3; 
break; 
case 15 : add_level = 4; 
break; 
default : add_level = 0; 
break; 


现在我们看一下JS优秀的代码：

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0; 


超级强大而优秀的代码：

var add_level={ 
            '5':1,
            '10':2,
            '12':3,
            '15':4
            }[add_step] || 0; 

这段代码可能不好理解， 
这段代码是jquery里面的高级用法，当add_step取5,10,12,15时，add_level的值为 1,2,3,4,如果add_step为其它值，这add_level的值为0;


如果需求改成： 
成长速度为>12显示4个箭头； 
成长速度为>10显示3个箭头； 
成长速度为>5显示2个箭头； 
成长速度为>0显示1个箭头； 
成长速度为<=0显示0个箭头。

我们应该这么写:

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0; 

与或非的代码简短、却能减少我们很大的代码量，与之对应的就是如果代码量过于冗长、那么它的可读性就会差很多，各位自行斟酌；

最后带给一些使用的JS技巧：

1：首次为变量赋值时务必使用var关键字

变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。

2：使用===取代==

==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。

3：使用自调用函数

函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ）。格式如下：
(function(){
    // 置于此处的代码将自动执行
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

4：从数据组去随机数

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var  randomItem = items[Math.floor(Math.random() * items.length)];

5：逻辑或还可用来设置默认值，比如函数参数的默认值。

function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

6：逻辑或还可用来设置默认值，比如函数参数的默认值。

function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

7：HTML字段转换函数

function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", "\"": "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}

8：处理WebSocket的超时

通常情况下，WebSocket连接创建后，如果30秒内没有任何活动，服务器端会对连接进行超时处理，防火墙也可以对单位周期没有活动的连接进行超时处理。

为了防止这种情况的发生，可以每隔一定时间，往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求，一个用于使连接保持活动状态，另一个专门用于结束这个状态。
var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}