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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
测试你的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中ini_set与ini_get用法实例
2014/11/04 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
使用正则替换变量
2007/05/05 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
简单学习Python time模块
2016/04/29 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
树莓派实现移动拍照
2019/06/22 Python
Python数据存储之 h5py详解
2019/12/26 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
农村婚礼主持词
2014/03/13 职场文书
倡议书范文格式
2014/05/12 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
庆七一宣传标语
2014/10/08 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
模范教师事迹材料
2014/12/16 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python