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);      }  }