Javascript表达式中连续的 && 和 || 之赋值区别


Posted in Javascript onOctober 17, 2010

代码如下:

function write(msg){ 
for(var i = 0; i < arguments.length; i ++){ 
document.write(arguments[i] + '<br />'); 
} 
} 
//关于 '&&' 
test1 = 1 && 2 && 3 && 4; 
test2 = '0' && 2 && 3 && 4; 
test3 = 1 && 2 && 0 && 4; 
test4 = 2 && 'i' && 'love' && 3 && 'you'; 
test5 = 'i' && 'hate' && 1 && 0 && 'you'; 
test6 = 1 && false && 'ihateyou' && '2'; 
test7 = 2 && true && 'ihatehateyou' && '23'; 
test8 = 4 && true && 'undefined' && 'true' && '1'; 
test9 = 4 && true && undefined && 'true' && '1'; 
test10 = 4 && true && 'null' && 'true' && '1'; 
test11 = 4 && true && null && 'true' && '1'; 
write(test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11); 
write('----------------------------------------------'); 
//关于 '||' 
_test1 = 1 || 2 || 3 || 4; 
_test2 = 0 || 2 || 3 || 4; 
_test3 = 0 || '0' || 8 || 4; 
_test4 = 2 || 'i' || 'love' || 0 || 'you'; 
_test5 = 0 || 'hate' || 1 || 0 || 'you'; 
_test6 = false || 0 || 'ihateyou' || '2'; 
_test7 = false || true || 'ihatehateyou' || '23'; 
_test8 = 0 || 0 || 'undefined' || 'true' || '1'; 
_test9 = 0 || 0|| undefined || 'true' || '1'; 
_test10 = 0 || false || 'null' || 'true' || '1'; 
_test11 = 0 || 0 || null || 'true' || '1'; 
write(_test1, _test2, _test3, _test4, _test5, _test6, _test7, _test8, _test9, _test10, _test11);

来看看输出结果就会明白了:

关于 ‘&&'的输出结果为:

4 
4 
0 
you 
0 
false 
23 
1 
undefined 
1 
null

每一行的编号对应上面的每一个 test。

关于 ‘||'的输出结果为:

1 
2 
0 
2 
hate 
ihateyou 
true 
undefined 
true 
null 
true

仔细对照着看的话就会清楚一些了:

多个连续的 && 的表达式中若没有 0, false, undefined, null 的话,它将取得最后一个“子表达式”的值,否则将表达式中的 0, false, undefined, null 返回。

多个连续的 || 的表达式将会取第一个“子表达式”的值,若为 0, false, undefined, null 中之一的话则取下一个“子表达式”的值,以此类推,直至找到不为 0, false, undefined, null 的“子表达式”,并将它作为整个表达式的值。

补充:

上面的似乎没有考虑一种情况,就是有一个子表达式为 '' 怎么办呢?其实可以再换一种表述方式来描述 && 和 || 的工作方式:

对于 (...) && (...) && (...) ...

从左至右遍历各个子表达式,并将每个子表达式进行 Boolean 的强制转换,若出现 Boolean(子表达式) 为 false 的情况,则整个表达式的值即为此子表达式的值(0 或 false 或 undefined 或 null 或 ''),后面的子表达式不再判断;若所有的 Boolean(子表达式) 均为 true,则整个表达式的值即为最后一个子表达式的值。

对于 (...) || (...) || (...) ...

从左至右遍历各个子表达式,并将每个子表达式进行 Boolean 的强制转换,若出现 Boolean(子表达式) 为 true 的情况,则整个表达式的值即为此子表达式的值,后面的子表达式不再“理会”;若 Boolean(子表达式) 为 false,则判断后一个子表达式的 Boolean 情况,直至找到 Boolean(子表达式) 为 true 的情况;若全部的 Boolean(子表达式) 均为 false,则返回最后一个子表达式的值(0 或 false 或 undefined 或 null 或 '')。

这里要注意:

Boolean(false) != Boolean('false'),前者为 false,而后者为 true 。

Boolean(undefined) != Boolean('undefined'),前者为 false,而后者为 true 。

Boolean(null) != Boolean('null'),前者为 false,而后者为 true 。

Boolean(0) != Boolean('0'),前者为 false,而后者为 true 。

Boolean('') == false

Javascript 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
js使用formData实现批量上传
Mar 27 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 #Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 #Javascript
自己整理的一个javascript日期处理函数
Oct 16 #Javascript
理解Javascript_10_对象模型
Oct 16 #Javascript
理解Javascript_09_Function与Object
Oct 16 #Javascript
理解Javascript_08_函数对象
Oct 15 #Javascript
You might like
php面象对象数据库操作类实例
2014/12/02 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JS实现一键回顶功能示例代码
2013/10/28 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
利用python发送和接收邮件
2016/09/27 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
解决Django连接db遇到的问题
2019/08/29 Python
使用python turtle画高达
2020/01/19 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
init进程的作用
2015/08/20 面试题
Java servlet面试题
2012/03/04 面试题
买房子个人收入证明
2014/01/16 职场文书
趣味比赛活动方案
2014/02/15 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
幼儿园感谢信
2015/01/21 职场文书