在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的功能了,没有一点多余的代码。

js中 && 与 || 的妙用的更多相关文章

  1. 位运算符在JS中的妙用

    正文 位运算 JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3,因为精度的问题,导致所有的浮点运算都是不安全的,具体原因可详见<0.1 + 0.2不等于0. ...

  2. js 与或运算符 || && 妙用

    js 与或运算符 || && 妙用,可用于精简代码,降低程序的可读性.   首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: ...

  3. js中escape的用法----前端页面简单加密

    escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符. http://localhost:8080/a?na ...

  4. JS中的this 指向问题

    我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...

  5. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  6. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  7. js中三种弹出框

    javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...

  8. 【JavaScript】js 中一些需要注意的问题

    关于js中逻辑运算符 sort()方法 1. 关于js中逻辑运算符:|| 和 && 在js逻辑运算中,0."".null.false.undefined.NaN都会 ...

  9. [转]JS中apply和call的联系和区别

    JS中有时常用到 apply 和 call 两个方法,搜索网上很多,整理如下,简单看看这两个联系和区别, 联系: 网上查到关于apply和call的定义:这两个方法都能劫持另外一个对象的方法,继承另外 ...

随机推荐

  1. chrome开发工具指南(九)

    检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有 ...

  2. 关于破解Quartus

    在网上找了很多资料,说的也很详细,安装的Quartus13.0,在破解的时候遇到x64和x86两种破解器,两个针对的路径不一样,如果搞混了~可能就会出现这种情况   Error: Current li ...

  3. 转:【Java并发编程】之七:使用synchronized获取互斥锁的几点说明

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17199201     在并发编程中,多线程同时并发访问的资源叫做临界资源,当多个线程同时访 ...

  4. 【java】关于java类和对象,你想知道的在这里!

    java类的基本组成 java作为一门面向对象的语言, 类和对象是最重要的概念之一,下面,就让我们来看看java中类的基本结构是怎样的: 一个简单的java类主要可由以下几个部分(要素)组成: 1.实 ...

  5. UVW代码漫谈(一)

    博客园是个非常好的学习知识的地方,相信有很多人跟我一样,园龄3年,从博客园不知道拷了多少代码,看了多少博客,自己却一篇博客都没写过.真是罪过. 这次准备写几篇关于这个项目源码的阅读和理解的文章,大家一 ...

  6. 201521123034《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:从ArrayList ...

  7. 201521123087 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)                                 ...

  8. Java课程设计博客(团队)

    Java课程设计博客(团队) 1. 团队/项目名称 使用JAVA实现简易HTTP服务器 2. 团队成员 组长:林一心 组员:张杭镖 3. 项目git地址 https://github.com/oran ...

  9. Eclipse rap 富客户端开发总结(3):rcp/rap目前界面上的一些差异

    1. Label和Button按钮的显示的差异 当Label 和 Button显示的文字过长显示不开的时候,rcp.rap的处理方式就不一样了,rap显示不开会自己截取掉后面的文字,rcp会在文字的中 ...

  10. Spring REST API + OAuth2 + AngularJS

    http://www.baeldung.com/rest-api-spring-oauth2-angularjs 作者:Eugen Paraschiv 译者:http://oopsguy.com 1. ...