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


Posted in Javascript onDecember 09, 2009

首先出个题:
js 与或运算符 || && 妙用
如图:
假设对成长速度显示规定如下:
成长速度为5显示1个箭头;
成长速度为10显示2个箭头;
成长速度为12显示3个箭头;
成长速度为15显示4个箭头;
其他都显示都显示0各箭头。
用代码怎么实现?

差一点的if,else:
Js代码

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

稍好些的switch:
Js代码
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;

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

那么用switch实现起来也很麻烦了。

那么你有没有想过用一行就代码实现呢?
ok,让我们来看看js强大的表现力吧:
Js代码

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

更强大的,也更优的:

Js代码

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

第二个需求:
Js代码
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中的代码吧:

Js代码

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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
测试你的JS的掌握程度的代码
Dec 09 #Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 #Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 #Javascript
jQuery 开天辟地入门篇一
Dec 09 #Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 #Javascript
jquery 事件执行检测代码
Dec 09 #Javascript
为指定元素增加样式的js代码
Dec 09 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
完善的jquery处理机制
2016/02/21 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
什么是servlet
2012/05/08 面试题
会计专业的自荐信
2013/12/12 职场文书
幼儿教师求职信
2014/05/24 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2016春节慰问信范文
2015/03/25 职场文书
土建施工员岗位职责
2015/04/11 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python