对js运算符“||”和“&&”的总结

jianguang_qq

浏览: 91811 次
性别:
来自: 深圳南山

最近访客更多访客>>

wangbaojiao

ekate

科尔特9527

t123537598

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Ruby jQuery JavaScript IE 网络应用

首先出个题：

如图：

假设对成长速度显示规定如下：

成长速度为5显示1个箭头；

成长速度为10显示2个箭头；

成长速度为12显示3个箭头；

成长速度为15显示4个箭头；

其他都显示都显示0各箭头。

用代码怎么实现？

差一点的if，else：

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：

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强大的表现力吧：

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

更强大的，也更优的：

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

第二个需求：

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中的代码吧：

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源代码中还有很多如此精妙的代码，大家可以去学习学习。

查看图片附件

分享到：

IE6下gif动画静止的问题 | 从帖子《可输入的select下拉框》的优化，总 ...

2009-09-04 22:31
浏览 46096
评论(35)
论坛回复 / 浏览 (35 / 18576)
查看更多

35 楼 jinleileiking 2009-09-08

Hooopo 写道

简洁可读性强的if版本：


def get_level(add_step)
  return 1 if add_step == 5
  return 2 if add_step == 10
  return 3 if add_step == 12
  return 4 if add_step == 15
  0
end

case when版本：

def get_level(add_step)
  case add_step
  when 5 then 1
  when 10 then 2
  when 12 then 3
  when 15 then 4
  else
    0
  end
end

hash版本:

h = {5=>1, 12=>3, 15=>4, 10=>2}
h.default = 0

更强大的hash版本：

h = Hash.new{|h,k| h[k] = 0 if k < 0}.merge(5=>1, 12=>3, 15=>4, 10=>2)

晦涩难懂的短路版本...：

add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0

体现了ruby从本质上的强大。hash是ruby特色之一。rails用来实现dsl的强大武器！

34 楼 zhaolaiwei 2009-09-07

俺是一新手，楼主的东东很值得学习，以前不知道还可以这样写。学习了，收获很多！感谢楼主！

33 楼 viMory 2009-09-07

02221021 写道

lemonweirui 写道

表达式语言的好处相当明显。

最近在看周爱明的那本JavaScript精髓。非常不错

同感,一本好书,国内的js书中最好的了.虽然宣传比较少..

为什么好呢？

32 楼 yekeqiang 2009-09-07

<p>学习了。确实很不错。。。</p>

31 楼 02221021 2009-09-07

fightforjava 写道

02221021 写道

lemonweirui 写道

表达式语言的好处相当明显。

最近在看周爱明的那本JavaScript精髓。非常不错

同感,一本好书,国内的js书中最好的了.虽然宣传比较少..

有电子版的吗？可以发一份给我吗？万分感谢

别想了暂时没有,买本当收藏吧.

30 楼 fightforjava 2009-09-07

02221021 写道

lemonweirui 写道

表达式语言的好处相当明显。

最近在看周爱明的那本JavaScript精髓。非常不错

同感,一本好书,国内的js书中最好的了.虽然宣传比较少..

有电子版的吗？可以发一份给我吗？万分感谢

29 楼 jxpath 2009-09-07

《javascript高级应用与实践》电子工业出版社。博文视点出版，上面有这些的详细介绍

28 楼 pipilu 2009-09-06

看一下网上的一些简单的javascript组件的源码，可以学到好多技巧的。

27 楼 elan1986 2009-09-06

投新手帖的出来给个更牛的啊
真不知道怎么想的

楼主的这个技巧给我很多启示！
谢谢啊

26 楼 whaosoft 2009-09-06

js的爱好者又来讲课了~ 支持支持!!

为什么那么多投新手帖的呢要多多支持出来分享东西的爱好者们啊

25 楼 lifesinger 2009-09-06

这个的确是新手帖
但总结的精神可嘉，赞

短语表达式在js里很常见，能让不少代码优雅
但不推荐使用短路语句，容易让代码晦涩

另，针对本题，我觉得用对象的方式解决是最优雅的
{case: val}[case] 可以很好地用来替代 switch 语句，在不少js代码里，也是一种标配了

24 楼 aninfeel 2009-09-06

php上经常看到，我第一次看到时还蒙了两分钟，我想要不是我计算机专业，就直接要蒙死了，所以坚决不这样写。

23 楼 02221021 2009-09-06

lemonweirui 写道

表达式语言的好处相当明显。

最近在看周爱明的那本JavaScript精髓。非常不错

同感,一本好书,国内的js书中最好的了.虽然宣传比较少..

22 楼 lemonweirui 2009-09-06

表达式语言的好处相当明显。

最近在看周爱明的那本JavaScript精髓。非常不错

21 楼 rainchen 2009-09-06

其实很多知识点很多人都知道的，只是工作时都忙着处理业务，放假了就陪老婆逛街，很少能像楼主这样沉下心来写总结的了，这些知识点对新人老手都是有益的，值得鼓励，投新手的那些太能装了。

20 楼 deyami 2009-09-06

实在对不起，我真不是故意的，怎么会有这问题？

19 楼 deyami 2009-09-06

<div id="page">
<div id="header">
<div class="clearfix">
<div id="user_nav">
<a class="welcome" title="查看我的博客首页" href="http://deyami.iteye.com"><strong><span style="color: #e28822;">欢迎deyami</span></strong></a> <a title="发送站内短信" href="http://app.iteye.com/messages"><span style="color: #808080;">收件箱</span></a> <a title="我的应用首页" href="http://app.iteye.com"><span style="color: #808080;">我的应用</span></a>
<div class="quick_menu" style="display: none;">
<a title="我订阅的好友动态消息" href="http://app.iteye.com/feed">我的订阅</a> <a title="我参与的话题更新的消息" href="http://app.iteye.com/feed/my">我的参与</a> <a title="用闲聊发表简短的话题" href="http://app.iteye.com/chat">我的闲聊</a> <a title="我加入的圈子最新话题" href="http://app.iteye.com/mygroup">我的圈子</a> <a title="我收藏的网络资源链接" href="http://app.iteye.com/links">我的收藏</a> <a title="我的个人简历" href="http://app.iteye.com/myresume">我的简历</a> </div>
<a title="管理我的博客" href="http://deyami.iteye.com/admin"><span style="color: #808080;">我的博客</span></a> <a title="修改我的个人设置" href="http://app.iteye.com/profile"><span style="color: #808080;">设置</span></a> <a class="nobg" href="/logout"><span style="color: #808080;">退出</span></a> </div>
</div>
<div class="clearfix">
<div id="branding">
<a href="http://www.iteye.com"><img title="JavaEye-最棒的软件开发交流社区" src="http://www.iteye.com/images/logo.gif?1242180259" alt="JavaEye-最棒的软件开发交流社区"></a> </div>
<div id="ad"><img src="http://ftp.iteye.com/public/javaeye/banner.jpg" alt=""></div>
</div>
</div>
<div id="content" class="clearfix">
<div id="main">
<div class="crumbs">
<a href="/forums">论坛首页</a> <span class="arrow"><span style="color: #999999; font-size: x-small;">→</span></span> <a href="/forums/board/web">Web前端技术：AJAX和RIA</a> <span class="arrow"><span style="color: #999999; font-size: x-small;">→</span></span> <a href="/topic/462449">js运算符“||”和“&&”的妙用</a> </div>
<form id="editor_form" action="/forums/41/topics/462449/posts" enctype="application/x-www-form-urlencoded" method="post">
<table id="forum_main" border="0" cellspacing="1">
<thead><tr>
<td colspan="2">发表回复</td>
</tr></thead>
<tbody>
<tr>
<td class="row1">主题 <a style="color: red; margin-left: 5px; font-weight: normal;" href="http://www.iteye.com/topic/29434#156572" target="_blank">(注意发贴规则勿灌水)</a>
</td>
<td class="row2">回复: js运算符“||”和“&&”的妙用</td>
</tr>
<tr>
<td class="row3" colspan="2">
<div id="editor_switch">
<ul>
<li><a id="editor_tab_bbcode" href="#"><span style="color: #000000;">BBCode编辑器</span></a></li>
<li><a id="editor_tab_rich" class="activetab" href="#"><span style="color: #000000;">可视化编辑器</span></a></li>
<li><a id="editor_tab_preview" href="#"><span style="color: #000000;">预览</span></a></li>
</ul>
<span id="editor_switch_spinner" style="padding-left: 5px; display: none;"><img src="http://www.iteye.com/images/spinner.gif?1230301943" alt="Spinner"></span> </div>
<input id="editor_auto_save_id" name="auto_save_id" type="hidden"><input id="editor_bbcode_flag" name="post[bbcode]" type="hidden" value="false"><div id="editor_main">
<div id="editor_wrapper" class="clearfix" style="display: none;">
<div id="bbcode_emotions">
<h5>表情图标</h5>
<img src="http://www.iteye.com/images/smiles/icon_biggrin.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_smile.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_sad.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_surprised.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_eek.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_confused.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_cool.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_lol.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_mad.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_razz.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_redface.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_cry.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_evil.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_twisted.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_rolleyes.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_wink.gif" alt="" width="19" height="19"><img src="http://www.iteye.com/images/smiles/icon_exclaim.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_question.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_idea.gif" alt=""><img src="http://www.iteye.com/images/smiles/icon_arrow.gif" alt="" width="19" height="19">
</div>
<div id="bbcode_controllers">
<div id="bbcode_toolbar">
<input id="button_bold" type="button" value="B"><input id="button_italic" type="button" value="I"><input id="button_underline" type="button" value="U"><input type="button" value="Quote"><input type="button" value="Code"><input type="button" value="List"><input type="button" value="Img"><input type="button" value="URL"><input type="button" value="Flash"><input type="button" value="Table"><br>字体颜色: <select id="select_color"><option style="color: black;" selected value="black">标准</option>
<option style="color: darkred;" value="darkred">深红</option>
<option style="color: red;" value="red">红色</option>
<option style="color: orange;" value="orange">橙色</option>
<option style="color: brown;" value="brown">棕色</option>
<option style="color: yellow;" value="yellow">黄色</option>
<option style="color: green;" value="green">绿色</option>
<option style="color: olive;" value="olive">橄榄</option>
<option style="color: cyan;" value="cyan">青色</option>
<option style="color: blue;" value="blue">蓝色</option>
<option style="color: darkblue;" value="darkblue">深蓝</option>
<option style="color: indigo;" value="indigo">靛蓝</option>
<option style="color: violet;" value="violet">紫色</option>
<option style="color: gray;" value="gray">灰色</option>
<option style="color: white;" value="white">白色</option>
<option style="color: black;" value="black">黑色</option></select> 字体大小: <select id="select_font"><option selected value="0">标准</option>
<option value="xx-small">1 (xx-small)</option>
<option value="x-small">2 (x-small)</option>
<option value="small">3 (small)</option>
<option value="medium">4 (medium)</option>
<option value="large">5 (large)</option>
<option value="x-large">6 (x-large)</option>
<option value="xx-large">7 (xx-large)</option></select> 对齐: <select id="select_align"><option selected value="0">标准</option>
<option value="left">居左</option>
<option value="center">居中</option>
<option value="right">居右</option></select>
</div>
<div id="bbcode_tooltip">引用文字:

引用

文字

或者

javaeye 写道

文字

(alt+q)</div>
</div>
</div>
<textarea id="editor_body" class="validate-richeditor bad-words min-length-5 validation-passed" style="width: 650px; display: none; height: 350px;" cols="40" rows="20" name="post[body]">www.google.com</textarea><span id="editor_body_parent" class="mceEditor defaultSkin">
<table id="editor_body_tbl" class="mceLayout" style="width: 100%; height: 350px;" border="0" cellspacing="0" cellpadding="0"><tbody>
<tr class="mceFirst">
<td class="mceToolbar mceLeft mceFirst mceLast">
<a title="工具列- Alt+Q,编辑器- Alt-Z,元件路径- Alt-X" accesskey="q" href="#"></a>
<table id="editor_body_toolbar1" class="mceToolbar mceToolbarRow1 Enabled" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceToolbarStart mceToolbarStartListBox mceFirst"><span></span></td>
<td style="">
<table id="editor_body_formatselect" class="mceListBox mceListBoxEnabled mce_formatselect" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceFirst"><a id="editor_body_formatselect_text" class="mceText"><span style="color: #000000;">段落</span></a></td>
<td class="mceLast"><a id="editor_body_formatselect_open" class="mceOpen" tabindex="-1"></a></td>
</tr></tbody></table>
</td>
<td style="">
<table id="editor_body_fontselect" class="mceListBox mceListBoxEnabled mce_fontselect" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceFirst"><a id="editor_body_fontselect_text" class="mceText mceTitle"><span style="color: #000000;">字体</span></a></td>
<td class="mceLast"><a id="editor_body_fontselect_open" class="mceOpen" tabindex="-1"></a></td>
</tr></tbody></table>
</td>
<td style="">
<table id="editor_body_fontsizeselect" class="mceListBox mceListBoxEnabled mce_fontsizeselect" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceFirst"><a id="editor_body_fontsizeselect_text" class="mceText mceTitle"><span style="color: #000000;">字体大小</span></a></td>
<td class="mceLast"><a id="editor_body_fontsizeselect_open" class="mceOpen" tabindex="-1"></a></td>
</tr></tbody></table>
</td>
<td style=""></td>
<td style="">
<table id="editor_body_forecolor" class="mceSplitButton mceSplitButtonEnabled mce_forecolor" title="选择文字颜色" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceFirst"><a id="editor_body_forecolor_action" class="mceAction mce_forecolor" title="选择文字颜色">
<div id="editor_body_forecolor_preview" class="mceColorPreview"></div>
</a></td>
<td class="mceLast"><a id="editor_body_forecolor_open" class="mceOpen mce_forecolor" title="选择文字颜色"></a></td>
</tr></tbody></table>
</td>
<td style="">
<table id="editor_body_backcolor" class="mceSplitButton mceSplitButtonEnabled mce_backcolor" title="选择背景颜色" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceFirst"><a id="editor_body_backcolor_action" class="mceAction mce_backcolor" title="选择背景颜色">
<div id="editor_body_backcolor_preview" class="mceColorPreview"></div>
</a></td>
<td class="mceLast"><a id="editor_body_backcolor_open" class="mceOpen mce_backcolor" title="选择背景颜色"></a></td>
</tr></tbody></table>
</td>
<td style=""></td>
<td style=""><a id="editor_body_bold" class="mceButton mceButtonEnabled mce_bold" title="粗体(Ctrl+B)"></a></td>
<td style=""><a id="editor_body_italic" class="mceButton mceButtonEnabled mce_italic" title="斜体(Ctrl+I)"></a></td>
<td style=""><a id="editor_body_underline" class="mceButton mceButtonEnabled mce_underline" title="底线(Ctrl+U)"></a></td>
<td style=""><a id="editor_body_strikethrough" class="mceButton mceButtonEnabled mce_strikethrough" title="中划线"></a></td>
<td style=""></td>
<td style=""><a id="editor_body_bullist" class="mceButton mceButtonEnabled mce_bullist" title="清单符号"></a></td>
<td style=""><a id="editor_body_numlist" class="mceButton mceButtonEnabled mce_numlist" title="编号"></a></td>
<td class="mceToolbarEnd mceToolbarEndButton mceLast"><span></span></td>
</tr></tbody></table>
<table id="editor_body_toolbar2" class="mceToolbar mceToolbarRow2 Enabled" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="mceToolbarStart mceToolbarStartButton mceFirst"><span></span></td>
<td style=""><a id="editor_body_undo" class="mceButton mce_undo mceButtonEnabled" title="撤销(Ctrl+Z)"></a></td>
<td style=""><a id="editor_body_redo" class="mceButton mce_redo mceButtonDisabled" title="恢复(Ctrl+Y)"></a></td>
<td style=""><a id="editor_body_cut" class="mceButton mceButtonEnabled mce_cut" title="剪切(Ctrl+X)"></a></td>
<td style=""><a id="editor_body_copy" class="mceButton mceButtonEnabled mce_copy" title="复制(Ctrl+C)"></a></td>
<td style=""><a id="editor_body_paste" class="mceButton mceButtonEnabled mce_paste" title="粘贴(Ctrl+V)"></a></td>
<td style=""></td>
<td style=""><a id="editor_body_justifyleft" class="mceButton mceButtonEnabled mce_justifyleft" title="左对齐"></a></td>
<td style=""><a id="editor_body_justifycenter" class="mceButton mceButtonEnabled mce_justifycenter" title="居中"></a></td>
<td style=""><a id="editor_body_justifyright" class="mceButton mceButtonEnabled mce_justifyright" title="右对齐"></a></td>
<td style=""></td>
<td style=""><a id="editor_body_outdent" class="mceButton mce_outdent mceButtonDisabled" title="减少缩进"></a></td>
<td style=""><a id="editor_body_indent" class="mceButton mceButtonEnabled mce_indent" title="增加缩进"></a></td>
<td style=""></td>
<td style=""><a id="editor_body_link" class="mceButton mce_link mceButtonDisabled" title="插入/编辑链接"></a></td>
<td style=""><a id="editor_body_unlink" class="mceButton mce_unlink mceButtonDisabled" title="取消链接"></a></td>
<td style=""><a id="editor_body_image" class="mceButton mceButtonEnabled mce_image" title="插入/编辑图片"></a></td>
<td style=""><a id="editor_body_media" class="mceButton mceButtonEnabled mce_media" title="插入/编辑媒体"></a></td>
<td style=""><a id="editor_body_emotions" class="mceButton mceButtonEnabled mce_emotions" title="表情"></a></td>
<td style=""><a id="editor_body_table" class="mceButton mceButtonEnabled mce_table" title="插入新表格"></a></td>
<td style=""></td>
<td style=""><a id="editor_body_quote" class="mceButton mceButtonEnabled mce_quote" title="插入引用"><span style="color: #000000;"><img class="mceIcon" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/img/quote.gif" alt=""></span></a></td>
<td style=""><a id="editor_body_code" class="mceButton mceButtonEnabled mce_code" title="插入代码"><span style="color: #000000;"><img class="mceIcon" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/img/code.gif" alt=""></span></a></td>
<td style=""></td>
<td style=""><a id="editor_body_fullscreen" class="mceButton mceButtonEnabled mce_fullscreen" title="全屏模式"></a></td>
<td class="mceToolbarEnd mceToolbarEndButton mceLast"><span></span></td>
</tr></tbody></table>
<a title="工具列- Alt+Q,编辑器- Alt-Z,元件路径- Alt-X" accesskey="z" href="#"></a>
</td>
</tr>
<tr class="mceLast">
<td class="mceIframeContainer mceFirst mceLast"></td>
</tr>
</tbody></table></span>
</div>
<div>提示：内容长度最大64KB，约2万多汉字，如果出现超长（比如从Word粘贴带格式文本）被截断的问题，请分开发布</div>
<script type="text/javascript"></script></td>
</tr>
<tr>
<td class="row1">附件</td>
<td class="row2">上传新的文件：
<div id="attachment_iframes"><input id="attachments_counter" class="max-value-0" type="hidden" value="0"></div>
<ul>
提示信息：
<li>上传文件请压缩后再上传，允许zip, rar, gz, tar, bz2, jar, war格式的压缩文件</li>
<li>上传图片推荐使用png, jpg, gif等类型</li>
<li>文件大小不能超过10MB</li>
</ul>
</td>
</tr>
<tr>
<td class="row4" colspan="2" align="center"><input id="submit_button" class="submit" name="commit" type="submit" value="提交"></td>
</tr>
</tbody>
</table>
</form>
<div style="text-align: center; padding-bottom: 0px; padding-left: 10px; padding-right: 0px; font-weight: bold; padding-top: 20px;">主题回顾</div>
<div style="height: 300px; overflow: auto;">
<table id="forum_main" border="0" cellspacing="1">
<thead><tr>
<td>作者</td>
<td>正文</td>
</tr></thead>
<tbody><tr>
<td class="postauthor">
<ul>
<li class="name">jianguang_qq</li>
</ul>
</td>
<td class="postcontent">
<p>首先出个题：</p>
<p><img src="http://dl.iteye.com/upload/attachment/143005/1ec269a5-d45f-37a3-ab50-6eaaee73e835.jpg" alt=""></p>
<p>如图：</p>
<p>假设对成长速度显示规定如下：</p>
<p>成长速度为5显示1个箭头；</p>
<p>成长速度为10显示2个箭头；</p>
<p>成长速度为12显示3个箭头；</p>
<p>成长速度为15显示4个箭头；</p>
<p>其他都显示都显示0各箭头。</p>
<p>用代码怎么实现？</p>
<p> </p>
<p>差一点的if，else：</p>
<div class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码 <a title="复制代码" href="#"><img src="/images/icon_copy.gif" alt="复制代码"></a>
</div>
</div>
<ol class="dp-c">
<li><span><span class="keyword"><strong><span style="color: #7f0055;">var</span></strong></span><span> add_level = 0;   </span></span></li>
<li><span>  </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">if</span></strong></span><span>(add_step == 5){   </span>
</li>
<li><span>    add_level = 1;   </span></li>
<li><span>}   </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">else</span></strong></span><span> </span><span class="keyword"><strong><span style="color: #7f0055;">if</span></strong></span><span>(add_step == 10){   </span>
</li>
<li><span>    add_level = 2;   </span></li>
<li><span>}   </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">else</span></strong></span><span> </span><span class="keyword"><strong><span style="color: #7f0055;">if</span></strong></span><span>(add_step == 12){   </span>
</li>
<li><span>    add_level = 3;   </span></li>
<li><span>}   </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">else</span></strong></span><span> </span><span class="keyword"><strong><span style="color: #7f0055;">if</span></strong></span><span>(add_step == 15){   </span>
</li>
<li><span>    add_level = 4;   </span></li>
<li><span>}   </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">else</span></strong></span><span> {   </span>
</li>
<li><span>    add_level = 0;   </span></li>
<li><span>}  </span></li>
</ol>
</div>
<pre name="code" class="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;
}</pre>
<p> </p>
<p>稍好些的switch：</p>
<div class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码 <a title="复制代码" href="#"><img src="/images/icon_copy.gif" alt="复制代码"></a>
</div>
</div>
<ol class="dp-c">
<li><span><span class="keyword"><strong><span style="color: #7f0055;">var</span></strong></span><span> add_level = 0;   </span></span></li>
<li><span>  </span></li>
<li>
<span class="keyword"><strong><span style="color: #7f0055;">switch</span></strong></span><span>(add_step){   </span>
</li>
<li>
<span>    </span><span class="keyword"><strong><span style="color: #7f0055;">case</span></strong></span><span> 5 : add_level = 1;   </span>
</li>
<li>
<span>        </span><span class="keyword"><strong><span style="color: #7f0055;">break</span></strong></span><span>;   </span>
</li>
<li>
<span>    </span><span class="keyword"><strong><span style="color: #7f0055;">case</span></strong></span><span> 10 : add_level = 2;   </span>
</li>
<li>
<span>        </span><span class="keyword"><strong><span style="color: #7f0055;">break</span></strong></span><span>;   </span>
</li>
<li>
<span>    </span><span class="keyword"><strong><span style="color: #7f0055;">case</span></strong></span><span> 12 : add_level = 3;   </span>
</li>
<li>
<span>        </span><span class="keyword"><strong><span style="color: #7f0055;">break</span></strong></span><span>;   </span>
</li>
<li>
<span>    </span><span class="keyword"><strong><span style="color: #7f0055;">case</span></strong></span><span> 15 : add_level = 4;   </span>
</li>
<li>
<span>        </span><span class="keyword"><strong><span style="color: #7f0055;">break</span></strong></span><span>;   </span>
</li>
<li>
<span>    </span><span class="keyword"><strong><span style="color: #7f0055;">default</span></strong></span><span> : add_level = 0;   </span>
</li>
<li>
<span>        </span><span class="keyword"><strong><span style="color: #7f0055;">break</span></strong></span><span>;   </span>
</li>
<li><span>}  </span></li>
</ol>
</div>
<pre name="code" class="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;
}</pre>
<p>如果需求改成：</p>
<p>成长速度为>12显示4个箭头；</p>
<p>成长速度为>10显示3个箭头；</p>
<p>成长速度为>5显示2个箭头；</p>
<p>成长速度为>0显示1个箭头；</p>
<p>成长速度为<=0显示0个箭头。</p>
<p> </p>
<p>那么用switch实现起来也很麻烦了。</p>
<p> </p>
<p>那么你有没有想过用一行就代码实现呢？</p>
<p>ok，让我们来看看js强大的表现力吧：</p>
<div class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码 <a title="复制代码" href="#"><img src="/images/icon_copy.gif" alt="复制代码"></a>
</div>
</div>
<ol class="dp-c">
<li><span><span class="keyword"><strong><span style="color: #7f0055;">var</span></strong></span><span> add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;   </span></span></li>
</ol>
</div>
<pre name="code" class="js">var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0; </pre>
<p>更强大的，也更优的：</p>
<p> </p>
<div class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码 <a title="复制代码" href="#"><img src="/images/icon_copy.gif" alt="复制代码"></a>
</div>
</div>
<ol class="dp-c">
<li><span><span class="keyword"><strong><span style="color: #7f0055;">var</span></strong></span><span> add_level={</span><span class="string"><span style="color: #0000ff;">'5'</span></span><span>:1,</span><span class="string"><span style="color: #0000ff;">'10'</span></span><span>:2,</span><span class="string"><span style="color: #0000ff;">'12'</span></span><span>:3,</span><span class="string"><span style="color: #0000ff;">'15'</span></span><span>:4}[add_step] || 0;  </span></span></li>
</ol>
</div>
<pre name="code" class="js">var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;</pre>
<p>第二个需求： </p>
<div class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码 <a title="复制代码" href="#"><img src="/images/icon_copy.gif" alt="复制代码"></a>
</div>
</div>
<ol class="dp-c">
<li><span><span class="keyword"><strong><span style="color: #7f0055;">var</span></strong></span><span> add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;  </span></span></li>
</ol>
</div>
<pre name="code" class="js">var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;</pre>
<p><br>首先我们来梳理一下一个概念，请你一定要记住：在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true（好像没有遗漏了吧，请各位确认下）。这个一定要记住，不然应用||和&&就会出现问题。<br><br>这里顺便提下：经常有人问我，看到很多代码if(!!attr)，为什么不直接写if(attr)；<br>其实这是一种更严谨的写法：<br>请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。<br><br>下面主要讨论下逻辑运算符&&和||。<br><br>几乎所有语言中||和&&都遵循“短路”原理，如&&中第一个表达式为<span>假</span>就不会去处理第二个表达式，而||正好相反。<br>js也遵循上述原则。但是比较有意思的是它们返回的值。<br>代码：var attr = true && 4 && “aaa”;<br>那么运行的结果attr就不是简单的true或这false，而是”aaa”<br>再来看看||：<br>代码：var attr = attr || “”;这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则：如果实参需要是0、""、null、false、undefined、NaN的时候也会当false来处理。</p>
<p><br>if(a >=5){</p>
<p>    alert("你好");<br>}<br>可以写成：<br>a >= 5 && alert("你好");</p>
<p><br>这样只需一行代码就搞定。但是需要注意的一点就是：js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。这就需要我们自己来权衡了。<br>一方面精简js代码，能实质性的减少网络流量，尤其是大量应用的js公用库。个人比较推荐的做法是：如果是相对复杂的应用，请适当地写一些注释。这个和正在表达式一样，能够精简代码，但是可读性会降低，对读代码的人要求会高些，最好的办法就是写注释。</p>
<p> </p>
<p><span>我们可以不使用这些技巧，但是我们一定要能看懂，因为这些技巧已经广泛应用，尤其是像JQuery等js框里的代码，不理解这些你就很难看懂别人的代码。</span></p>
<p>像var Yahoo = Yahoo || {};这种是非常广泛应用的。</p>
</td>
</tr></tbody>
</table>
</div>
<script type="text/javascript"></script></div>
<div id="nav">
<div class="wrapper">
<ul>
<li><a href="http://www.iteye.com/">首页</a></li>
<li><a href="http://www.iteye.com/news">新闻</a></li>
<li><a class="selected" href="http://www.iteye.com/forums">论坛</a></li>
<li><a href="http://www.iteye.com/ask">问答</a></li>
<li><a href="http://www.iteye.com/wiki">知识库</a></li>
<li><a href="http://www.iteye.com/blogs">博客</a></li>
<li><a href="http://www.iteye.com/groups">圈子</a></li>
<li><a href="http://www.iteye.com/job">招聘</a></li>
<li><a href="http://www.iteye.com/index/service">服务</a></li>
<li class="last"><a href="http://www.iteye.com/search">搜索</a></li>
</ul>
</div>
</div>
<div id="channel_nav">
<ul>
<li><a href="http://java.iteye.com">Java</a></li>
<li><a href="http://web.iteye.com">Web</a></li>
<li><a href="http://ruby.iteye.com">Ruby</a></li>
<li><a href="http://python.iteye.com">Python</a></li>
<li><a href="http://agile.iteye.com">敏捷</a></li>
<li><a href="http://mysql.iteye.com">MySQL</a></li>
<li><a href="http://primeton.iteye.com">普元</a></li>
<li><a href="http://dorado.iteye.com">Dorado</a></li>

<li class="last"><a href="http://book.iteye.com">图书</a></li>
</ul>
</div>
</div>
<div id="footer">
<div id="site_nav">
<ul>
<li><a href="/index/service"><span style="color: #006699;">广告服务</span></a></li>
<li><a href="http://webmaster.iteye.com"><span style="color: #006699;">JavaEye黑板报</span></a></li>
<li><a href="/index/aboutus"><span style="color: #006699;">关于我们</span></a></li>
<li><a href="/index/contactus"><span style="color: #006699;">联系我们</span></a></li>
<li class="last"><a href="/index/friend_links"><span style="color: #006699;">友情链接</span></a></li>
</ul>
</div>
<div id="copyright">© 2003-2009 iteye.com. All rights reserved. 上海炯耐计算机软件有限公司 [ 沪ICP备05023328号 ] </div>
</div>
</div>
<div id="chat_input" style="display: none;"></div>
<div id="chat_button"><a style="color: black; text-decoration: none;" href="#">说点啥吧 <img src="http://www.iteye.com/images/app/chat.gif?1236064059" alt="Chat"></a></div>
<p>
<script type="text/javascript"></script><img src="http://stat.iteye.com/?url=http%3A%2F%2Fwww.iteye.com%2Fforums%2F41%2Ftopics%2F462449%2Fposts%2Fnew&referrer=http%3A%2F%2Fwww.iteye.com%2Flogin&logged_in=yes" alt="" width="0" height="0"></p>

18 楼 pipilu 2009-09-06

<div class="quote_title">yydriver 写道</div>
<div class="quote_div">
<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<p>更强大的，也更优的：</p>
<p> </p>
<pre name="code" class="js">var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;</pre>
<p> </p>
</div>
<p>麻烦LZ 解释一下这个，有点看不懂。</p>
<p> {'5':1,'10':2,'12':3,'15':4} 可以当作一个对象来看吗？</p>
<p>那[add_step],可以当作一个数组的下标来理解吗？</p>
<p> </p>
</div>
<p>javascript的关联数组。</p>

17 楼 h521999 2009-09-06

这点还真不知道，js真是强大呀！

16 楼 jindw 2009-09-06

这个帖子居然被投了这么多新手,看不下去了.

其实楼主这个做法是很有学习价值的,JS的这种bool运算规则,是很漂亮的.充分发挥了脚本语言应有的优势,不像php那样无缘丢失很有价值的信息.

这可以看作一种简单的表达式式switch,作为一种固定模式推广运用.

这种写法,在模板的表达式语言里面更有发挥的空间.

Lite 系列模板的表达式,都会支持这种写法.

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论