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 数组的方法集合
Jun 05 Javascript
关于js类的定义
Jun 28 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
测试你的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 字符串分割和比较
2009/10/06 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
档案室主任岗位职责
2014/02/12 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
龙门石窟导游词
2015/02/02 职场文书
python实现局部图像放大
2021/11/17 Python