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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
Angular排序实例详解
2017/06/28 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
pandas修改DataFrame列名的方法
2018/04/08 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
python中upper是做什么用的
2020/07/20 Python
python 下载文件的多种方法汇总
2020/11/17 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
机关单位动员会主持词
2014/03/20 职场文书
就业协议书怎么填
2014/04/11 职场文书
社区务虚会发言材料
2014/10/20 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python