首先,我们来看一段代码:

var add_level = ;
if(add_step == ){
add_level = ;
}
else if(add_step == ){
add_level = ;
}
else if(add_step == ){
add_level = ;
}
else if(add_step == ){
add_level = ;
}
else {
add_level = ;
}

  写的稍微好一点的使用switch:

  实现代码如下:

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;

  如果需求改了,变成不是等于,而是>或者<,你是不是就觉得懵比了,这咋又要回到if语句去了呢,性能有又一次的降低了

  接下来就是我要讲到的如何用 || 和 && 来实现的:

 

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; 

  改变需求也不怕  来咱们瞧瞧!

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

  不着急,就是这样的简单,对没有问题,就是这样,不信,你可以打开你的编译工具来证实一下,看是永远没有提升的,这是我学习的方式,既然看了,我就要自己动手去敲代码,就算是看懂了我也要去证实去敲一遍(题外话,哈哈,无形装逼,最为致命!)

  我来解释下吧!

  首先我们来梳理一下一个概念,请你一定要记住:在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||和&&就会出现问题。 
  这里顺便提下:经常有人问我,看到很多代码if(!!attr),为什么不直接写if(attr); 
  其实这是一种更严谨的写法: 
  请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。 
  下面主要讨论下逻辑运算符&&和||。 
  几乎所有语言中||和&&都遵循“短路”原理,如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反。 
  js也遵循上述原则。但是比较有意思的是它们返回的值。 
  代码:var attr = true && 4 && “aaa”; 
  那么运行的结果attr就不是简单的true或这false,而是”aaa” 
  再来看看||:

  代码:var attr = attr || “”;这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则:如果实参需要        是0、""、null、false、undefined、NaN的时候也会当false来处理。

  if(a >=5){ 
  alert("你好"); 
  } 
  可以写成: 
  a >= 5 && alert("你好"); 
  这样只需一行代码就搞定。但是需要注意的一点就是:js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了。 
  一方面精简js代码,能实质性的减少网络流量,尤其是大量应用的js公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。

  我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,尤其是像JQuery等js框里的代码,不理解这些你就很难看懂别人的代码。 
  像var Yahoo = Yahoo || {};这种是非常广泛应用的。 
  ok,最后让我们来看一段jQuery中的代码吧:

var wrap =
// option or optgroup
!tags.indexOf("<opt") &&
[ 1, "<select multiple='multiple'>", "</select>" ] || !tags.indexOf("<leg") &&
[ 1, "<fieldset>", "</fieldset>" ] || tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "<table>", "</table>" ] || !tags.indexOf("<tr") &&
[ 2, "<table><tbody>", "</tbody></table>" ] || // <thead> matched above
(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
[ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || !tags.indexOf("<col") &&
[ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || // IE can't serialize <link> and <script> tags normally
!jQuery.support.htmlSerialize &&
[ 1, "div<div>", "</div>" ] || [ 0, "", "" ]; // Go to html and back, then peel off extra wrappers
div.innerHTML = wrap[1] + elem + wrap[2]; // Move to the right depth
while ( wrap[0]-- )
div = div.lastChild;

  这段代码是作者用来处理 $(html) 时,有些标签必须要约束的,如<option>必须在<select></select>之内的。 
  可能你也发现了作者还有一个很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很简单的就实现了startWith的功能了,没有一点多余的代码。jquery源代码中还有很多如此精妙的代码,大家可以去学习学习

javascript中||和&&代替if的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. 通过DOS、SHELL批处理命令加载Lib并编译和打包Java项目(或者运行项目)

    有些时候,需要通过DOS批处理来编译整个项目的JAVA文件:并且编译后还要对Class文件进行打包成jar文件...这还不是最烦的,最烦的是,编译和打包的时候需要依赖其他多个jar文件,困难就这么来了 ...

  2. Reactor模式与Proactor模式

    该文章总结了网上资源对这两种模式的描述 原文地址:http://www.cnblogs.com/dawen/archive/2011/05/18/2050358.html 1.标准定义 两种I/O多路 ...

  3. Jenkins+Maven+SVN快速搭建持续集成环境(转)

    Jenkins是一个可扩展的持续集成引擎,Jenkins非常易于安装和配置,简单易用,下面看看我们是如何几分钟就快速搭建一个持续集成环境吧. 假设我们目前已经有2个maven项目:entities(J ...

  4. HTML5[3]:中文换行

    保证中文每行第一个字,不会出现标点符号 p { white-space: pre-wrap; }

  5. 【转载】solr初体验

    [1]http://cxshun.iteye.com/blog/1039445 由于工作原因,这段时间接触到solr,一个基于lucene的企业级搜索引擎.不怎么了解它的童鞋可以去GOOGLE一下. ...

  6. 审核流(3)低调奢华,简单不凡,实例演示-SNF.WorkFlow--SNF快速开发平台3.1

    下面我们就从什么都没有,结合审核流进行演示实例.从无到有如何快速完美的实现,然而如此简单.低调而奢华,简单而不凡. 从只有数据表通过SNF.CodeGenerator代码生成器快速生成单据并与审核流进 ...

  7. SNF开发平台WinForm之十四-站内发送系统信息-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: .组装站内信息发送实体对象. SNFService SNFService = new SNFService(); if (this.ucUser.SelectedIds ! ...

  8. MyBatis知多少(16)MyBatis映射

    之前我们详细地讨论了MyBatis背后的设计理念以及iBATIS框架是如何产生的.也说明了MyBatis是一个混合型解决方案,它从处理关系数据库的其他不同方法那里借鉴了许多思想.那么MyBatis到底 ...

  9. ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误

    今天我们的项目遇到问题 为了避免跨站点脚本攻击, 默认我们项目是启用了 validateRequest,这也是 ASP.NET 的默认验证规则.项目发布后,如果 customError 启用了,则会显 ...

  10. 对 JimmyZhang 老师的文章《项目代码风格要求》的一些个人观点

    Jimmy Zhang 老师是博客园中我最佩服的人之一,今天看了他的文章<项目代码风格要求>觉得大部分地方我都很认同,工作中也是强迫自己也要按照规范来编程.下面是我的一些个人观点,想贴出来 ...