js中 && 与 || 的妙用
在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中 && 与 || 的妙用的更多相关文章
- 位运算符在JS中的妙用
正文 位运算 JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3,因为精度的问题,导致所有的浮点运算都是不安全的,具体原因可详见<0.1 + 0.2不等于0. ...
- js 与或运算符 || && 妙用
js 与或运算符 || && 妙用,可用于精简代码,降低程序的可读性. 首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: ...
- js中escape的用法----前端页面简单加密
escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符. http://localhost:8080/a?na ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- js中三种弹出框
javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...
- 【JavaScript】js 中一些需要注意的问题
关于js中逻辑运算符 sort()方法 1. 关于js中逻辑运算符:|| 和 && 在js逻辑运算中,0."".null.false.undefined.NaN都会 ...
- [转]JS中apply和call的联系和区别
JS中有时常用到 apply 和 call 两个方法,搜索网上很多,整理如下,简单看看这两个联系和区别, 联系: 网上查到关于apply和call的定义:这两个方法都能劫持另外一个对象的方法,继承另外 ...
随机推荐
- maven 自我学习笔记
1.常用网站: maven.apache.org http://mvnrepository.com/ 2.命令 mvn -v 查看maven的版本 mvn -compile 在项目的根目录下编译项 ...
- Android学习记录:ViewPager实现欢迎页
许多APP在第一次启动的时候,都会有welcome page.近日尝试利用ViewPager来实现Welcome Page. d0711 完成记录,跟新下载地址 =================== ...
- NHibernate教程(8)--巧用组件
本节内容 引入 方案1:直接添加 方案2:巧用组件 实例分析 结语 引入 通过前面7篇的学习,有点乏味了~~~这篇来学习一个技巧,大家一起想想如果我要在Customer类中实现一个Fullname属性 ...
- setTimeout,setInterval你不知道的…
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- 201521123056 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...
- 201521123096《Java程序设计》第七周学习总结
1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 contains遍历了ArrayList,如果ArrayList中存在与o相等的 ...
- 201521123062 《Java程序设计》第3周学习总结
1.本周学习总结 二.书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pu ...
- 201521123105 《Java程序设计》第1周学习总结
1.学习总结 简单学习jave 了解并区分JVM JRE JDK 了解JAVA语言的发展史 2.书面作业 Q:为什么java程序可以跨平台运行?执行java程序的步骤是什么?( ...
- Python[小甲鱼006常用操作符]
1.操作符 下面有一些需要注意的操作符 >>>3 ** 2 9 上面这个代表着平方 即 3的平方 >>>3 ** 5 243 ...
- 201521123063 《Java程序设计》 第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. (1)多线程的冲突 当我们不想一种资源被同时使用,导致最后结果不一致,解决方法: 使用synchronized标记 ...